tutorial Archive

Easy CSS Drop Caps

Article
02Jan
6

Adding drop caps to the beginning of a paragraph, as I did with my latest redesign, is actually a pretty simple and straight-forward process. The effect can be achieved with just a couple of lines of CSS making use of two special ‘pseudo-elements’.

This effect should work in most browsers (yes, even Internet Explorer, according to MSDN both ‘elements’ should work in IE5.5+), the only real variation may be which font is displayed for the drop cap, and the way the specific browser interprets ‘em’ font-sizes. Alternatively pixel sizes could be used for the drop cap font, which should allow you to get greater consistency between browsers.

As mentioned we’re going to use two pseudo-elements as outlined in the CSS2 specification, the two ‘elements’ in question are :first-line and :first-letter. If you’re curious and want to know more about these ‘elements’ or the concept of ‘pseudo-elements’ feel free to follow the links and have a read of the specification, its not necessary for the purposes of this brief how-to, but some people are into that sort of thing.

» Continue reading “Easy CSS Drop Caps”

deanjrobinson.com
twitter was not updated. | tumblr was not updated. | lastfm was not updated. |