Hi guys, I am going to share some simple css3 code to display the first character from your paragraph as large fonts. CSS3 Drop Caps – simply used to style a paragraph with more attractive. It will increase the readability for a webpage.

css3 drop caps

Drop Caps using CSS3

Css3 Code


.drop-cap, .drop-cap1, .drop-cap2, .drop-cap3, .drop-cap4, .drop-cap5 {
 display:block;
 float:left;
 text-align: center;
 font-size:34px;
 line-height:30px;
 color: #fff;
 padding: 9px 10px;
 margin: 5px 8px 0 2px;
 border: 2px solid #fff;
 -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 14px rgba(0,0,0,0.2) inset;
 -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 14px rgba(0,0,0,0.2) inset;
 box-shadow:0 1px 4px rgba(0,0,0,0.3), 0 0 14px rgba(0,0,0,0.2) inset;
}

.drop-cap {
 background:#778899;
}

.drop-cap1 {
 background:#778899;
 border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
}

.drop-cap2 {
 background:#778899;
 border-radius: 50% 0 50% 0;
 -moz-border-radius: 50% 0 50% 0;
 -webkit-border-radius: 50% 0 50% 0;
}

.drop-cap3 {
 background:#fff;
 color: #333 !important;
}

.drop-cap4 {
 color: #333 !important;
 background:#fff;
 border-radius: 50%;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
}

.drop-cap5 {
 color: #333 !important;
 background:#fff;
 border-radius: 50% 0 50% 0;
 -moz-border-radius: 50% 0 50% 0;
 -webkit-border-radius: 50% 0 50% 0;
}

Html Code & Usage

<p><span class="drop-cap2">J</span>Query is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. view more - <a href="http://jquery.com/">http://jquery.com/</a></p>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/11/css3-dropcaps1.pnghttp://w3lessons.info/wp-content/uploads/2012/11/css3-dropcaps1-150x150.pngKarthikeyan KCSS3FreebiesCSS3,Design,tips & tricks
Hi guys, I am going to share some simple css3 code to display the first character from your paragraph as large fonts. CSS3 Drop Caps - simply used to style a paragraph with more attractive. It will increase the readability for a webpage.Css3 CodeHtml Code & UsagePlease don’t forget...