CSS drop-caps: Really do work!

I recently read two interesting articles about drop caps in CSS. Brilliant, it actually works on IE and FF (except IE 6.0!). See the articles bookmarked in the resources section for other cool selectors, like p:first-child:first-line

The HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia.
Fusce eu purus eget diam vehicula auctor nec eu elit.
Morbi consequat facilisis orci vel malesuada.
Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim.
Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien.
Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

The CSS

<style>
body{background-color:#333; color: #fff}
p{font-family: Rockwell Condensed; font-size:32px}
p:first-child:first-letter
{ float: left; color: #fc0; font-size: 90px;
 line-height: 40px; padding-top: 4px;
padding-right: 5px; padding-left: 3px;  }
</style>

The Result

The Result

The Result

Resources

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s