Example 1: span letter float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

HTML for example 1

<span class="drop">L</span>orem ipsum dolor sit amet...</p>

CSS for example 1

.drop {
	float:left;
	color:#D4D4C7;
	font-size:80px;
	line-height:70px;
	padding-top:2px;
	font-family: Times, serif, Georgia;
	}

Images for example 1

No images used.

Example 2: span image replacement

From www.jasonsantamaria.com's October 2006 theme, Jason used an image replacement technique for creating an elegant drop cap.

The candy bowl is full and we’ll be decorating our house this weekend. Horror films are usually playing at night, and The Misfits remain in heavy rotation. What’s that mean? Well, I guess it means we are horror nerds. But it also means it’s nearly Halloween! As always, here are your yearly batch of seasonal tricks and treats.

HTML for Jason Santa Maria's October 2006 example

<p><span class="drop t">T</span>he candy bowl is full and...</p>

Note that he uses two classes for the span - one for 'drop' and one for 't'. Separating the drop cap style into two classes allows him to use one class to do all the styling, while using another class the appropriate image fo the letter to be represented. (see css below).

CSS for Jason Santa Maria's October 2006 example

.drop {
	display: block;
	float: left;
	margin: 5px 0 0 0;
	padding: 0 3px 0;
	width: 50px;
	height: 50px;
	text-indent: -9000px;
	border: none;
	}
.t {
	background: transparent url(images/t.gif) 0 0 no-repeat;
	}

Note that width and height of the span are set to the same dimensions of the image used. Also, the text-indent attribute is set to -9000px so that the actual letter doesn't show on the screen for browsers with css enabled.

Images for this example

Note that an image has to be made to represent every letter.

Example 3: span letter float + background image

Reference: http://www.risky-biz.com/testimonials.html example

From the moment we announced our intentions to get married, our family and friends began anticipating what they believed would be the wedding of the century. Today with memories of that night still in their minds everyone is talking about the best wedding they ever attended. We take great pride and joy in knowing that we did not disappoint, our wedding turned out to be all that we expected and more. A major reason for our great success was the music of Risky Business. From the A-Cappella to the rock & roll, they satisfied everyone's musical tastes. You guys did a great job and everyone loved you.

I think the idea behind this one is a noble one, though the end result isn't quite as elegant as Jason's Image replacement example.

The good: If you highlight the paragraph, the drop cap highlights with it, allowing you to copy and paste content without losing the first letter. Also, when text on the page is increased, the drop cap, and background image of the drop cap, expands, too. It's a nice way to add some imagery to the drop cap without having to create an image for every letter.

The bad: It's obviously not as elegant as the image used in Jason Santa Maria's example, nor, some could argue, as elegant as just using a regular drop cap with no background image. Also, the drop cap looks fine in IE, but suffers from some a minor positioning offset in Firefox. Ideally, it'd be identically positioned in both IE and Firefox.

HTML for example 3

<p><span class="cap">F</span>rom the moment we announced...</p>

CSS for example 3

.cap {
	float: left;
	width: 1.5ex;
	font-size: 395%;
	line-height: 1.6ex;
	font-weight: bold;
	color:#D70000;
	font-family: serif;
	font-style : normal;
	background-image : url(images/bkgnd_noise.jpg);
	padding : 2px;
	text-align : center;
	border: 1px solid yellow;
	margin-right : 2px;
}

Images used in example 3

Example 4: using :first-letter

Supported by Firefox

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.

The idea here is to not use a <span> tag at all, but instead let css grab the first letter of the paragraph and manipulate it automatically.

HTML for example 4

<p class="drop">But, in a larger sense, we...</p>

CSS for example 4

p.drop:first-letter {
	font:normal 56px/56px Georgia;
	margin-top:-8px;
	margin-bottom:-8px;
	float:left;
	}