Chat bubble with CSS!

  • 1
  • Praise
  • Updated 8 years ago
Hey everyone! Did you ever want to make one of those CSS chat boxes with the little arrow sticking out of them? Well now you can with NO images!

Here is the code to make the arrow stick out of the top of it:

<!--

<style type="text/css">
.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
border-color: transparent transparent #666666 transparent ;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-22px;
left:100px;
}

.chat-bubble-arrow {
border-color: transparent transparent #EDEDED transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
top:-19px;
left:100px;
}

/*IE fix */

.chat-bubble-arrow-2 {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}

</style>

<div class="chat-bubble">
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
Chat bubble!

</div>

-->

(remember don't copy <!-- or -->)

Now, here is the code for a Chat box with an arrow pointing down from it:

<!--

<div class="chat-bubble-2">
Buongiorno!
<div class="chat-bubble-arrow-border-2"></div>
<div class="chat-bubble-arrow-2"></div>
</div>

<style type="text/css">

.chat-bubble-2 {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border-2 {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}

.chat-bubble-arrow-2 {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}

/* IE fix */
.chat-bubble-arrow-2 {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
</style>

-->

They look fantastic. If you have any questions reply below! :)

-Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Hey Nathan,

They look awesome!! I've made a little test page so people can see them in action: Test Page

I might try and use one of these in my site!! Great work!

Callum
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Callum for making that test page! :)
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
where did u got that from??
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I searched on Google and then I edited and customized the code.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
If anyone wants the arrow to be on the side of the box let me know and I can post the code for that.