Remove CSS shadows from images?
-
Hi there! I do like the nice dropshadows that are automatically placed on all the images that are used on a page. However, most of my images are transparent PNG files that are not a perfect square or rectangle so the dropshadows look super tacky. Can you tell me exactly where to go in the CSS to remove the dropshadow elements in the Primero theme?
I want the dropshadow gone for the image and when I go to hover over the image with my mouse.
Thanks so much!
Here's a link to a screenshot: https://dl.dropbox.com/u/2975422/SHARING FOLDER/Screenshots/Capture Selection-20120712-100637-1.png
The images on the right look good b/c I framed the images in a perfect rectangular border. I wish the dropshadow worked on transparent images instead of filling int the transparent space with white (see the fake searchbar image on the left, and the pdf image below it) -
style.css under heading of "04. PRIMARY STYLES":
#main img, .portfolio-single iframe, #slider, #slider-2, .blog-featured-image iframe { -moz-box-shadow: 0 1px 12px #aaa; -webkit-box-shadow: 0 1px 12px #aaa; box-shadow: 0 1px 12px #aaa; -webkit-transition-duration: 300ms; -webkit-transition-property: shadow; -webkit-transition-timing-function: ease; -moz-transition-duration: 300ms; -moz-transition-property: shadow; -moz-transition-timing-function: ease; -o-transition-duration: 300ms; -o-transition-property: shadow; -o-transition-timing-function: ease;}
#main a:hover img {-moz-box-shadow: 0 1px 12px #888; -webkit-box-shadow: 0 1px 12px #888; box-shadow: 0 1px 12px #888;}
Just pull the img portion from the first and then delete the second line of code for hover. -
Mike... you are totally awesome! Thanks for the speedy response.
Before I got your response I kept messing with things and deleted the following (a little more than you... is that bad?) and it seemed to work:#main img, .portfolio-single iframe, #slider, #slider-2, .blog-featured-image iframe { -moz-box-shadow: 0 1px 12px #aaa; -webkit-box-shadow: 0 1px 12px #aaa; box-shadow: 0 1px 12px #aaa; -webkit-transition-duration: 300ms; -webkit-transition-property: shadow; -webkit-transition-timing-function: ease; -moz-transition-duration: 300ms; -moz-transition-property: shadow; -moz-transition-timing-function: ease; -o-transition-duration: 300ms; -o-transition-property: shadow; -o-transition-timing-function: ease;}
#main a:hover img {-moz-box-shadow: 0 1px 12px #888; -webkit-box-shadow: 0 1px 12px #888; box-shadow: 0 1px 12px #888;}
.noborder, .noborder a:hover, .portfolio-single .social-networking-portfolio iframe, #slider iframe, #slider img, #slider a:hover img {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
That is what I deleted and it worked.
So here's the real deal... I love the dropshadows AND esp the hover dropshadow. Is there any way to keep these dropshadows and have them "fit" to an obscurely shaped image that has transparency?? That would be the ideal situation. Because then it gives the icons, and in some cases "buttons" more life so they stand out a little bit.
Does my question make sense? any way to do it?
Powered by Vanilla.