How To Create a Stylish Drop Cap Effect with CSS3
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.
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.
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
Thank you , I was looking for adding Shadow by CSS, its working Thank you
Wonderful.., I am new to this but now i will try to put this to my site. Tutorial was amazing and learned a lot.
Nice tutorial, we don't see drops cap being used too much – nice to see it making a come back.
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
Nicely Done, I'll be doing the same with my blog headings, awesome work
Awesome stuff Chris.
Keep up the good work mate.
Nice way to do…..I will try
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?
thats frickin awesome :D
Very nice tutorial.Thanks for the post.
Thanks for advice.
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?
very good design chris. Love the drop cap and shadow. Great use of css3!
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 :(
Stunning will def be using this in some of our new designs, thanks for sharing!
A very good tip!
Useful trick! Great!
Nice effect!
I love the Batman reference :D
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!
Nice list, thanks for sharing this tutorial., it would gonna help me to get more nice effects!
Love the final product Chris, keep it up!
A great and efficient way to get a cool drop shadow, thanks!
Hello, this is realy nice. thanks a lot :-)
Nice trick with CSS3 and thanks for introducing 'Chunk' font to me. :)
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!
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
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.
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?
It doesn't degrade nicely on IE though, it looks awful.
This tutorial is sloppy & should offer some IE workaround or alternative for completeness.
To be honest, I'm new in CSS3, but this tutorial is great! Thank you!
Nice one.
But in IE it doesn't look good :(
dgdd
That's a really nice effect. Never knew about :first-child:first-letter
Thanks Chris