Archived topic
Remove shadow
7 replies · Started by Sebastian on December 16, 2021
Hello,
I have defined via the Customizer that all images in blog posts automatically get a shadow.
Now I have a post: https://www.haustierlino.de/kaninchen-stirbt
Here I have inserted icons of bunnies that should not have a shadow.
I would like to remove the shadow via the additional CSS class in gutenberg. What is the code that I have to store so that the shadow is not displayed?
Thanks a lot :)
Hi there,
I would like to remove the shadow via the additional CSS class in gutenberg. What is the code that I have to store so that the shadow is not displayed?
The CSS should be modified to apply on a specific type of image on the page. :)
Do you have a specific preference here you want the image shadow to be applied specifically?
If you only want the shadow to apply on the featured image, you should modify the selector of this custom CSS on your site:
.type-post img {
-webkit-box-shadow: 4px 3px 9px 0 rgb(50 50 50 / 75%);
-moz-box-shadow: 4px 3px 9px 0 rgba(50,50,50,.75);
box-shadow: 4px 3px 9px rgb(50 50 50 / 75%);
}
to this:
.type-post .featured-image img {
-webkit-box-shadow: 4px 3px 9px 0 rgb(50 50 50 / 75%);
-moz-box-shadow: 4px 3px 9px 0 rgba(50,50,50,.75);
box-shadow: 4px 3px 9px rgb(50 50 50 / 75%);
}
No, I basically want all images with a shadow. But for individual images I want to specify that no shadow is inserted. For example with transparent icons.
Is there not the possibility that I create a command and then remove the shadow via the additional css class for the block?
like this: .no shawow {
no shadow !important
}
Then I can enter the command "no shadow" via the css class and the shadow will be removed.
Translated with http://www.DeepL.com/Translator (free version)
Ah I see,
You can try this:
.type-post *:not(.no-shadow) img {
-webkit-box-shadow: 4px 3px 9px 0 rgb(50 50 50 / 75%);
-moz-box-shadow: 4px 3px 9px 0 rgba(50,50,50,.75);
box-shadow: 4px 3px 9px rgb(50 50 50 / 75%);
}
And then add no-shadow to the images that you'd want to not have shadow. :D
Sorry, does not work...
Tried it for first picture "Phase 1: Appetitlosigkeit"
Try this one instead:
.type-post img:not(.no-shadow *) {
-webkit-box-shadow: 4px 3px 9px 0 rgb(50 50 50 / 75%);
-moz-box-shadow: 4px 3px 9px 0 rgba(50,50,50,.75);
box-shadow: 4px 3px 9px rgb(50 50 50 / 75%);
}
Great, that worked :)
Thanks!
No problem. :D