Hướng dẫn tạo Chat Bubbles Với CSS3

Hôm nay mình sẽ tranh thủ giới thiệu cho các bạn một mẫu bubbles rất thích hợp cho các ứng dụng chat hoặc có thể dùng cho các mục comment sau mỗi bài viết. Với kiểu thiết kế này, các bạn sẽ biến trang web hay blog của các bạn cực cool.

Xem Demo | Download

HTML

Đầu tiên, các bạn xây dựng theo khung chuẩn như sau :

<div class="container">
<p class="datestamp">May 20, 2014, 4:16 PM</p>
<div class="bubble">
<p>Hey how's it going?</p>
</div>
<div class="bubble bubble-alt green">
<p>Just sending out random SMS to people</p>
</div>
<div class="bubble">
<p>Cool, cool.</p>
</div>
<div class="bubble">
<p>Sometimes I do that too. Like right now.</p>
</div>
<div class="bubble bubble-alt white">
<p>So how's life? Anything interesting? I'm okay just hanging around doing nothing staring out the window, thinking I should go outside but eh.</p>
</div>
<div class="bubble pink">
<p>Yeah sweet bro. Today I'm feeling pink.</p>
</div>
<div class="bubble bubble-alt yellow">
<p>I'm kinda going yellow today.</p>
</div>
<div class="bubble bubble-alt red">
<p>No wait red.</p>
</div>
</div>    

CSS

Sau đó các bạn dùng toàn bộ đoạn css sau để định dạng cho bubbles.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
  background-color: #dbe1ed;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #414141;
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-awidth: 100%; }

p {
  font-size: 1.2em;
  line-height: 1.25em;
}

.datestamp {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}


/** page structure **/
.container {
  padding: 40px 20px;
  margin: 0 auto;
  max-awidth: 600px;
}


/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  awidth: auto;
  max-awidth: 80%;
  position: relative;
  clear: both;
  
  background: #95c2fd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
  background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#95c2fd', endColorstr='#bee2ff');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  
  margin-bottom: 20px;
  padding: 6px 20px;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: ';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #bee2ff; /* arrow color */
  bottom: 1px;
  left: -5px;
}


.bubble-alt {
  float: right;
}
.bubble-alt:before {
  left: auto;
  right: -7px;
}
.bubble-alt:after {
  left: auto;
  right: -5px;
}

.bubble p {
  font-size: 1.4em;
}

/* green bubble */
.green {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));
  background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b');
}
.green:after {
  border-bottom-color: #ace44b;
}

/* white bubble */
.white {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
}
.white:after {
  border-bottom-color: #e5e5e5;
}

/* yellow bubble */
.yellow {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #fcf3c3),color-stop(1, #f4e371));
  background-image: -webkit-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -moz-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -ms-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -o-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4e371', endColorstr='#fcf3c3');
}
.yellow:after {
  border-bottom-color: #fcf3c3;
}

/* red bubble */
.red {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ea8378),color-stop(1, #e2675a));
  background-image: -webkit-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -moz-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -ms-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -o-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2675a', endColorstr='#ea8378');
}
.red:after {
  border-bottom-color: #ea8378;
}

/* pink bubble */
.pink {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ffbee3),color-stop(1, #f8a5ce));
  background-image: -webkit-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -moz-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -ms-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -o-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f8a5ce', endColorstr='#ffbee3');
}
.pink:after {
  border-bottom-color: #ffbee3;
}

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster