How to write Attractive Articles with Drop Caps

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have drop caps i.e first letter in the beginning is large .So today we are going to learn in this blog How to write Attractive Articles with Drop Caps , what is dropcap and it's defferent design's. 

What is Drop Caps?

A drop cap (dropped capital) is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of a drop cap is usually two or more lines. Drop Caps(Dropped Capital) is an interesting way of attractive writing of articles in a blog or a magazine or an newspaper.Drop caps are used in various media, including books, newspaper articles, documents, and webpages. Drop caps add style or grab a reader's attention.

Demo

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

I hope you have seen the Drop Caps. Now we can make it a little bit creative. Follow the below steps.

Steps To Write Attractive Articles Using Drop Caps

1. First of all login to your blogger account and create a new post and start typing your article. After finishing your article change it to HTML View.
2. Now check the first letter of the article as shown below 
And then paste the code below
<span style="font-family: times; float: left; font-size: 70px; font-weight: bold; 

line-height: 50px; margin: 0px 5px 0px 0px;

padding: 0px; position: relative;">L</span>
The Output may look like this

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

3. Let's make it stylish let's add a background color and change the font color and do some changes. 

I will give you 3 designs choose the design best for you :)

Design 1

Demo: 
Many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Code
<span style="float: left; font-family: 'Apple Chancery',cursive; font-size: 70px; 

line-height: 50px; margin: 5px 5px 0px 0px; position: relative;

text-shadow: rgb(153, 102, 255) 2px 2px 2px;">M</span>

Kindly replace the letter M to your custom letter. 

Design 2

Demo
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur metus sit amet dolor euismod, quis maximus erat euismod. Vivamus ac laoreet odio, non faucibus leo. Maecenas dignissim leo malesuada tempor tempus

Code
<span style="background-color: lightgrey; color: darkblue; float: left; 

font-family: Georgia,Times,serif; font-size: 65px; line-height: 45px;

margin: 0px 5px 0px 0px; padding: 5px; position: relative;">T</span>

Kindly replace the letter T to your custom letter. 

Design 3

Demo
Aenean tempor, nunc at posuere gravida, ex neque efficitur quam, eu posuere ante nisi eget quam. Fusce orci est, sodales non congue quis, consequat ut sem. Aliquam id laoreet eros. Fusce vestibulum, velit ac dignissim lacinia, est lectus condimentum nibh, consequat hendrerit dui tellus ut lacus.

Code
<span style="font-family: Kaushan Script; color: red; float: left; font-size: 70px; 

font-style: italic; line-height: 50px; margin: 2px 8px 0px 0px;

position: relative;">A</span>

Kindly replace the letter A to your custom letter.

Design 4

Demo:
agravida, ex neque efficitur quam, eu posuere ante nisi eget quam. Fusce orci est, sodales non congue quis, consequat ut sem. Aliquam id laoreet eros. Fusce vestibulum, velit ac dignissim lacinia, est lectus condimentum nibh, consequat hendrerit dui tellus ut lacus.

Code
<span style="float: left; font-size: 70px; font-weight: bold; line-height: 50px; margin: 0px 5px 0px 0px; padding: 0px; position: relative;">v</span> 

Kindly replace the letter a to your custom letter.

Conclusion

So today we have discussed about How To write attractive Drop Caps Articles in Blogger and other blogging platforms. I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.

2 comments

  1. great one
    1. Thanks ☺️
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.
© THE TALUAT. All rights reserved. Distributed by TheTaluat Distributed by TheTaluat