Techie Tip of the Week: Adding drop shadow effects using box-shadow (CSS3)

A few months ago, we talked about how you can use cascading style sheets to add a drop-shadow effect to text by using the CSS property text-shadow.

Today, we’d like to show how you can add a drop-shadow effect to box elements, using the new CSS3 property box-shadow.

For example, suppose you want to have the words Stanford University highlighted in light grey background with a cardinal red drop shadow, here’s the code you would write:

<!DOCTYPE HTML>
<html>
<head>
<title>Stanford University</title>
<style type="text/css">
h1
   {
   -moz-box-shadow: 5px 10px 15px #820000;
   -webkit-box-shadow: 5px 10px 15px #820000;
   box-shadow: 5px 10px 15px #820000;
   background: #eee;
   }
</style>
</head>
<body>
<h1>Stanford University</h1>
</body>
</html>

And here is how it will look (in most browsers — visit http://caniuse.com/#search=box-shadow for details):
Stanford University with a drop-shadow

Tags: , ,

Leave a Reply

You must be logged in to post a comment.