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;
margin: 0;
-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;

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

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