2004.06.28
How To: CSS Text Shadows
Art through imitation. I was checking out wirelesspirate.net and noticed they were using dropshadows for their text. I checked out their code and saw they were creating the shadows with CSS. After a bit of expropriation and manipulation I’ve got it running here.
The HTML looks like this:
<div class="date"><div class="shade">blosxom date code
<div class="shadow">blosxom date code</div></div></div>
and the CSS looks like this:
.date {
font-size: 18px;
font-weight: bold;
letter-spacing: 0.65em;
padding: 10px 0px;
}
.shade {
position: relative;
top: 0;
left: 0;
z-index: 2;
color: #808080;
margin: 0;
}
.shadow {
position: relative;
top: -1.15em;
right: 2px;
color: #000000;
z-index: 1;
margin: 0 0 -35px 0;
}
and that’s it. At some point in the near future I plan on checking to see if this will work with floating boxes to create dropshadows for DIVs with borders. It should. Now go have fun.
UPDATE 2006.09.30: I used to use this in the titles of my articles but no longer! It’s still a nifty trick.
Categorized: geek technology
You can follow any responses to this entry with a RSS 2.0 feed. You can leave a response, or trackback from your own site.
5 Responses to “How To: CSS Text Shadows”
- odd says (January 1st, 1970 at 08:00:00 )
some other CSS drop shadow links
A List Apart recently did some stories on using CSS to make dropshadows. You can read those here, here and here. I haven’t tried playing around with drop shadows yet, but may give it a try sometime in the future.- dugh says (January 1st, 1970 at 08:00:00 )
i’ve seen those before. my gripe with them is they require images for the offset and border. it just seems to me that a hard edged dropshadow should be possible if a div position can be set off within another div. it’s something i’m still looking into. for example i have no idea what the z-index does, or how a position: relative affects a containing position: relative. these are things i plan on looking up!
- Sean says (January 1st, 1970 at 08:00:00 )
I feel the drop shadow is too severe for the “SPOOKEE.COM” header. It looks nice on the dates, though. However, I think if you took the gray a little lighter and moved the shadow in “closer” to the actual text (Right now it looks like the shadow is afraid to touch the main text. Cooties issue?), the header would look fine, too.
- dugh says (January 1st, 1970 at 08:00:00 )
how does it look now? i lightened the shadow and tweaked the title/header… maybe it’s too much?
- Sean says (January 1st, 1970 at 08:00:00 )
Much better; but I still think maybe the effect would be cleaner and more subtle if the shadows were completely contacting the text as with the dates. Overall though, I like the effect.
Now, about the aqua border around the box I’m typing in right now…perhaps a shift to a dull green with a gold undertone? Nothing wrong with the aqua, BTW, I just don’t so much like blue-flavoured colours.
