Pure CSS Speech Bubble

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



Hello my name is Imran Jafri, I am the Editor and founder of Maboot Mag. I am extremely passionate about Web design, UX and GUI. I love to play with PHP, javascript and Wordpress. Of course I am a MAC and using Ubuntu as my secondary OS. That's all.

Share This Post

Leave a Reply

© 2017 Maboot.com. All rights reserved. Site Admin · Entries RSS · Comments RSS
Powered by WordPress · Designed by Theme Junkie