[box]Language: HTML/CSS Difficulty Level: normal Time: 5min[/box]
Lately I have been learning a lot of CSS stuff, because I prefer to use ‘pure’ CSS whenever possible instead of images. Indeed this blog is also a place for me to share whatever I learn ;}. Today I learned how to create pure CSS speech bubble without the use of any image thanks to Konigi. It’s a simple CSS trick that uses :after pseudo-class in addition to usual border-radius and box-shadow commands.
So here is the CSS code.
.bubble {
position: relative;
background-color:#eee;
margin: 0;
padding:10px;
text-align:center;
width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25);
}
.bubble:after {
position: absolute;
display: block;
content: "";
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
}
And Below is the HTML Code to trigger the above CSS code.
<div class="bubble">This is the text of speech bubble</div> <p style="margin-left: 1em;">Your name</p>
Below is the screenshot how should it look like.
[button link=”http://maboot.com/stuff/demo/speechbubble/”]Live Demo[/button] [button link=”http://maboot.com/stuff/demo/speechbubble.zip”]Download code[/button]
