Quick Tip: Easy Way To Create Drop Caps On Your Blog




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:

Drop Caps on SpyreStudios

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:

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;
}

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:

<span class="dropcaps">A</span>

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? :)


Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!