Stylish Drop Cap Effect with CSS

Drop caps have been around for years in the print industry, but they are still pretty rare on the web.

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="dropcap">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: 'Yanone Kaffeesatz';
    color: #fff;
}
body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjNDAzYzNmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMxZTI5MmQiPjwvcGF0aD4KPC9zdmc+");
}

.dropcap {
    width: 600px;
    margin: 30px auto;
}

p {
    font-size: 40px;
    line-height: 40px;
    text-shadow: 3px 3px 0 rgba(255,255,255,0.07);
}
p:first-child:first-letter {
    font-size: 60px;
    float: left;
    margin: 0 4px 0 0;
    line-height: 0.8;
    border: 1px rgba(255,255,255,0.07) solid;
    padding: 6px;
}