Comments on: Nice Drop caps with CSS

By: Hats

Hats — Thu, 21 Aug 2008 09:23:41 +0000

Hello! I liked your blog and benefited from your posts. I’ll be very interested in your further posts. Thanks.

By: Jackson

Jackson — Fri, 13 Jun 2008 20:06:36 +0000

I’ve noticed something strange happening when I try to implement text-only drop caps using the :first-letter pseudo-element and was wondering if anyone could verify. It seems that if I don’t make adjustments to margin and padding, it lines up perfectly in Safari for Mac, but in Firefox for Mac (versions 2 and 3RC) the vertical alignment is messy. If I adjust for Firefox, Safari is misaligned. I don’t have a PC to test in IE; does anyone know how the vertical alignment works in IE?

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

Tue, 06 May 2008 08:13:10 +0000

[...] Nice Drop caps with CSS- Using the :first-letter pseudo-element, you crapper easily create pleasant modify caps with CSS. No player HTML or Javascript required and IE5+ application support. [...]

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

Tue, 06 May 2008 08:13:10 +0000

By: Utiliza CSS para crear letras capitales

Utiliza CSS para crear letras capitales — Thu, 24 Apr 2008 16:48:12 +0000

[...] cómo se hace utilizando CSS te recomiendo que leas en Onyx Design su pequeño tutorial práctico Nice Drop Caps With CSS en donde encontrarás el código y un demo para que puedas visualizar el resultado [...]

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Using CSS to Do Anything: 50+ Creative Examples and Tutorials — Mon, 21 Apr 2008 22:36:12 +0000

[...] Nice Drop caps with CSS- Using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. No extra HTML or Javascript required and IE5+ browser support. [...]

By: Fabian

Fabian — Wed, 09 Apr 2008 06:54:38 +0000

You’re welcome!

By: Jennifer

Jennifer — Tue, 08 Apr 2008 17:04:28 +0000

Fabian,

Thank you for the clarification and links. According to those resources, this rule is true of :first-line as well. Life is now full of possibilities.

By: Fabian

Fabian — Tue, 08 Apr 2008 14:51:09 +0000

@Edwin, thanks!

@Jennifer, I know the reason that it doesn’t work in IE6 sometimes. If you don’t add the space between the selector and the brackets, it won’t work in IE6.
This doesn’t work in IE6:
#ex9 p.doit:first-letter{font-style:italic}

This code does IE6:
#ex9 p.doit:first-letter {font-style:italic}

See:
http://www.satzansatz.de/cssd/pseudocss.html#first-letter and
http://www.webmasterworld.com/css/3123400.htm

By: Edwin

Edwin — Tue, 08 Apr 2008 14:17:29 +0000

@fabian: this morning I red your article and liked it very well and now in combination with this trick it comes fully to it’s right. I think this is a perfect practice of the technique. So to both of you: thanks