Quick Tip: Easy Way To Create Drop Caps On Your Website

A drop cap is when the first letter of a paragraph is larger than the average font size and that letter ‘drops’ down 2 (or more) lines. You can actually see this example which is given below right here in this image.


And simply add the following code:

[code lang="css"]
span.dropcaps {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;

Add The Span

[code lang=”htmlstrict”]
Finally we are done. we created a Create Drop Caps effect.View Example

Leave a Reply

Your email address will not be published. Required fields are marked *