Drop Cap…With Shadow?

davezan
(@davezan)

17 years, 6 months ago

Hi guys,

I’m now looking into creating the 1st letter drop capital effect for my blog. I’ve found various code tweaks and plugins to possibly help me out.

However, none of them appear to achieve what I also want with it: creating the shadow effect. If you go to dropcapitals.com (not a blog BTW and not my site, either), you’ll see what I mean.

I found some css codes to possibly work out. But no dice so far.

Can anyone help create lines of code how to create that drop down with shadow? I aim to use the georgia font type (same as from that link) with shadow.

Thanks.

Viewing 13 replies - 1 through 13 (of 13 total)

Alex Mills
(@viper007bond)

17 years, 6 months ago

They did it with an image and that’s the best way IMO if you want a shadow. It’ll work on all browsers and it’ll show up exactly how you intend.

Here’s a plugin I just wrote for you to replace the first letter with an image:

View Source | Download

Usage:

Create images a.jpg through z.jpg and place them in a folder called dropcaps in your wp-content folder. Upload and activate plugin. Sit back and relax. 🙂

faustinablack
(@faustinablack)

17 years, 4 months ago

I would love for this plugin to work, but it doesn’t for me. Instead of replacing the first letter with the images, or even taking the first letter out, a mis alligned <p> appears before the first letter. That’s it.

breger
(@breger)

17 years, 4 months ago

Me too. I have tried placing the dropcaps folder in different directories as well but no luck. Any ideas?

Alex Mills
(@viper007bond)

17 years, 4 months ago

Oh crap, I forgot that by the time the filter runs, HTML will already be there. My bad.

Try this slightly changed version. It runs before wpautop() adds in the <p> tags and such.

vkaryl
(@vkaryl)

17 years, 4 months ago

Heh. Thanks vipe ol’ buddy…. I downloaded the earlier version to try, to see if I could figure out the whole thing as I now have a client who “needs!” this…. Appreciate the update!

Alex Mills
(@viper007bond)

17 years, 4 months ago

No problem. 🙂

faustinablack
(@faustinablack)

17 years, 4 months ago

Works beautifully on most pages. It isn’t working with catagory archives though, regular archives are fine but if you are viewing a post through catagories the first letter just isn’t there. Any way to exclude catagories so they are normal, or to make it work there too? Or is this just a problem with my setup?

Alex Mills
(@viper007bond)

17 years, 4 months ago

Can you link me to your site? It’s the only way I can know for sure what’s up.

faustinablack
(@faustinablack)

17 years, 4 months ago

here it is, and i warn you before hand I am still building and modding it, so it doesn’t include much right now. Just click on a catagory link and you will see what I mean.

http://www.gollygolly.com

faustinablack
(@faustinablack)

17 years, 4 months ago

I did a lot of tests, and it’s not a plugin problem, just it’s compatibility with the catagory archive pages of k2. Am looking into a solution.

Alex Mills
(@viper007bond)

17 years, 4 months ago

I think the the problem is that my plugin currently only affects the_content and not the_excerpt which is what you’re using on your archives page.

Either switch your theme to using the full content in your archives or use this version of my plugin that applies the formatted to the excerpt too:

http://viper007bond.pastecode.com/9315

webdressing
(@webdressing)

17 years, 1 month ago

Great plugin viper007bond. Very creative 🙂

webdressing
(@webdressing)

17 years, 1 month ago

BTW-you can do this with standard CSS too (except for the shadow).

Just use:

p:first-line {font-weight: bold; color: #000000;}
p:first-letter {font-style: italic; color: #999999;}

Enjoy 🙂