A drop cap is when the first letter of a paragraph is larger than the average font size and that letter ‘drops’ down 2 (or more) lines. You can actually see this right here on SpyreStudios. I’ve attached a screenshot for those of you reading via a feed reader:
No Need For A Plugin
So, we already know WordPress is awesome, there’s a lot of things you can do with it and there’s a even a plugin that automatically creates drop caps. Nice! But what if you don’t want to use a plugin (I sure don’t!) and you actually want to have drop caps only on some posts, and maybe elsewhere on your site? (read: you’re a control freak just like me when it comes to design)
Well, good news is you don’t need a plugin to create nice drop caps on your blog, all you need is some CSS and a span tag! First of all, go edit your stylesheet (usually the style.css file)
And simply add the following code:
[html]
span.dropcaps {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;
}
[/html]
Or something similar top the CSS above. Of course you need to style this to fit your actual design and typography. The font-size, marings and line-height will vary depending on your design and typography, but this should give you some ideas :)
Add The Span
Now here’s the easy part (ok, well the CSS was pretty easy too), simply wrap the first letter of your post inside a span, like this:
[html]
<span class="dropcaps">A</span>
[/html]
And voila! You got a nice drop cap, it looks good, you’re happy, the world is happy, and.. well, did I mention it looks good? :)
Author: Jon
http://www.24alta.ru
Online roulette Canada.
But how do you “bus a cap” in yo blog? Kidding. Nice technique! Gonna include a link in my favorites list tomorrow.
Alternatively, you can use the “first-letter” pseudo-element.
p:first-letter {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;
}
Hi!, love your blog. This tip work to in blogger?
Great tip!
The advantage of using Logan’s method is that you can then use it for dynamic texts as well. (avoiding the hassle of having to manually insert the tags.
@Brandon: lol thanks man! :)
@Logan Leger: Nice one Logan! I just figured it’d be nice to be able to place the drop cap exactly where I want it, but the pseudo-element would work real nice too!
@zafra: For sure it’d work on Blogger, you just need to add the CSS code and add the span where you want your drop caps.
@Joel Laumans: Hey I didn’t think of that! Good point :)
thanks
Nice Tip! I did a quick video tip on this a few weeks ago: http://www.nikibrown.com/designoblog/2009/02/24/quick-tip-20-drop-a-cap-in-your-paragraph/ Drop caps are a nice progressive enhancement :)
@Niki: Hey nice vid! Yep, nice enhancement, and like you said in your vid, people with IE may not see it, but who cares? hehe Oh and I just realized you had the iTunes feed (just subscribed!) Thanks for stopping by :)
Very thoughtful post . It should be very much helpful
Thanks,
Awesome :D I am totally using this on my site :D
Hey, this is just I need for my blog. Thanks a lot