Add Flair With Dropcaps
Filed Under: Blogging, WordPress
Awhile ago I showed you how to use a technique called pullquotes in your WordPress blog. (see Using Pullquotes) In this post I’ll show you how to add another visually interesting feature to your posts called dropcaps. What is a dropcap? A dropcap, much like a pullquote, is a technique often used in print whereby the first letter of a work, chapter, paragraph etc is larger than the rest. In fact you can see it in action in this very post.
Creating a dropcap is very easy. First we assign a new class and wrap it in span tags then we define the new class in the style sheet. Using the first sentence of this post as an example …
<span class="dropcap">A</span>while ago I showed you how to use a technique ...Now we define the new class “dropcap” in the style sheet. This is what I added to my style.css
.dropcap { float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 3.25em; line-height: 0.75em; color: #aaa; padding: 0.08em 0.1em 0 0; }You may have to adjust the line-height and padding to fit the look of your current theme. Obviously you can customize this anyway you want by changing the font-family, size, color etc.
Thanks for visiting! If this is your first time here why not grab the RSS feed. You can also follow this discussion by checking the "Notify me of followup comments via e-mail" box or by subscribing to the comments RSS feed. Please scroll down to leave your comment.
No Comments so far. Add Yours Now!
Reply to “Add Flair With Dropcaps”
Please note: Comment moderation is in effect. It may take some time for your comment to appear. There is no need to resubmit it.
Management does not necessarily endorse or agree with comments left here. Management reserves the right to not publish comments it deems unfit. Play nice.