Add the shadow on blogger images in just some photos - html

Question

by default, Blogger's Simple Template comes with a box/shadow around images. You can see them around images in any Blogger blog that hasn't edit it, like this one:
http://conalmadefiesta.blogspot.com.es/
I found a code to completely remove it:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
And also I have found a code to remove it only in some images. Adding the class noborder on the html of every post with an image, and this in the css:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
I want to do JUST the opposite: find a code that doesn't show the shadow by default but that it does when I try add a class (let's say: border) to the image.
Any ideas on how can I do this?
Thanks!

Answer 1

You got it yet! You've got the code to remove the shadows, so thinking a little you can make the opposite (I'm using :not() pseudoselector in CSS):
/* remove all boxshadows except tags with "border" classname */
.post-body img:not(.border), .post-body .tr-caption-container:not(.border), .Profile img:not(.border), .Image img:not(.border),
.BlogList .item-thumbnail img:not(.border) {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
So if you need to put a box shadow in some img you can add border class:
<img src="img.png" class="border">
It works!
See more information about :not() selector:
https://developer.mozilla.org/es/docs/Web/CSS/%3Anot

Answer 2

you should like this -
.post-body img.noborder , .Profile img.noborder , .Image img.noborder , .BlogList .item-thumbnail img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
or you can use !important-
img.noborder {
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
}

Answer 3

Maybe you just need to create an other class called .border with:
.border {
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
And then add this class to images that you want with shadows.
In this case, you should ignore this:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
And leave:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Here, the images will not have shadows except for those with .border