Oncemade » Typography

CSS Tip: Drop Caps

Rodrigo — Sun, 14 Dec 2008 06:19:58 +0000

Drop caps are usually used in desktop publishing, the first letter of a paragraph is enlarged to drop down 2 or more lines. Update: To make it work in IE6, the first letter needs to be wrapped in a span. IE6 Example

Markup

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

CSS
.drop:first-letter { 
    font-size: 4.2em;
    float: left;
    line-height: 0.6em;
    margin: 0.13em 0.13em 0.13em 0;
}

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Browser Support

Firefox
Safari
Chrome
Opera
Internet Explore 7

Yes We Can… Design

Rodrigo — Tue, 04 Nov 2008 05:35:11 +0000

The election is here and it's amazing how many designers have put their thoughts and hearts to express themselves. Here are few designs that I've stumbled through out the Obama's campaign.

Vote!

Creativeness – Typography from around the web

Rodrigo — Sun, 12 Oct 2008 16:08:02 +0000

Series of typography design from around the web.

Oncemade » Typography

CSS Tip: Drop Caps

Markup

CSS

Example

Browser Support

Yes We Can… Design

Collage

Illustration

Typography

Vote!

Creativeness – Typography from around the web