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!
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.
Firstly, head on over to the demo on CodePen.
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.
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post