So you want to learn CSS?
The drop caps effect is relatively easy to code using CSS. Initially, I had attempted to use the effect with the CSS3 pseudo classes :first-child and :first-letter. The results were unpredictable. A method needed to be worked out to selectively choose which particular letter required the effect.
The steps are very simple, but require a tiny bit of post editing:
- Create the CSS code for the drop caps style (class .drop-it, in this example)
- Select the letter to apply the drop caps effect
- Edit the HTML, wrapping the letter in
- That’s it!
For personal use, I set up a dashboard style so I can see the drop caps effect within my post as I write it. If a dashboard style is not applied, the letters will appear “weird” since they are contained within code tags. Just look at the letters as they appear in this post as opposed to how they look when styled, as shown in the screenshots. To view the drop caps effect in all its glory, click through this post to view it on my blog.
Alternatively, a background image could be used instead of a background color. This would add a unique flair without any need for special modifications for each drop caps effect letter selected.
The best part is additional bold or italic font styling can be added within the tumblr post editor. The down side is the style is really only useful for posts you author. Of course it could be applied to other posts as well, but that would involve a lot of post specific editing, which can become a very long, involved process, with very little “payback”.