Adding a drop cap to Blogger

Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of this paragraph.

background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-transform: uppercase;

And you need to add span with class="dropcap" to the first letter of your paragraph like this.

<span class="dropcap">B</span>BC News.

It becomes like this.
BBC News.

You can add more class like .blue after .dropcap

background: #3B7CEF;

And add this class to a span tag.

<span class="dropcap blue">C</span>NN News.

CNN News.

Related Posts :

blog comments powered by Disqus
^ Scroll to Top