Thứ Năm, ngày 03 tháng 12 năm 2015

Tổng Hợp CSS3 CHAT Bubble Đẹp Style IOS cho Web/Wap/Blog

Chào các bạn. CSS3 hiện nay không còn xa lạ với các coder, những người mới bắt đầu cũng dần đang tiếp cận với nó. Vì thế hôm nay mình xin chia sẻ một số hiệu ứng CSS Bubble style IOS cho các bạn làm Web CHAT sẽ rất hợp lý. Giao diện trẻ trung đi theo xu hướng
Cách dùng: Các bạn coppy CSS chèn vào site mình và HTML chèn vào nơi cần hiển thị
Các bạn có thể chỉnh sửa theo ý muốn dựa theo CODE có sẵn tùy vào khả năng của các bạn
Có thể sử dụng css này cho XTGEM, Blogger Blogspot, WordPress, Wapka, Xviet, Wapseo, v.v...


CSS3 Hiệu Ứng Bubble 1


CSS
.commentArea {
    font: 14px Arial;
    padding: 0 10px;
    margin-top: 20px;    
}

.bubbledLeft,.bubbledRight {
    margin-top: 20px;
    padding: 5px 9px;
    max-width: 50%;
    clear: both;
    position: relative;
}

.bubbledLeft{
    float: left;
    margin-right: auto;
    -webkit-border-radius: 8px 8px 8px 0px;
    -moz-border-radius: 8px 8px 8px 0px;
    -o-border-radius: 8px 8px 8px 0px;
    -ms-border-radius: 8px 8px 8px 0px;
    border-radius: 8px 8px 8px 0px;
    background-color: #65B045;
    color: #ffffff;
}

.bubbledLeft:before {
    border-bottom: 10px solid #65B045;
    border-left: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    left: -8px;
    content: "";
}

.bubbledRight{
    float: right;
    margin-left: auto;
    text-align: right;
    -webkit-border-radius: 8px 8px 0px 8px;
    -moz-border-radius: 8px 8px 0px 8px;
    -o-border-radius: 8px 8px 0px 8px;
    -ms-border-radius: 8px 8px 0px 8px;
    border-radius: 8px 8px 0px 8px;
    background-color: #07D;
    color: white;
}

.bubbledRight:before {
    border-bottom: 9px solid #07D;
    border-right: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    right: -8px;
    content: "";
}



HTML
<div class="commentArea">
    <div class="bubbledRight">
        Error dicunt theophrastus cu qui. Ad eos simul possit option, adipisci principes sed at. Detracto adolescens pro ea, duo no
    </div>
    <div class="bubbledLeft">
        Lorem ipsum dolor sit amet, ea oblique constituam signiferumque eam. Pri adipisci maluisset te.
    </div>
</div>  


CSS3 Hiệu Ứng Bubble 2


CSS
@import "compass/css3";

body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
}

section {
max-width: 450px;
margin: 50px auto;

div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
    line-height: 24px;
}
}

.clear {clear: both}
.from-me {
position:relative;
padding:10px 20px;
color:white; 
background:#0B93F6;
border-radius:25px;
float: right;

&:before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}

&:after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
background:white;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
}
}
.from-them {
position:relative;
padding:10px 20px;
background:#E5E5EA;
border-radius:25px;
color: black;
  float: left;

&:before {
content:"";
position:absolute;
z-index:2;
bottom:-2px;
left:-7px;
height:20px;
border-left:20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}

&:after {
content:"";
position:absolute;
z-index:3;
bottom:-2px;
left:4px;
width:26px;
height:20px;
background:white;
border-bottom-right-radius: 10px;
-webkit-transform:translate(-30px, -2px);
}
}


HTML
<section>
    <div class="from-me">
      <p>Hey there! What's up?</p>
    </div>
  <div class="clear"></div>
    <div class="from-them">
      <p>Checking out iOS7 you know..</p>
    </div>
  <div class="clear"></div>
    <div class="from-me">
      <p>Check out this bubble!</p>
    </div>
  <div class="clear"></div>
    <div class="from-them">
      <p>It's pretty cool!</p>
    </div>
  <div class="clear"></div>
    <div class="from-me">
      <p>Yeah it's pure CSS &amp; HTML</p>
    </div>
  <div class="clear"></div>
    <div class="from-them">
      <p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p>
    </div>
  </section>




CSS3 Hiệu Ứng Bubble 3


CSS
/* Bit of normalisation */

body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

img {
display: block;
height: auto;
max-width: 100%;
}

.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}

/* .bubble */

.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: left;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}

.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}

.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}

.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}

.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: right;
}

.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}

.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}


HTML
<div class="container">


<div class="bubble">
Blue text bubble
</div>

<div class="bubble bubble--alt">
Green text bubble
</div>

<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>

<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>

<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>

</div>


Đây là một số hiệu ứng CSS3 cho khung chat mà mình sưu tâm được. Hi vọng nó sẽ hữu ích cho các bạn