Movatterモバイル変換

[0]ホーム
URL:

Skip to main content
CSS-Tricks
Search
Snippets →CSS →Drop Caps

Drop Caps

Chris Coyier onUpdated on

The Accessible Way

Your best bet is towatch Ethan’s 5-minute video and then reference this:

The cross-browser way (extra markup)

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<p>  <span>L</span>  orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
.firstcharacter {  color: #903;  float: left;  font-family: Georgia;  font-size: 75px;  line-height: 60px;  padding-top: 4px;  padding-right: 8px;  padding-left: 3px;}

The CSS3 way (no extra markup)

Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.

<p>  Just a normal sentence.</p>
p:first-child:first-letter {  color: #903;  float: left;  font-family: Georgia;  font-size: 75px;  line-height: 60px;  padding-top: 4px;  padding-right: 8px;  padding-left: 3px;}

Theinitial-letter way

Using initial letter to create a drop cap

The browser support forinitial-letter is pretty sparse at the time of this writing, but it can be used to calculate the number of lines the drop capped letter should occupy and the font size instead of doing that on your own.

p:first-child:first-letter {  color: #903;   font-family: Georgia;  initial-letter: 2;}

Browser Support

This browser support data is fromCaniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
145NoNo142TP*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
142No14226.1*
Psst! Create a DigitalOcean account and get$200 in free credit for cloud-based hosting and services.

Comments

  1. Lucas Tadeu
    Permalink to comment#

    That’s a really nice funcionality, didn’t really know about the “first-letter”. Thanks for the tip!

  2. andieevans
    Permalink to comment#

    Actually it kind of works in ie8. If the paragraph has nothing before it ( etc) then it will work…

  3. Ken Lasher

    The first option gives you more control. I tried the second and the only that got a drop cap was the footer text. This is a cool feature. Having come from a print design background, I missed drop caps. I used to make images for this purpose back in the day. This is sweet!

  4. rohit

    small but nice

  5. Theraisa K
    Permalink to comment#

    Neat! I didn’t even think of using drop caps on a website, but now that I see it in action it could be very useful in a well-designed site.

  6. Graha Nurdian

    This is awesome ! nice tips mate :)

  7. Zach Stone
    Permalink to comment#

    Excellent snippet — I was having cross-browser issues with :first-letter, the span solution left me spic-n-pixel-perfect. Thanks!

  8. andry
    Permalink to comment#

    Thank you very much for this tip.

  9. Alistair
    Permalink to comment#
    p:first-child:first-letter

    This doesn’t seem to work.

  10. Alistair
    Permalink to comment#

    Sorry ended up a douchebag comment whilst amazement took place.

    Testing this in Chrome 13.0.782.220 m

    That selector doesn’t seem to work. However i’m noticing other bugs with this build on the laptop also. Weird artifacts being left in browser when multiple tabs are open.

  11. dewadg
    Permalink to comment#

    This steps helped me. Thanks for the tutorial :)

  12. Piotr Ślusarski
    Permalink to comment#

    Thank you! It works!

  13. Piotr Ślusarski
    Permalink to comment#

    BTW: are there any fonts that look particularly well and could be recommended to use in drop caps (apart from Georgia)?

  14. WyldKard

    The problem is that drop-caps will display elsewhere in your page too, like at the beginning of a blockquote or in a footer. Is there a way to restrict it _only_ to the first letter in a document?

    • That Guy
      Permalink to comment#

      Use more specific CSS selectors. For example, #maincontent p:first-child:first-letter {blah; blah;}

  15. Frank Ebbert

    Sweet to be sure! Thank you!

    I use text indents at times for my paragraphs. The drop cap technique produces the odd quirk of applying the indent to the rest of the word using the drop cap. So that word doesn’t line up with the text line below. To escape that, I set the text indent: 0; for that paragraph. Depending on my structure, I may have to play with selectors a bit.

    For CSS3, I keep this in mind too: the first-child pseudo selector applies the drop cap to the first <p> on the page. I’ve seen some impressive layouts where there are more than one drop per page. I’ve not done that yet, but I can see where I’d need to drop the first-child selector and simply use first-letter.

    Cheers to fine design.

  16. Lyoniel
    Permalink to comment#

    .. great trick, it is so useful, thanks!.

  17. dianejwright
    Permalink to comment#

    Hi all. Regarding the subsequent application of dropcaps on a page, it seems as if combinators do the trick! I found this:http://www.sitepoint.com/forums/showthread.php?585658-Pseudo-Class-first-child-Problem

  18. That Guy
    Permalink to comment#

    Great tip. Worked perfectly in Firefox 10. My font sizes are in percentages so, I had to tweak it a little to get it to display correctly in Chrome and IE9. Probably has something to do with how individual browsers render fonts.

    I had to add a line-height of 0.8em and add a negative bottom margin of -0.1em to get it to display correctly in Chrome and IE9.

  19. Steliyan
    Permalink to comment#

    Does this trick is usable in the wordpress theme?

  20. Dan Eden
    Permalink to comment#

    I’m almost certain thatp:first-child:first-letter doesn’t work in any browser. At least, it’s not working for me in Chrome 18, Safari 5.2, Firefox 11, Opera 11.

    • eric
      Permalink to comment#

      Dan, it should be written like the following

      p:first-child::first-letter

      You were missing a colon.

  21. Markus Reiter

    Instead of:first-child you need to use:first-of-type. Otherwise the “first child” could be a<h1> for example.

    • Anup Debnath
      Permalink to comment#

      I think.class>p:first-child:first-letter is batter way.

    • Jason
      Permalink to comment#

      Thank you Markus! I’ve been smashing my head against the keyboard and “:first-of-type” finally did the trick!

  22. Tim Baggaley

    I’m using

     .content > p:first-of-type:first-letter {/* DROP CAP style */}

    In a WP theme as it avoids confusing by photos and / or their captions appearing as the first elements in the target div. My problem is IE9 – it seems to take no notice of the line-height value which sets the vertical position in every other browser I’ve tested including IE 8 and IE 10. I cannot find away to adjust the vertical position of the drop cap in IE 9 – can you help me?

    See my site at:http://graphicviolence.co.uk and my CSS for my drop cap is:

    .art-postcontent > p:first-of-type:first-letter {   letter-spacing:0;   text-transform:uppercase;   color:#250607;   font-size:50px;   font-weight:normal;   float:left;   margin:5px 5px -7px 0; /* THESE VALUES SET TXT WRAP AROUND DROP CAP */   line-height:1; /* THIS SETS BASELINE POSITION OF DROP CAP */}

    Thanks
    t

  23. Gerry O'Neill

    @ Ken Lasher – two years late – anyways your better off using the followind type selector:

    .article>p:nth-of-type(1):first-letter

    The nth-of-type is a damn good way of selecting ;)

    • Gerry O'Neill

      @ Ken Lasher – two years late – anyways your better off using the following type selector:

      .article>p:nth-of-type(1):first-letter

      The nth-of-type is a damn good way of selecting ;)

      Typo on the first copy of my comment, had to fix ;)

  24. syahrul
    Permalink to comment#

    what is font you using in?

  25. Kyle
    Permalink to comment#

    CSS Tricks saves the day again! When I don’t know whether something can be done, I almost always check here first. I had no idea there was a first-letter pseudo class.

    Thanks for this!

  26. Rams
    Permalink to comment#

    I have no idea how you – and only you – manage to answer my questions in 3 year old posts!
    Thank you for sharing the knowledge

  27. Tanner Campbell

    I needed to make the first letter of the first paragraph of each blog entry a drop cap and I needed <ie8 compatibility. I worked it out using the “+” selector.

    #div A + B {}

    If you’re savvy you can probably just look at my codepen and figure it out:http://codepen.io/TannerCampbell/pen/vlDut

    Here’s a little bit of an explanation though:

    #column-left p:first-letter {  font-size: 3em;}

    That would take all p elements inside the #column-left id and make their first letter a dropcap. But that’s useless if you only want the first character to have the dropcap. By adding the preceding element and the + selector like so:

    #column-left h6 + p:first-letter {  font-size: 3em;}

    You’re telling the browser, “Hey, Browser. I would like you to find all the p’s inside of #column-left and if they are preceded by an h6 tag, I’d like you to give their first letter a font size of 3em.”

    This is useful if you have multiple repeat occurrences of the same layout inside of one div or id. Like, for instance, a WordPress theme.

    Hope this was helpful to someone. Have a good one!

    Best,
    Tanner

  28. Kenneth John

    Thanks it really helped me. I have got one question I need to add an

    effect but I need to define its width too how is it possible

  29. Al Augustin

    We used some jQuery in order to implement the CSS3 version across all browsersSample Link

  30. Eric Jussaume
    Permalink to comment#

    The drop caps code snippet works great. Its simple and easy I used it on my portfolio websitehttp://ejstudios.net and it looks great. Just put in the CSS snippet into the appearance > editor and the span into the html in the text of the actual page you want it to be displayed in.

  31. Alan Houser
    Permalink to comment#

    Works well, unless you start the paragraph with quotes. :D (scrshthttp://i.sqr.fr/SmMS )

  32. Hyshka
    Permalink to comment#

    Used responsive units for 16px base font size:

    font-size: 4.687em;line-height: .8em;padding-top: .25rem;padding-right: .5rem;padding-left: .187rem;margin-bottom: -.1em;
  33. Crispylogs
    Permalink to comment#

    It will only work, if there is not any element before it. The p tag should be the very first element of your html.

    • Ajay
      Permalink to comment#

      Not true… I’m using it like so.content p:first-child:first-letter { ... }

      Just add some selector before to target the exact p tag you want….

    • Lorenzo Matibag

      Use .dropcaps:first-letter instead. Just add the class=”dropcaps” to any p tag you want the drop cap to appear in.

  34. Dave

    Unfortunately (for me) it seems that first-letter only works for letters. When I tried applying it to text starting with a symbol (☰) it didn’t work. It did work for a Chinese character though, so it’s not ASCII only. I could do with a first-char selector really.

  35. William Hertling

    As Alan said, the first-letter selector doesn’t work so well if the first character is an opening quote (because it selects both the opening quote plus the next letter). I’m trying to replicate what my designer normally would do in print, which is to keep the initial quote small, then have a drop cap next to it. I tried using a span on the first alphabetic character, but then I get the drop-cap floating left of the opening quote, which is bad. Any suggestions?

  36. Mark
    Permalink to comment#

    Dave, if ‘symbol’ is a font, it will work like any other font. Similar to Dave’s ‘first char ignored’. Using IE11 with “details” parent and “summary” precedent sibling. Well,
    nothing happens with “first-child” pseudo. Even tried your&lt; and&gt; pipes. Nothing. However, be it noted that both summary and details elements are new to IE, and neither can directly pseudo anything, for now. Only “first-letter” works for the contained “p” element, where Ruby and HTML are copesthetic. yet some DOM tags not yet fitted…p.cap:first-letter {} and “ together, only option for now.first-childdetailssummary

  37. Cammy
    Permalink to comment#

    I’m too trying to achieve this with a quote, but only want to have the starting quotation marks as the drop cap, not the first letter too. It’s working in effect but I have drop caps on the quotation marks and first letter – anyone any idea how to only drop cap the quotation marks and start the text at the top of the quotation marks not the bottom?

  38. Bladeshatter
    Permalink to comment#

    Wouldn’t the CSS function:

    text-transform: capitalize;

    Work just as good to capitalize the first letter?

  39. CallMeIsmail

    “Dan, it should be written like the following

    p:first-child::first-letter

    You were missing a colon.”

    That sounds like an unpleasant condition.

  40. Raghava :)

    Nice Article. Overall good amount of valuable formation in the website for designers and developers.

  41. Dan
    Permalink to comment#

    What if I only want to apply the drop cap to my blog pages, but it’s formatting it across the whole website? Ie. in my summary block, on my photo descriptions, etc. Any way to restrict it? I’m using squarespace by the way so I can only use CSS edits. Thanks!

  42. Max Parelius
    Permalink to comment#

    Is it possible to implement with just Flexbox?

  43. Starry Tacos
    Permalink to comment#

    Is it possible to do something like afloat: left but withhtml{text-align: center;}?

Leave a ReplyCancel reply

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

[8]ページ先頭
©2009-2025 Movatter.jp