Design Lunatic

CSS3 Drop Caps

Nowadays, typography is extremely popular in web design. There are many things that fall under the category “typography”, and today, we’ll be exploring one of those things: CSS drop caps. These can add some flair to a site, and can improve readability if used correctly.

HTML

First off, we need some HTML to base our styles on.

<div id="text">
<p>
Ded massa augue non amet dolor urna elementum sit tortor, nec aenean mid tristique elementum? Auctor penatibus cras, elementum vel? Adipiscing! Pulvinar dolor aliquet? Tincidunt nec pid ut, lorem dolor. Nec a, tincidunt vel, integer, vel, turpis cum porttitor scelerisque cras enim? Mus dictumst in nec purus aenean, vel porta, mus placerat, rhoncus magnis ut! Ridiculus, vel montes hac ut, duis montes placerat, tincidunt a quis augue, enim elementum in mid mattis, ac in eu? Tristique pulvinar augue! Eu magnis velit tristique elementum a, a est tortor lacus augue nec, magna elit sed. Scelerisque porttitor nunc augue dapibus placerat, porttitor in scelerisque vel dis, natoque, non nascetur proin, rhoncus et, quis elementum? Odio turpis natoque odio ultrices mid augue! Ac.
</p><p>
Relementum lorem dictumst. Sit nascetur et tortor non, vut a risus. Amet aliquam natoque. Diam, in elementum nisi, non amet, diam natoque rhoncus? Ut porta tincidunt? Porttitor purus ut, dapibus, risus? Tristique nec integer tempor. Mattis mid tincidunt sed, tristique? Nisi, mid tincidunt, diam lacus elit hac. Ut enim parturient et tincidunt sed mus mauris in dignissim in pellentesque! Tincidunt in, porta risus urna tincidunt, sed porttitor risus phasellus cum cras et nunc magnis ultricies phasellus mid, vel adipiscing ac? Egestas scelerisque tortor. Montes purus sociis, auctor. Eu montes! Placerat quis egestas augue, nascetur facilisis? Non phasellus, in massa adipiscing tempor? Pulvinar platea, sed ac egestas tortor, proin rhoncus arcu pellentesque, arcu lacus rhoncus, sagittis augue odio quis arcu.
</p><p>
Odio sed duis! Ultrices in sit augue ultrices facilisis vel vel rhoncus elementum sit aliquet, lacus odio, mus purus, lundium elementum tempor turpis! Phasellus aliquet magnis duis, rhoncus placerat augue sociis, tempor quis! Elementum arcu nisi ut, turpis ac natoque ultricies sed dapibus! Integer odio ut in, cum lectus scelerisque proin natoque nisi aliquet nunc egestas, magna eros proin, lectus sed rhoncus mid scelerisque dis, dapibus porta urna ac nisi pid! Rhoncus facilisis lundium adipiscing urna in, est scelerisque? Lorem diam. Integer nisi, proin integer, lundium porta lacus nec ridiculus vut sociis integer aliquam a vut phasellus cras dis, vut, scelerisque ultrices in pulvinar scelerisque mattis tincidunt. Enim velit eros. Ultricies, scelerisque mid proin mus! Parturient lacus lacus pulvinar.
</p>
</div>

Just the usual lorem ipsum.

CSS

Wonderful, now we’re at the fun part. Before we begin with the meat of this tutorial, we’re going to need some generic styling.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#text {
position: relative;
bottom: 1px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 20px;
width: 600px;
margin: 0 auto;
background: white;
border: 1px solid #CACACA;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;
}

#text p {
margin-top: 20px;
}

Just some generic styling. A centered “text” div with a border and a drop shadow.
Now, lastly, we actually need to create the drop caps. Utilizing CSS3′s “:first-letter” selector, we can style the first letter of whatever we want. In this case, it’s the first letter of every paragraph inside the “text” div.

#text p:first-letter {
float: left;
padding-right: 10px;
line-height: 50px;
font-size: 50px;
}

Yep, drop caps are that simple.