Skip to content

Instantly share code, notes, and snippets.

@lbngoc

lbngoc/dropcap-crossbrowser.css

Last active August 25, 2016 02:27
Show Gist options
  • Save lbngoc/2c95174ebda94516fc326bc15a0eafc1 to your computer and use it in GitHub Desktop.
Save lbngoc/2c95174ebda94516fc326bc15a0eafc1 to your computer and use it in GitHub Desktop.
Download ZIP
Drop Caps
Raw
dropcap-crossbrowser.css
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Raw
dropcap-crossbrowser.html
<p>
<span class="firstcharacter">L</span> orem 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>
Raw
dropcap-css3.css
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Raw
dropcap-css3.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment