For a project I’m working on, I decided to add a drop shadow to centered link and button elements. Most drop shadow techniques require floating the element, which undermines the item being centered. Here’s how to add a drop shadow (which requires floating) and then center it.
What is this?
This is a tutorial on how to add a CSS-only drop shadow to an element (which requires floating) and then center it.
How Do I Use It?
First, let’s add a drop shadow to a link or button.
Here’s our basic HTML code. To make this work, the only unconventional (and arguably non-semantic) code we need to add is a wrapping span around our element. If you require the cleanest code, you could add this with Javascript.
<p class="center"> <span> <a href="#" class="button">link</a> </span> </p> <p class="center"> <span> <input type="button" value="button" /> </span> </p>
To add a drop shadow, the CSS will look like this:
span {
float: left;
background-color: #CCC;
}
p.buttons input,
p.buttons a {
position: relative;
display: block;
top: -5px;
left: -5px;
}
p.buttons a {
background: #FFF;
border: 1px solid;
padding: 5px;
}
The span tag is our shadow. We float it so it becomes a block level element, and we give it a gray background. Next we make the button or link a block level element. The real trick is adding "position: relative" to the button or link which allows us to offset them. The last code here is just to add some style to the link so it stands out from the drop shadow.
Test this code and you should see something like this (slight variations depending on your browser):
Okay, now we want them centered. Because our items are floated, "text-align: center" and "margin: 0 auto" won’t work. Or will it?
The solution is a combination of things, and of course a hack for IE. What can you do? Here we go:
p.center {
clear: both;
margin: 10px auto;
display: table;
}
*+html p.center {width: 1px;}
* html p.center {width: 1px;}
The first line adds "display: table" to the containing paragraph. This will make Firefox, Safari and all the other browsers we love center the contents, when combined with "margin: 0 auto;" –our usual way of centering block elements in CSS.
The second part of the code is a hack for IE7 and IE6. As IE does not recognize "display: table", the trick is to give the paragraph a width of 1px. IE will center the paragraph, and subsequently the contents. It works! Note: these hacks have to be on separate lines.
Here’s all the code together in a page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Centered drop shadow example</title>
<style type="text/css">
/* Code for centering the containg paragraphs */
p.center {
clear: both;
display: table;
margin: 10px auto;
}
/* IE hacks for centering the containing paragraphs - must be on separate lines / *
+html p.center {width: 1px;}
* html p.center {width: 1px;}
/* Turn the spans in shadows */
p.center span {
background-color: #CCC;
float: left;
}
/* offset the element to have the shadow */
p.center input,
p.center a {
display: block;
left: -5px;
position: relative;
top: -5px;
}
/* some simple styling to make the link stand out */
p.center a {
background: #FFF;
border: 1px solid;
padding: 5px;
}
</style>
</head>
<body>
<p class="center">
<span>
<a href="#" class="button">Home</a>
</span>
</p>
<p class="center">
<span>
<input type="submit" value="Home" />
</span>
</p>
</body>
</html>
Tested on the Mac and PC in Firefox, IE 6 and 7, Opera, Safari, Chrome and Camino.
Licensing
This arc90 experiment is licensed under a BSD license.
Discuss
Feel free to offer feedback over on the blog.