XHTML & CSS Text Drop Shadows

Dec

Submitted by admin on Sat, 12/05/2009 - 23:23

Overview:

Working a lot with Drupal and Magento, I figured out a cool way to have drop shadows on system generated text without having to use GD or ImageMagick to create text images, which can be less SEO friendly and more resource intensive.
Edit: Also, the CSS3 property for text shadows isn't very cross browser compatible at this point.

Using simple XHTML and CSS, it is easy to make a cool drop shadow on any text you want. It does look better on larger text.

Example:

Test Shadow

Wrap Shadow

Link Shadow

The Code:

<!--
============================================== 
Just structure your markup in a like 
manner and everything should work fine.
============================================== 
The class names should explain how each
div works.
==============================================
BROWSER VERSION(S) TESTED IN:
**********************************************
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.13) 
Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
**********************************************
-->
<html>
<head>
<style type="text/css">
   <!--

/*

=======================================================
You should be able to look thru the CSS and see what
everything does pretty easily. Note the negative margin
when making Internet Explorer conditional stylesheets.
Also note that opacity might not play well with certain
browsers. It could be worse I suppose.
=======================================================
BROWSER VERSION(S) TESTED IN:
**********************************************
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.13) 
Gecko/2009080315 Ubuntu/9.04 (jaunty) Firefox/3.0.13
**********************************************
*/

/* General Stuff */

.topText {
	z-index: 3;
	color: green;
}
   
.shadowText {
	z-index: 1;
	color: black;
	margin: -22px 0 0 1px;
	opacity: .50;
}

.topText a {
	text-decoration:underline
}

.topText a:hover {
	text-decoration: none;
} 

.textContainer {
   width: 150px;
   height: 25px;
}

.topText, .shadowText {
	width: 149px; /* .textContainer width - x-axis drop shadow offset */
	height: 23px; /* .textContainer height - y-axis dropshadow offset */
	position: relative;
	font-size: 18px;
	font-weight: bold;
	font-family: Helvetica;
 }

/* .large Stuff */

.topText.large, .shadowText.large {
	width: 249px; /* .textContainer.large width - x-axis drop shadow offset */
	height: 43px; /* .textContainer.large height - y-axis dropshadow offset */
	font-size: 36px;
}

.topText.large {
	color: blue;
}

.shadowText.large {
	margin: -42px 0 0 1px; /* different margin for different .textContainer height */
}

.textContainer.large {
   width: 250px;
   height: 45px;
}

/* .wrap Stuff */

 .topText.wrap, .shadowText.wrap {
	font-size: 36px;
	line-height: 35px;
}

.topText.wrap {
	color: red;
}

.textContainer.wrap {
   width: 150px;
   height:85px;
}
-->
</style>
</head>
<body>
<div class="textContainer">
	<div class="topText">
		Test Shadow
	</div>
	<div class="shadowText">
		Test Shadow
	</div>
</div>

<br /><br />

<div class="textContainer large">
	<div class="topText large">
		Test Shadow
	</div>
	<div class="shadowText large">
		Test Shadow
	</div>
</div>

<br /><br />

<div class="textContainer wrap">
	<div class="topText wrap">
		Wrap Shadow
	</div>
	<div class="shadowText wrap">
		Wrap Shadow
	</div>
</div>

<br /><br />

<div class="textContainer">
	<div class="topText link">
		<a href="http://google.com/">Link Shadow</a>
	</div>
	<div class="shadowText">
		Link Shadow
	</div>
</div>
</body>
</html>

Download:

Download the CSS and HTML files in a few different formats:

Compressed:
.tar.gz | .zip

Decompressed:
markup.html | style.css | markup_styles_inline.html

admin's blog
Login or register to post comments

XHTML & CSS Text Drop Shadows

Overview:

Example:

The Code:

Download:

Random Stuff