Freebie: Retro DropCaps for your website

Once in a while I love to add some new design elements to my site. I’m into all things vintage and retro lately! Aren’t drop caps simply beautiful? Not only in print, even digital texts get a certain touch of classiness.

I made these for my site, and I offer them for free download (please respect the copyright, though) – here’s the preview:

Well, how do you add them to your site?

There are several nice plugins which can turn the first letter of your paragraphs into drop caps, as you can see here. But I wanted to have specific images, that’s why I need to add them manually.
At first you need to extract all the .png files from the zip archive and move them to your webspace.

If you want to add a drop cap “M”, for example, add this piece of code at the beginning of your text, changing yourWebspace.com to your URL:

<img class="dropcap" src="http://yourWebspace.com/uploads/dropcap-m.png" alt="M" width="49" height="60" />

Just replace the M with any other letter you need, both in the image source and in the alt tag (dropcap-z.png for a Z, dropcap-f.png for an F and so on. The German umlauts would be -ae, -oe bzw. -ue eingeben).

Now your drop caps need the correct style. Add the following snippet to your CSS file:


 img.dropcap {
 display:inline;
 float:left;
 margin-right:5px;
 margin-bottom:0px;
 margin-top: 7px;
 }

That’s it!

Please note: You must have some Html and CSS knowledge in order to add the drop caps to your site, and I can’t give you any further support – please ask auntie Google for help ;)

Ready? Here you can download the file:

Download @box.net

This work is licensed under a
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License.