Magazine style drop cap first letter with CSS

Drop cap first letterWhen 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
  2. Using pseudo element :first-letter

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.

19 Comments Magazine style drop cap first letter with CSS

  1. Pingback: Design Gala

  2. Pingback: Design Gala

  3. Pingback: Index Blog

  4. Pingback: Rock Web Money!

  5. Pingback: Design Gala

  6. Pingback: Digji.com

  7. Pingback: 99 Graphic Design Resources- A place for desginers |

  8. Eliz Mercik

    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!

    Reply
  9. silk screen printers

    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.

    Reply
  10. David Chapman

    “Some fix might be needed for cross browser compatibility.”

    Indeed. Unfortunately, there doesn’t seem to be any fix that actually works! So far as I can tell, there is no way of getting reliable cross-browser drop cap styling short of javascript.

    Reply
  11. Pingback: Ryvon Designs

  12. Pingback: Shiva

  13. Ntibitangira

    I happy to see that possibility to style the first letter. But can you tell me how to style a number like 10, 15, 20, 234,…. as the first letter. The exemple is in the beginning of Bible texts

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>