How to make a “drop cap”.

  • Unknown's avatar
    tritoncommunities · Member ·

    See example http://www.pearsonified.com/themes (the “R” is a drop cap).

    I like the rest of the text style on this blog, how do I start making mine as “pretty”.

    I have all upgrades.
    I’m on WordPress.com

    Here’s my site: http://tritoncommunities.com/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    sl1k · Member ·

    This article explains how http://csswiz.wordpress.com/2009/08/11/first-letter-or-any-letter/

    Hopefully one the CSS Guru”s will be able to help you implement it in with CSS

    so I will mark this thread unresolved for you so the Volunteers know this thread needs attention…

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Best regards, but a drop cap is not the same as a large first letter.
    Just mentioning that there is a difference…
    Drop cap requires different code so the initial letter is ‘dropped’ below the line of type.

    Both look cool and attract attention…

  • Unknown's avatar
    sl1k · Member ·

    Oh my bad I didn’t know the difference now I do thanks Tess,

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    slik,
    no worries, most folk don’t see any difference between large first letter and a drop cap: it is just a way to call attention to a beginning.
    But I have long admired illuminated manuscripts with images inside the first letters of paragraphs or chapters…
    I worked for a printer for a couple of years, and drop caps involved special effort. As now.

  • Unknown's avatar
    hallluke · Member ·

    You should be able to do this purely in CSS as shown below. I tried it out in Firebug but apparently there’s a Firefox bug that won’t display it for me. It might be worth trying in the CSS editor and this way you won’t have to manually edit all your paragraphs. However the first-letter pseudo-class is only supported by the most recent version of most browsers so older releases will not show the change.

    p:first-letter {float:left; font-size:3em; line-height:1; margin-right:5px;}

  • Unknown's avatar
    tritoncommunities · Member ·

    hallluke!

    How are you! Please take a look at http://www.pearsonified.com/themes , he has his drop cap letter a different color than the rest of his text, I believe it is a shade of black.

    I like it, but can’t get it done, here’s what my HTML looks like:

    <span style=”float:left;font-size:3em;line-height:1;margin-right:5px;”>T</span>riton Communities builds signature homes in Colorado’s most desired communities. Thoughtful planning, superior craftsmanship, and meticulous attention to detail are the hallmarks of our success. Every day, we strive to build a legacy of excellence; one family, one home, and one customer at a time.</p>

  • Unknown's avatar
    hallluke · Member ·

    I answered this in your other forum entry (but am too lazy to link to it here). If it is tagged with “CSS” or posted in the CSS forum it’s likely I will notice the question anyway so no need to ask multiple times. Enjoy!

  • The topic ‘How to make a “drop cap”.’ is closed to new replies.