Have you ever wanted to add a drop shadow around an element, but didn’t want to mess around with extra background images just to pull off such a simple effect? Why not use a cutting edge CSS3 effect, which won’t work in Internet Explorer of course, but who cares…
I found this useful snippet, and thought it might be of interest.
-moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666;
The firs line adds the shadow in Mozilla browsers (e.g. Firefox), the second adds it in WebKit browsers such as Safari and Chrome, and the final one is for any browsers that already support the draft box-shadow property, such as Firefox 3.1+ and Safari 3+.
The first two attributes of each of the properties are the horizontal and vertical offsets for the shadow, the third is the blur radius, and the final one sets the color of the drop shadow.
Pingback: links for 2010-06-10 « My Weblog
Pingback: Matthew Moore Design » CSS3: Making Things Pretty With No Images