Hướng dẫn viết Chat Bubbles Với CSS3 cực đơn giản

Xem: 526    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

7 điểm   ( 2 đánh giá ) File đã được kiểm thử


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.

 

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-width: 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-width: 600px;
 
}
 
 
 
 
 
/** ios1-ios6 bubbles **/
 
.bubble {
 
  box-sizing: border-box;
 
  float: left;
 
  width: auto;
 
  max-width: 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;
 
}

Thật đơn giản đúng không, Chúc các bạn thành công !

Hướng dẫn viết Chat Bubbles Với CSS3 cực đơn giản

Hướng dẫn viết Chat Bubbles Với CSS3 cực đơn giản Đăng ngày 12-12-2016  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. 3.5/10 526

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn