CSS A Fancy & Flexible Drop Cap Letter

by | Mar 23, 2021 | 0 comments

CSS A Fancy & Flexible Drop Cap Letter

by | Mar 23, 2021 | CSS Tips and Tricks | 0 comments



A drop cap is a fun and elegant design element to add interest to a story. Adding these to your website is just as easy. This video shows an example of how to add another level of detail by including a background behind the letter. You may want to target your paragraph styles more specifically by adding an id or class before the p:first-of-type::first-letter. In this isolated example, a general ‘p’ tag is fine.

https://jsfiddle.net/ashleycam3ron/1fceepq7/

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>