Comments on: Easy CSS Drop Caps

By: austin web designer

austin web designer — Wed, 10 Feb 2010 22:20:53 +0000

thanks for the tutorial, with this now I know a new trick with css. Thanks

By: staypuftman

staypuftman — Sat, 17 Jan 2009 00:24:50 +0000

I find that I get radically different drop-caps results on this very page between safari 3.2, firefox 3 and IE7. In safari, they are 2-3X as big as they are in firefox. In IE7, they are again huge and set 1-2 lines below where they should be. Each browser is seeing its own thing, much like they do with forms.

I dont know how you can call this an effective implementation. I’ve had the exact same problems with my drop caps and it has prevented me from using them. Have you tested this implementation?

By: dean.j.robinson

dean.j.robinson — Fri, 02 Jan 2009 12:27:21 +0000

That’s done with the :first-line style (last step above), for example the whole excerpt paragraph might have a font size of “1em”, and then you give the p:first-line style a font size of something like “1.3em”, which will make it larger than the rest of the text in the paragraph - giving you two text styles in a single excerpt. Hope that makes sense.

By: Neil

Neil — Fri, 02 Jan 2009 11:48:45 +0000

:first-line and :first-letter are handy, but I sometimes wonder why there isn’t :first-word as well?

By: Ben Jacob

Ben Jacob — Fri, 02 Jan 2009 11:46:07 +0000

EDIT: Sorry not title, but excerpt.. you made two text style in single post excerpt.

By: Ben Jacob

Ben Jacob — Fri, 02 Jan 2009 11:43:28 +0000

Nice, But How to do drop cap can be found in some other web sources too.. but can you say how you managed to change the size of the title in your blog post with WordPress ?

“…actually a pretty simple and straight-forward process…” It is small in size where as, “…as I did with my latest redesign, is …” has a large text size.. can you say that trick ?