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 15443 times.