Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows. I love the appearance of having graphical elements appear to be just a tiny bit off "the page" and casting a slight shadow. Problem is, I don't want to be stuck having to redo every single graphical element to add a drop shadow in PhotoShop. Is there a CSS way I can accomplish a drop shadow?
Until I started doing some research about what's been added in CSS3, the latest version of the cascading style sheets that have done such a good job of improving the appearance of content, I would have said that you could jury-rig something with divs around divs, but it'd never really have that proper "fuzzy" drop-shadow look. And I'd have been wrong.
In fact, there's a very nice new feature added in the latest version of CSS -- and supported only in the latest versions of popular Web browsers -- that lets you add a drop shadow to just about any container on the page, whether it's a graphic or even a text box or other display container.
Depending on how über-compatible you want to be, it can also be something you slap inline on an IMG tag, DIV tag or similar, though making it a separate CSS class or ID allows you the space to have maximum compatibility.
Let's start with the basics. Here's an image:
Not too exciting, but a good test graphic. I've applied no CSS styles at all to the image, and it can definitely improve with a 1-pixel black border:
That's done with the addition of style="border:1px solid black;" to the IMG tag. But what if we want to add a drop shadow too? That's done with another CSS attribute: box-shadow. Its attributes are a bit confusing, though, because they're just a string of values, similar to the border CSS shortcut. Here's what I'll add:
box-shadow: 5px 5px 7px #666
and here's the terrific result:
In order, the values are the horizontal offset of the shadow, the vertical offset of the shadow, the blur or diffusion, and the base color. You can experiment with these values or learn more about other attributes to box-shadow.
What makes this really cool is that you can apply these box drop shadows to any CSS container, so I can use it for a text box:
The style I'm using with the above text box is: style="box-shadow: 5px 5px 10px #999;border:3px solid #060;padding:7px;background:#fee;font-size:125%;"
See what I'm doing there? "#999" is medium grey, "#060" is dark green and #fee" is light red.
If you separate value sequences with a comma, you can also specify more than one drop shadow box at the same time. Here's one result that's delightfully colorful:
In this case, I've added two drop shadows, one yellow, one green, with the same statement by separating the value string with a comma:
style="box-shadow: 15px 15px 10px yellow, -15px -15px 10px #0c0;margin:25px;border:3px solid #060;padding:7px;background:#fee;font-size:125%;"
Notice I've also added a big margin -- 25px all around -- to ensure that there's space allocated for the drop shadow. If you forget that, other content will appear over the shadow, which can be a cool effect but could also adversely affect readability.
That's it for my examples. There are more complex ones on various CSS reference sites.
I hope that helps you see how you can indeed add drop shadows just using CSS.
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....✔ Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...✔ Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....✔ How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...✔ How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+