Dropshadow on Text Using Absolute Positioning

Here’s a quick bit of CSS and HTML to achieve a simple dropshadow on text that uses abosolute positioning. This would work great for titles in WordPress. You can adjust the top and left positioning of the .bottom class depending on the offset of dropshadow you want.

Here’s My Test

Here’s My Test

Here’s the CSS for the output above: 

 <style type="text/css">
.box {
position:relative;
background-color:#666;
height:75px;
width:400px;
overflow:hidden;
padding:10px;
}
.box h1 {
font-size:36px;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
}
.top {
color:#FFF;
position:absolute;
z-index:1;
}
.bottom {
position:absolute;
color:#333;
top:11px;
left:11px;
}
</style>

Here’s the HTML for the output above: 

 <div class="box">
<div class="top"><h1>Here's My Test</h1></div>
<div class="bottom"><h1>Here's My Test</h1></div>
</div>

Hopefully you’ve found this quick tutorial valuable. Contact me if you have any questions or would do it a different way. There’s 1,001 ways to do everything – that’s why I love coding.

Share and Enjoy:
  • Print
  • Digg
  • Facebook
  • Sphinn
  • Google Bookmarks
  • del.icio.us
  • Mixx
  • StumbleUpon
  • email

Posted on July 8, 2009 in CSS Tricks and has been tagged as .

Feedback for "Dropshadow on Text Using Absolute Positioning"

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment


»

Categories

Services I Offer

About Me

Andy Weigel

My name is Andy Weigel and I'm a web developer and designer in Pittsburgh, PA.

I focus on combining design with technology to build compelling, creative, easy-to-navigate web sites and custom web applications for organizations and businesses of all shapes and sizes. My specialty is WordPress. And most of all, I love what I do!

On Twitter