[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]