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 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!
[button type=”anchor” url=”http://w3lessons.info/demo/css3-dropcaps” color=”magenta” align=”after”]View Demo[/button]
You’ll need to do more careful tuning to get the letter centered on the background. This is especially tricky to do with a perfect circle background for every letter in your chosen typeface.