When was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap makes your paragraph catchy and stylish. First letter drop cap can be achieved in many ways using CSS. Two ways are going to be discussed on this article.
1. Using span tag to style the first letter
.firstletter { display:block; float:left; margin: -0.63em 0.5em 0 -0.56em; height : 4.5em; color:#aaa; } .firstletter span { font-size:200%; line-height:1.0em; } .firstletter + span{ margin-left : -0.5em; }
You might be interested to know about + sign in above CSS code. It is adjacent-sibling selector that was introduced in CSS 2. Adjacent-sibling targets an element directly after another element with the same parent.
How to Use it?
<span class="firstletter"> <span>W</span> </span>hen was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.
You can view Live Demo here.
2. Using pseudo element :first-letter
Most of the sites use span technique for the drop cap first letter. With invent of CSS 2, the :first-letter pseudo-element was introduced for this purpose. It’s easy creating drop caps with :first-letter. Most of the latest browsers supports :first-letter pseudo element.
p:first-letter { font-size:400%; display:block; float:left; margin: 0.06em 0 0; height:3.5em; color:#ccc; }
How to Use it?
When was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.
You can view Live Demo here.
Inside the STYLE tag, we added style for paragraph, and suffix it with the code :first-letter, and whatever declarations that follow will be applied to the first letter of that paragraph.
Some fix might be needed for cross browser compatibility.
7 Comments
Trackbacks
- designgala
- Index Blog
- Rock Web Money!
- designgala
- Digji.com
- 99 Graphic Design Resources- A place for desginers |
Why would you need to have it set to display:block if you are setting it to float:left;?
Yes. display:block is not needed.
thanks Lindsey,
I prefer this one
p:first-letter {}
Yes neat trick! Thanks!
Very good article. I’ve found your blog via Bing and I’m really glad about the information you provide in your posts. Btw your blogs layout is really messed up on the Chrome browser. Would be great if you could fix that. Anyhow keep up the good work!
Thanks Eliz.
I’ll fix chrome issue.
I have a question (awesome blog Btw) can anybody give me some good ideas that I can have printed on some T-shirts I came across a number of blogs including this one with some great ideas. But I’m curious if anybody has some that are original. Also where can I get T-shirts printed for my blog? my friend said to use custom ink, but I came across USA tees.com and want to know if anybody had personal experience with them, thanks.