CODEWITHSUNDEEP
htmlcss
prosseek
prosseek

Reputation: 190809

Showing box-shadow conditionally

I show box-shadow with this CSS code.

img {
    box-shadow: 2px 2px 1px #888;
}

enter image description here

I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag, 

<img ... class="noborder">
#noborder
{
    box-shadow: 0px 0px 0px #888;
}

However, I still have the shadow with the `class="noborder">code, what might be wrong?

Upvotes: 0

Views: 802

Answers (3)

jsvk
jsvk

Reputation: 1729

try replacing #noborder with .noborder, you want it to be a class, not an ID.

Additionally, box-shadow: none is a neater alternative to remove the box shadow

Upvotes: 1

bookcasey
bookcasey

Reputation: 40463

Use box-shadow: none to remove the shadow completely.

<div>test</div>
<div class="noborder">test</div>​

div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}

Demo

Upvotes: 0

Kyle
Kyle

Reputation: 67194

Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .

Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.

I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.

.shadow
{
    box-shadow: 2px 2px 2px #888;
}

.noShadow
{
    2px 2px 2px transparent
}​

.noShadow.none
{
     box-shadow: none;
}

​

And here's a jsfiddle demo to show you how it works.

Upvotes: 2

Related Questions