Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Community Projects

CodePen Challenge #6: Decorative Drop Caps


Time for another CodePen Challenge! We want you to take a plain-looking paragraph and apply a decorative drop cap to the initial letter–the best examples will be showcased in a week or so!

The Challenge

Recently we published a tutorial on initial-letter, an emerging CSS property currently being discussed over at the W3C. If you’re new to drop caps, take a look:

Whether you use this new technique, or a more established CSS approach, we want you to show us what’s possible with CSS drop caps. Be creative, be decorative, use your typographic sensibilities and your designer’s imagination to blow our socks off. You can use web fonts, colours, positioning, backgrounds, transforms, gradients, masks, whatever you find is possible. 

Usually with these challenges we ask you not to touch the markup, but in this case, you can change the passage used in order to give you the initial letter you prefer (for example: an “O” might suit what you design, or a “P” might fit well with the font you use). 

Note: make sure you give credit where necessary.

Over to You

Here’s what you need to do, in a few dead easy steps.

Step 1

Firstly, head on over to the demo on CodePen

Step 2

Hit the Fork button to create your own copy of it, add a different passage of text if you wish, then make as many changes as you want to the CSS.

Step 3 (Optional)

If you’re signed into CodePen you can edit the description by hitting the Settings button. Use this to give folks an idea of what you’ve done.

Step 4

Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.

That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased here and on social media very soon!

Good luck and don’t forget to follow Envato Tuts+ on Codepen!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.