CSS Comic Bubble

by imehesz

HTML

<div class="bubble">
    OMG, I am speaking in Comic Sans!
</div>


<p></p>
<p></p>
<p></p>

<div class="intro-container">
  <div class="content">
      HELLO!
  </div>
</div>

CSS

body {
    font-family: "Comic Sans MS", cursive;
}

.bubble {
    font-family: "Comic Sans MS", cursive;
    display: inline-block;
    color: #000;
    background-color: #fff;
    border: 5px solid #000;
    padding: 20px;
    border-radius: 20px;
    /*box-shadow: 5px 5px 5px rgba(0,0,0,.5);*/
    position: relative;
}

.bubble:after {
    content: "";
    display: block;
    background-color: #fff;
    border: 5px solid #000;
    border-width: 0 5px 5px 0;
    width: 24px;
    height: 24px;
    /*box-shadow: 5px 0 5px rgba(0,0,0,.5);*/
    position: absolute;
    bottom: -18px;
    left: 40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.intro-container{
    width: 250px;
    height: 30px;
    border: 5px solid black;
    -moz-transform:skewX(10deg);
    -webkit-transform:skewX(10deg);
    text-align:center;
    background-color: orange;
    font-weight: bolder;
    padding-top:10px;
}
.intro-container .content{
    -moz-transform:skewX(-10deg);
    -webkit-transform:skewX(-10deg);
}

JavaScript

// Tomomi Imura (@girlie_mac)