Drop cap is the enlarged first letter of a paragraph that you might have seen in News papers,Magazines and websites. It is an enlarged letter that starts at the first line and covers two or three lines bellow,you can see in the image.It is generally used in Uppercase letters.It is also known as 'Drop initial'.By adding this effect you can give your post a professional look,the posts will be more eye-catching and stylish.In other words,it is the best formula for enliven your blog posts.
I have found this tutorial recently in Blogger sental,and thought to write a post on it so that the bloggers who are interested to add this can add it to their blog posts.
Here is the simple trick for adding drop cap to your posts
Adding Drop Cap CSS
1. Log in to your Blogger Account and go to New Post or Edit Post (in case of post that has been created earlier)2. Choose the HTML mode in Post Editor, you should have paragraph containing atleast 3-4 lines to apply this effect
3. Now find the letter to which you want to apply the drop cap effect under HTML mode of the editor.
4. Now add the following portion of CSS before the letter
<span style="float: left; font-size: 65px; font-weight: bold; line-height: 45px; margin: 0px 6px 0px 0px; padding: 0px; position: relative;"> After adding these codes the letter with the codes will look like this
<span style="float: left; font-size: 65px; font-weight: bold; line-height: 45px; margin: 0px 6px 0px 0px; padding: 0px; position: relative;">A</span> ( in this case the letter I have chosen for drop cap is A)5. Now click on Preview
6. After seeing the Drop cap in preview mode finally Save and Published the post
Help for Customization
Alignment: The code float: left specifies the alignment of the Drop cap, the alignment should be left for drop cap, you can change it to write but will not look good.
Font Styles: The line font-family: Georgia,Times,serif specifies the Drop cap font style, you can change it by other fonts, just add the font name before all the font styles like font-family: Calibri,Georgia,Times,serif,it will make your Drop cap Calibri.
Font size: font size 65px specifies the Drop cap font size. You can make it bigger just change the value 65px
Font weight: font-weight: bold specifies a bold Drop cap, if you want it normal just replace the word bold to normal.
Font color: To change the color you have to modify the code color: red, just replace the word red with the new color name, suppose you want blue drop cap then replace red with blue.
Padding: This adds a white space around the font. The code padding: 6px specifies the size of this white space. You can increase or decrease the space by adjusting the size 6px
Background color: The code background-color: lightgrey adds a grey background to the Drop cap,to change the color replace lightgrey with your color name. If you do not want any background then simply exclude the code.
Text shadow: The line text-shadow: 2px 2px 2px #9966ff adds shadow to the drop cap. The first value is for horizontal length, the second one is for vertical height and third one specifies blur distance
That is all about the Drop cap.Hope you like.If you find it useful then please comment and share