Line25

How To Create a Stylish Drop Cap Effect with CSS3

Read the full post

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

CSS Drop Cap

The design we’ll be creating features a large drop cap at the start of a block of text. The actual drop cap effect will be created with the :first-letter selector, while the extra effects are added with the help of CSS text-shadow.

View the CSS drop cap demo

The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Drop Shadow</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div>
	<p>You either die a hero or You live long enough to see yourself become the villain.</p>
</div>

</body>
</html>

Every web project begins with the basic HTML structure. For this demo file the HTML page is made up of the usual Doctype and Head elements before the quote is laid out as a basic paragraph element. We’ll be using CSS selectors to create our drop cap so no special IDs or classes are required.

The CSS styling

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: "Chunk", Sans-Serif; color: #fff;
	background: #566074 url(bg.png);
}

@font-face {
	font-family: Chunk;
	src: url("Chunk.ttf") format("truetype");
}

div {
	width: 730px; margin: 150px auto;
}

The CSS demo file begins with a reset to remove any default browser styling, then the main font styling is added to the body. You’ll notice the use of the “Chunk” font; this custom font is being added with the help of @font-face.

p {
	font-size: 50px; line-height: 80px;
	text-transform: uppercase;
	text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}

Now the slab-serif font is in place the size and line-height of the typography can be set. The text-transform property ensures all the text appears in caps despite how it is written in the HTML file, then the text-shadow property is used along with RGBa colour values to add a subtle ghost effect to the text.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}

Now the main text is in place we can finally get around to styling up the drop cap. The first letter is targeted with the handy :first-letter selector, but to avoid having drop caps on every paragraph on our page we also need to use the :first-child selector to target only the first letter of the first paragraph.
Just four CSS declarations are needed to correctly style up the drop cap. First the letter is increased in size so it’s large enough to span across two lines of the paragraph, then it is floated left to allow it to break out of the paragraph’s flow. A touch of margin on the top and right help tweak the drop cap into place and add some space between this first letter and the remainder of the sentence. Everything looks fine in Firefox so far, but if we test it out in WebKit browsers (Safari & Chrome) they both seem to place the drop cap higher than Firefox. We can easily fix this with an extra line-height declaration. This makes no difference to the Firefox version while lining everything up in Safari and Chrome.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;;
	text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}

The basic drop cap is complete, but traditionally drop caps come along in all kinds of fancy styling. We can add some cool effects of our own with the help of the CSS3 text-shadow property. A duplicate of the text is created and offset by 4px, then a second duplicate is created at 7px. When the first duplicate is set to the same colour as the background it creates a cool retro style effect. For more drop cap effects check out my old text-shadow effects post.

The final drop cap effect

CSS Drop Cap

View the CSS drop cap demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

37 Comments

  1. W3Spor says:

    Hello, this is realy nice. thanks a lot :-)

  2. Chris says:

    That's a really nice effect. Never knew about :first-child:first-letter

    Thanks Chris

  3. Fahad Khalid says:

    Nice one.
    But in IE it doesn't look good :(

  4. Kasia says:

    To be honest, I'm new in CSS3, but this tutorial is great! Thank you!

  5. Richy says:

    If your using IE as your browser of choice then you can't really expect to see fancy CSS3 effects.

    We as web designers shouldn't sacrifice using nice CSS3 techniques like this because of it's toned down look in IE.

    You or your clients/user etc not happy with how it looks in IE. Simples – Use another browser

    • John says:

      That's great advice! I work as a web developer in a huge company and our sites are still viewed in I.E 6 by 38% of our users.

      However, tomorrow I will go and see the chairman and say Richy from Cardiff who has designed 5 websites said "We as web designers shouldn’t sacrifice using nice CSS3 techniques like this because of it’s toned down look in IE. Simples – use another browser".

      It really is tiresome reading how the hipsters say we should just drop support for I.E. because it doesn't fully support certain features.
      Skilled and experienced designers/developers find a solution around I.E issues instead of being lazy and saying we should just drop I.E.

      • Paul Bennett says:

        Or just build for your audience… An IE6 userbase of 38% suggests you are working on something for internal corporate or government use – these kind a projects rarely call for fancy CSS3 effects.

        Generally speaking we can afford to drop support for effects like this in IE6 these days. If the client demands them they have to be aware of the extra cost for development time.

        I don't think Richy is saying tell your userbase to use something other than IE (I'm sure if they could they would) – rather that on the whole we should be aiming to use these new techniques where possible.

      • If the effect looks great on other browsers and degrades nicely on Internet Explorer, what's the problem?

        • anon says:

          It doesn't degrade nicely on IE though, it looks awful.

          This tutorial is sloppy & should offer some IE workaround or alternative for completeness.

  6. karl says:

    Wow, that's a pretty neat effect! And with only CSS! I'll try this in one of my projects some time. Thanks for sharing!

  7. Pothi says:

    Nice trick with CSS3 and thanks for introducing 'Chunk' font to me. :)

  8. X Studios says:

    A great and efficient way to get a cool drop shadow, thanks!

  9. Logo Blog says:

    Nice list, thanks for sharing this tutorial., it would gonna help me to get more nice effects!

  10. I discovered it again extremely appealing to help you read I would love to find out you will compose a lot more at this theme. I really I am fell towards your RSS feed now hence I’ll check in a lot more often!

  11. Eliazer says:

    Love the final product Chris, keep it up!

  12. Jacqi says:

    Nice effect!

    I love the Batman reference :D

  13. lxn says:

    Useful trick! Great!

  14. Stefano says:

    A very good tip!

  15. Stunning will def be using this in some of our new designs, thanks for sharing!

  16. Felipe says:

    If the first paragraph isn't the first element of its parent (say if there's a heading or hgroup), there won't be any drop cap.

    p:first-of-type:first-letter would be a better selector though it won't work in IE7-8 :(

  17. very good design chris. Love the drop cap and shadow. Great use of css3!

  18. That's really cool! I will have to try this out on some of my css3 websites. I have a question though, is the p:first-letter selector valid with regular css? or just css3?

  19. smarttv says:

    Thanks for advice.

  20. Amit Mathur says:

    Very nice tutorial.Thanks for the post.

  21. Jenny says:

    thats frickin awesome :D

  22. Manav Dhiman says:

    I can't seem to achieve this effect Idk why. Instead of Chunk, I can only see Times New Roman. But on the other hand when I click on the given file that Chris made it appears perfectly fine.

    Can someone tell me what am I doing wrong here?

  23. Nice way to do…..I will try

  24. Web Designer says:

    Awesome stuff Chris.
    Keep up the good work mate.

  25. ISSB says:

    Nicely Done, I'll be doing the same with my blog headings, awesome work

  26. Aleena says:

    Betty loves participating in internet research and it’s easy to understand why. Most people notice all about the compelling means you make practical guides via the website and in addition invigorate response from other individuals on that point so my girl is without question being taught so much. Have fun with the remaining portion of the New Year. You are always conducting a wonderful job.
    http://goo.gl/n3Gh9

  27. Reuben says:

    Nice tutorial, we don't see drops cap being used too much – nice to see it making a come back.

Comments are now closed