Tutorial membuat Css Speech Bubble

Kali ini kita akan membahas cara membuat speech bubble dengan css yang tergolong tidak sulit untuk dipahami, yaitu hanya menggunaakan box-shadow,border-radius dan permainan border.

Untuk scriptnya lihat di bawah ini:

index.html

<html>
<head>
 <title>CSS Speech Bubble Comment by TUTORIALWEB.NET</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Css Speech Bubble By TUkomNet</h3>
 <div class="bubble-list">
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Pellentesque at nibh gravida, vehicula felis sed, sollicitudin lectus. Donec quis dapibus nisi. Maecenas sit amet faucibus massa. Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
 </div>

</body>
</html>

Dan untuk Script untuk mempercantik Speech Cssnya silahkan dicopy dibawah ini

style.css

body {
 background: #DDD;
 font: 1em "Trebuchet MS";
}

.clearfix {
 display: inline-block;
}

* html .clearfix {
 height: 1%;
}

.clearfix {
 display: block;
}

.bubble-list .bubble {
 margin-bottom: 20px;
}


.bubble-list .bubble .bubble-content {
 position: relative;
 margin-left: 20px;
 width: 400px;
 padding: 10px 20px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 1px 1px 5px rgba(0,0,0,.2);
 color: #333
}

.bubble-list .bubble:nth-child(even) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 12px solid #fff;
 position: absolute;
 left: -12px;
 top: 12px;
}
.bubble-list .bubble:nth-child(odd) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 12px solid #fff;
 position: absolute;
 right: -12px;
 top: 12px;
}
h3 {
 background: #f4778f;
 text-align: center;
 padding: 10px;
 color: #fff;
 font-size: 18px;
 width: 400px;
 margin-left:20px 
}

Jangan lupa untuk menyimpan dengan nama style.css dan index.html dan lihat hasilnya :)