Tạo biểu tượng chat với CSS3

Hôm nay mình sẽ mang đến cho các bạn một icon chat cực cool và được thực hiện hoàn toàn bằng CSS3 chứ không phải dùng bất kì một file hình ảnh nào khác. Qua bài viết này, các bạn sẽ học được cách tạo hiệu ứng bóng đổ, tạo các hình theo ý muốn.

Xem Demo | Download

HTML

Cấu trúc html cho icon này rất đơn giản, chỉ bao gồm 3 thẻ div được ghép lồng như sau :

<div class="wrapper">
	<div class="inner i1"></div>
	<div class="inner i2"></div>
</div>

CSS

Và đoạn css bên dưới sẽ tạo các biểu tượng và hiệu ứng , mình có ghi chú ở từng mục cho các bạn tham khảo.

    box-sizing: border-box;
}

body {
    background: #c6c6c6;
}

.wrapper {
    awidth: 200px;
    height: 200px;
    margin: 40px auto;
    position: relative;
    background: #f1edec;
    border-radius: 35px;
    /* Some shadows */
    box-shadow:
        inset 0 1px 1px white,
        inset 0 -5px 2px rgba(0,0,0,0.15),
        0 0 10px rgba(0,0,0,0.2);
}

/* Hieu ung bong do*/

.wrapper:after {
    content: "";
    awidth: 100%;
    height: 8px;
    bottom: 3px;
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    box-shadow:
        0 10px 5px rgba(0,0,0,0.15);
}

/* Tao bong bong. */
.inner {
    position: absolute;
    awidth: 100px;
    height: 75px;
    border-radius: 50%;
    background: #ECECEC;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow:
        inset 0 5px 0 rgba(255,255,255,0.3),
        inset 0 -5px 0 rgba(180,180,180,0.1),
        0 0 10px rgba(0,0,0,0.1),
        0 3px 3px rgba(0,0,0,0.2);
}

.i1 {
    left: 20px;
    top: 45px;
}

.i2 {
    background: #EFEFEF;
    left: 80px;
    top: 65px;
}

/* hinh mui ten */

.inner:after {
    content: "";
    awidth: 10px;
    height: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    border-top: none;
    border-left: none;
    display: block;
    position: absolute;
    bottom: -5px;
    left: 60%;
    background: #E9E9E9;
    box-shadow: 0 5px 2px rgba(0,0,0,0.2);
    transform: skewY(35deg);
}

.i1:after {
    transform: skewY(-35deg);
    left: 30%;
    border-right: none;
    border-left: 1px solid rgba(0,0,0,0.1);
}

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

Chuyên Mục: Css

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