Drop shadow on blocks
-
Any way to have drop shadow added to blocks?
Tried out one I found here , but didn’t work on my site apparently.
Suggestions?Nina
#content {
-moz-box-shadow: 5px 5px 5px #888f88;
-webkit-box-shadow: 5px 5px 5px #888f88;
box-shadow: 5px 5px 5px #888f88;
}.hentry {
margin-bottom: 0;
}The blog I need help with is: (visible only to logged in users)
-
It would need to be applied to selector forthe specific type of block, not all content: https://wordpress.com/support/custom-design/css-basics/#selectors
Here are some options:
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
-
Hi – again, I think……
thanks for getting back to me.
“applied to selector for the specific type of block,”
(selector?)that makes sense, but then something would have to be applied to the snippet about that, the spesific block(s) ?
-
I have read your links and about selector.
I think I will need help to take it further, a snippet for applying shadow to the shortcode block and image block. -
@ninapetitpoisvideo have you considered adding a special class to the block? You can do that under advanced. Then that class would count as a selector.
Try this.
Select the block
On the options on the right, click advanced.
Type a class name like “blockshadow”
Then use .blockshadow { in your CSS.
-
Thank you for answer.
I tried it, but it doesn’t seem to work I’m afraid.A few years back, when I had a site for my school here at wp.com,
I remember I had the same question and someone gave a snippet that worked on images and videos. (It might have been “thesacredpath”)
BUT, at that point in time, the edit was the classic way.I’m still hoping for a magic wand………..
-
Here’s the CSS support we offer:
https://wordpress.com/support/custom-design/css-support/But for what it’s worth we do have an easier time helping you troubleshoot if:
– the CSS you’re trying to use is added under Customize
– you send a link to the page in question, and tell us which part you’re trying to changeIt may allow us to be more specific in our answers.
-
After trying out your tip from last post, and it didn’t work, I went here
https://wordpress.com/support/adding-additional-css-classes-to-blocks/#adding-an-additional-css-classand followed the steps – which basically was (apart from a “.” ) the same.
What I am looking for is drop shadow to blocks/boxes,
video (shortcode) blocks and image blocks.
Instead of applying to every block of that kind it would be just fine if it’s possible to write it in the additional CSS under Customize.
Perhaps it’s not possible ?https://petitpoisvideos.com/about/
https://petitpoisvideos.com/1580-2/ -
You know what?
After a bit of search I found entry/help I got earlier – much earlier, in 2015!
(I knew thesacredpath was involved)
Is anything here of value to how you do things today?https://wordpress.com/forums/topic/change-color-of-image-frames-1/
-
Ah, these folks were hired :) While the community can provide tips as they like, staff tries not to interfere in CSS that borders on design decisions. We recommend upwork or hiring a designer.
Drop shadows on embedded videos will be tricky, because the (invisible) frame the video fits in isn’t necessarily going to be the same size as the video itself. You’ll end up with weird shadows that are taller than the video:
iframe { box-shadow: 10px 10px; }If you wanted to, though, you could set a background color and what not so it’s less awkward:
.embed-vimeo iframe { background-color: black; border: white 1px solid; box-shadow: 10px 10px; }Images are relatively easy though. Something like this would work for starters.
figure img { box-shadow: 10px 10px; } -
-
-
Hello again
I’ve been trying out your embed-vimeo code. It worked fine.
I did a bit of searching for how I might feather the edges. Some code >I knew before, but another not. Anyway, now I have this written in my CSS:.embed-vimeo iframe {
background-color: #4f4f22;
box-shadow: 4px 4px 4px;
-moz-box-shadow: 8px 4px 3px
-webkit-box-shadow:6px 10px 12pxMaybe one of the box-shadow isn’t necessary, but since the appearance now is fine with me it stays for now.
I actually use the short code box more than the vimeo embed because I can set the ratio of the video there.
Could I start the CSS with
.shortcode { ?
.shortcode embed ?
.shortcode iframe ?Or something completely different?
-
-
To clarify the way iframes work, anything inside the iframe is code that is controlled by Vimeo. It is not possible to customize the CSS of the iframe contents themselves (such as the player that is within the iframe code) and this is true of any iframe embed.
That is why you are able to write CSS to target the containing div
.embed-vimeo iframebut that is as close as you can get. The player window, which is smaller than the iframe div, is not something that can be targeted with CSS -
Yes, I understand.
That’s why I chose the color I did for the background, not having it steal all the attention. I have been looking for a a way to write in CSS to have the shadow all around the block outside, not just bottom and right. Haven’t found it yet.As days go by, I learn more about the block editing.
I’ve set up 3-4 websites before in the past, but in the classic editor and Elementor.
This is something else.Thanks for getting back to me.
-
You could try this instead, which centers the shadow behind the box.
.embed-vimeo iframe {
background-color: #c9c9b3;
box-shadow: 0px 0px 12px;
-moz-box-shadow: 0px 0px 12px;
-webkit-box-shadow: 0px 0px 12px;
}Also please note that you will want to make
-webkit-box-shadow,-moz-box-shadow, andbox-shadowthe same values as I have here. In your original code they are all slightly different from one another, which will mean that different people will see a different shadow style depending on the browser they use.Hope this helps!
-
- The topic ‘Drop shadow on blocks’ is closed to new replies.
WordPress.com Forums 