Drop Cap Effect w/ :first-letter – CSS3 Tutorial

Video

 

1. Place The HTML And Text

We must first place a few lines of text. I’m going to jump over to http://html-ipsum.com and grab three of the long paragraphs and just change the first word of each paragraph so there is a little variety.

Drop Caps - CSS3 Tutorial

2. Write The CSS3

There is a pseudo element in CSS3 called “:first-letter” which allows us to target and style the first letter of the targeted tag. We will start by targeting the first-letter of any <p> tag.
[code type=”css” title=”Code”]p:first-letter {

}[/code]

Drop Caps - CSS3 Tutorial

3. Set Aside First Letter

The very first thing we will do with CSS3 is display our first letter as a block level element which will allow us to really control the width, height, margin, and padding if we like. My code (This will not make much visual difference):
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
}[/code]

Drop Caps - CSS3 Tutorial

Drop Caps - CSS3 Tutorial

4. Set The First Letter Size

Next we want to increase the size of the type based on the size of the surrounding type and by setting a creative line-height we will align the top of our dropped letter with the top of our normal type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
}[/code]

Drop Caps - CSS3 Tutorial

Drop Caps - CSS3 Tutorial

5. Padding

Adding 10px of padding to the left and right of our letter helps pull it away from the rest of the letters a little bit. We like this. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
}[/code]

Drop Caps - CSS3 Tutorial

Drop Caps - CSS3 Tutorial

6. Color!

The finishing touch will be to add a dash of color and maybe even make these letters bold to really set them apart from the body type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
color:#bf253c;
font-weight:bold;
}[/code]

Drop Caps - CSS3 Tutorial

Drop Caps - CSS3 Tutorial

7. Enjoy!

05152013-001
Follow Me On Twitter!

Like Tutvid on Facebook!

More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation

111 Comments

  1. says: Daniel Rodríguez

    Nathaniel I’ve been following you since 2009 in youtube first and then in your website, I have learned a lot of useful things with you. You made me to discover this passion for web design so in this little message Im trying to encourage you to keep up with this project of tutorials, teaching people because in this you have the power of change the world. I just want to thank you againa and again even not being an english native speaker (Im from Colombia) I’ve learn a lot you’re the best, thanks again.

  2. says: Jeremy Jones

    Great tutorial, Nathaniel! Been following your blog for several years, now, and have tried out more than a few of your Photoshop tips. This is the first time I’ve been able to make use of one of your web design tips. I like our website, but I always felt the text was just missing…something. Now it looks MUCH better! Thank you!

  3. Pingback: handmade furniture
  4. Pingback: ultradex review
  5. Pingback: Live draw hongkong
  6. Pingback: Free UK Chat Rooms
  7. Pingback: jobs
  8. Pingback: sabung ayam
  9. Pingback: satta matka
  10. Pingback: Agen Bandarq
  11. Pingback: hartertdo.xyz
  12. Pingback: yandex ankara
  13. Pingback: economics tuition
  14. Pingback: ICQ Chat
  15. Pingback: yandex ankara
  16. Pingback: yandex ankara
  17. Pingback: portland seo
  18. Pingback: de nature jogja
  19. Pingback: read more
  20. Pingback: obat kutil kelamin
  21. Pingback: Kencing Nanah Itu
  22. Pingback: trenbolone 250
  23. Pingback: obat kencing nanah
  24. Pingback: Jual Obat Sipilis
  25. Pingback: legit steroids
  26. Pingback: obat wasir herbal
  27. Pingback: here
  28. Pingback: harga obat
  29. Pingback: obat ambeien
  30. Pingback: cara
  31. Pingback: herbal
  32. Pingback: Obat Kencing Panas
  33. Pingback: obat
  34. Pingback: apa
  35. Pingback: obat virus hpv
  36. Pingback: Obat
  37. Pingback: de nature
  38. Pingback: obat herbal
  39. says: Kate Gross

    Hey, why haven`t I found you earlier? Your pieces of advice saved me, because I didn`t know what to do. Digital image editing is my problem and now you will certainly help me to create eye-popping drawings! I use fixthephoto.com ad lavalu digital photo editing services which always meet my aspirations, as I am a very creative and extraordinary person and hate the work with computer programs and it is better for me to outsource photo editing.

  40. Pingback: keluar
  41. Pingback: pada
  42. Pingback: bokong
  43. Pingback: papua
  44. Pingback: agen
  45. Pingback: kencing
  46. Pingback: labuhanbatu
  47. Pingback: zakar
  48. Pingback: di
  49. Pingback: tanjung
  50. Pingback: pademangan
  51. Pingback: kutil
  52. Pingback: di
  53. Pingback: jati
  54. Pingback: girl
Leave a comment
Leave a comment

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