Post Category

CSS Speech Bubbles and CSS Tool tips

Speech Bubble is commonly used in a blog or forum. You can create speech bubble easily using only css. It supports all major modern browsers.

Have Fun!




/******* CSS Start Here ******/
/* Page Background */

body {
background: #666;
padding: 100px;
}


/* Speech Bubble */

#bubble {
background-color: #009900;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
3px 3px 0 hsla(0,0%,0%,.1);
color: #fff;
display: inline-block;
font: 16px/25px sans-serif;
padding: 15px 25px;
position: relative;
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
#bubble:after, #bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #009900;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
#bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}




Read 3648 times.

Comments:

Demetrius33 Says: earn cash fast google [url=http://paydayloansnocreditcheckstoday.com]payday loans no credit check no employment verification direct lender[/url] consumer protection bc payday loans <a href=http://paydayloansnocreditcheckstoday.com>payday loans no credit check no bank account</a> payday loans no credit checks http://paydayloansnocreditcheckstoday.com pls payday loan store reviews

2013-01-17 18:20:18



Place Comment
Please write here your Comments/Feelings/Experiences/Suggestions/Feedback.
Name
Email
Comments