Pseudo classes can target selective areas to create drop caps:
/* for a single line */ li:nth-child(4) a { font-weight: bold; } /* for a drop cap, can use multiple pseudo classes */ p:nth-child(2):first-letter{ font: 100px/80px Georgia; text-indent: 0px; float: left; /* important */ padding-right: 3px; }
This works on Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
HTML
<div class="bubbles">
<p>I'm the speech. You should be amaze cause this doesn't need any image!</p>
</div>Yep. That simple. Now head to the CSS. Here’s where the magic happen. Using CSS pseudo elements :before and :after, we can imitate the look of the bubble tip.
CSS
.bubbles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f0f0f0;
text-shadow: 1px 1px 1px #f8f8f8;
width: 250px;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f0f0f0, #8a8a8a);
background:linear-gradient(top, #f0f0f0, #8a8a8a);
}
.bubbles:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
height:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f0f0f0 transparent;
}The CSS3 elements is there to add the spice to the modern browser, while look almost awesome in their grandfather’s browsers. View the rest of the demo here.
References
A new version that apparently works in all browsers and clean.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Sweet CSS3 Apply Style buttons by Dan Eden
<a href="#" class="button" title="Buy Now">Buy Now</a>* {
margin: 10px;
}
.button {
padding: 5px 10px;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
font-weight: bold;
line-height: 1;
color: white;
text-shadow: 0 -1px 1px rgba(0,0,0,.3);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#52A8E8), to(#377AD0));
background-image: -moz-linear-gradient(0% 100% 90deg, #377AD0,#52A8E8);
background-color: #52A8E8;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
border: 1px solid #20559A;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1pxrgba(255,255,255,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-o-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.button:hover, .button:focus {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#54A1D8), to(#1967CA));
background-image: -moz-linear-gradient(0% 100% 90deg, #1967CA,#54A1D8);
background-color: #52A8E8;
color: white;
}
.button:active {
background: #2D7CD1;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.5), 0 1px 1pxrgba(255,255,255,.7);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-o-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
color: white;
}
<style>
a {
font: 12px/12px "Helvetica Neue", Helvetica, sans-serif;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #fff;
background-image:-moz-linear-gradient(100% 100% 90deg, #e0e0e0, #fff);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e0e0e0));
float: left;
display: block;
color: #000;
text-decoration: none;
outline: none;
}
a span {
float: left;
height: 8px;
border-bottom: 3px solid rgba(221,221,221,0.5);
padding:5px;
font-style: normal;
}
.buttons a:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
border-left:1px solid #ccc;
}
.buttons a:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
a:hover, a:focus {
border-top-color: #eee;
border-right-color: #bbb;
border-bottom-color: #bbb;
border-left-color: #eee;
}
a:active span{
top:1px;
position:relative;
}
.buttons {
clear: both;
}
</style>
<div class="buttons"> <a href="#"><span>First btn</span></a> <a href="#"><span>Middle</span></a> <a href="#"><span>Middle</span></a> <a href="#"><span>Last btn</span></a> </div>
Page 2 of 3
