Thiết kế Logo Twitter bằng CSS3 ? Tại sao không ?

Twitter là một trong những mạng xã hội phổ biến nhất hiện nay, mặc dù ở Việt Nam thì số lượng người dùng mạng xã hội này không bằng so với Facebook. Hôm nay mình sẽ chia sẻ cho các bạn cách thiết kế biểu tượng của mạng xã hội này bằng CSS3. Logo Twitter sẽ khó hơn so với những bài viết trước đây của mình như logo Adidas, logo Pepsi, Logo Nike, logo HTML5 … vì thiết kế hình con chim sẽ hơi phức tạp một chút.

Xem Demo | Download

HTML

Để tạo logo twitter, chúng ta cần khung html như sau :

<div id="twitter">
   <div class="canvas">
         <div class="icon">
              <div class="twitter1 draw"></div>
              <div class="twitter2 mask"></div>
              <div class="twitter3 draw"></div>
              <div class="twitter4 mask"></div>
              <div class="twitter5 draw"></div>
              <div class="twitter6 draw"></div>
              <div class="twitter7 draw"></div>
              <div class="twitter8 mask"></div>
              <div class="twitter9 draw"></div>
              <div class="twitter10 draw"></div>
              <div class="twitter11 mask"></div>
              <div class="twitter12 draw"></div>
              <div class="twitter13 draw"></div>
              <div class="twitter14 draw"></div>
              <div class="twitter15 draw"></div>
              <div class="twitter16 draw"></div>
              <div class="twitter17 draw"></div>
              <div class="twitter18 draw"></div>
              <div class="twitter19 draw"></div>
              <div class="twitter20 draw"></div>
              <div class="twitter21 draw"></div>
              <div class="twitter22 draw"></div>
        </div>
   </div>
</div>

CSS

Và chi tiết của việc thiết kế logo twitter như sau :

#twitter .canvas {
    background: #33ccff ;
	height: 304px;
    awidth:540px;
}
#twitter .canvas .icon {
    height: 200px;
    left: 125px;
    position: absolute;
    top: 52px;
    awidth: 290px;
}
#twitter .canvas .draw {
    background: white;
}
#twitter .canvas .mask {
    background: #33ccff;
}
.twitter1,
.twitter3 {
    border-radius:56px/33px;
    height:33px;
    awidth:56px;
}
.twitter1 {
    clip: rect(17px 70px 40px 0);
    left: 234px;
    top: 72px;
    -ms-transform: skewy(-4deg);
    -o-transform: skewy(-4deg);
    -moz-transform: skewy(-4deg);
    -webkit-transform: skewy(-4deg);
    transform: skewy(-4deg);
}
.twitter3 {
    clip:rect(18px 70px 40px 0);
    left:232px;
    top:56px;
    -ms-transform: skewy(-5deg);
    -o-transform: skewy(-5deg);
    -moz-transform: skewy(-5deg);
    -webkit-transform: skewy(-5deg);
    transform: skewy(-5deg);
}
.twitter2,
.twitter4 {
    border-radius:38px/10px;
    height: 10px;
    awidth:38px;
}
.twitter2 {
    left:254px;
    top:83px;
    -ms-transform:rotate(5deg);
    -o-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg);
}
.twitter4 {
    left:251px;
    top:67px;
}
.twitter5 {
    border-radius: 148px;
    clip: rect(0 150px 72px 60px);
    height: 148px;
    left: 109px;
    top: 16px;
    awidth: 148px;
}
.twitter6 {
    border-radius: 258px/167px;
    bottom: 0;
    clip: rect(50px 130px 170px 0px);
    height: 167px;
    left: -5px;
    awidth: 258px;
}
.twitter7 {
    border-radius: 259px/208px;
    bottom: 0;
    clip: rect(91px 260px 220px 127px);
    height: 208px;
    left: -3px;
    -ms-transform: skewx(-5deg);
    -o-transform: skewx(-5deg);
    -moz-transform: skewx(-5deg);
    -webkit-transform: skewx(-5deg);
    transform: skewx(-5deg);
    awidth: 259px;
}
.twitter8 {
    border-radius: 149px;
    height: 149px;
    left: -22px;
    top: 16px;
    awidth: 149px;
}
.twitter9, .twitter10 {
    border-radius: 63px/157px;
    height: 157px;
    awidth: 63px;
}
.twitter9 {
    clip:rect(49px 20px 160px 0px);
    left: 149px;
    top: -20px;
    -ms-transform: rotate(27deg);
    -o-transform: rotate(27deg);
    -moz-transform: rotate(27deg);
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
}
.twitter10 {
    clip:rect(26px 20px 50px 0px);
    left: 149px;
    top: -20px;
    -ms-transform: rotate(27deg);
    -o-transform: rotate(27deg);
    -moz-transform: rotate(27deg);
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
}
.twitter11 {
    height: 10px;
    left: 182px;
    top: 3px;
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    awidth: 10px;
}
.twitter12 {
    border-radius: 8px/30px;
    height: 30px;
    left: 198px;
    top: -3px;
    -ms-transform: rotate(66deg);
    -o-transform: rotate(66deg);
    -moz-transform: rotate(66deg);
    -webkit-transform: rotate(66deg);
    transform: rotate(66deg);
    awidth: 8px;
}
.twitter13 {
    border-radius: 7px 13px 0 0/64px;
    height: 44px;
    left: 180px;
    top: -8px;
    -ms-transform: rotate(53deg);
    -o-transform: rotate(53deg);
    -moz-transform: rotate(53deg);
    -webkit-transform: rotate(53deg);
    transform: rotate(53deg);
    awidth: 9px;
}
.twitter14 {
    border-radius: 27px 137px 137px 137px/50px;
    clip: rect(0 130px 7px 14px);
    height: 50px;
    left: 29px;
    top: 47px;
    -ms-transform: rotate(24deg) skewx(32deg);
    -o-transform: rotate(24deg) skewx(32deg);
    -moz-transform: rotate(24deg) skewx(32deg);
    -webkit-transform: rotate(24deg) skewx(32deg);
    transform: rotate(24deg) skewx(32deg);
    awidth: 137px;
}
.twitter15 {
    border-radius: 36px/58px;
    clip: rect(14px 8px 60px 0);
    height: 58px;
    left: 48px;
    top: 5px;
    -ms-transform: rotate(-31deg);
    -o-transform: rotate(-31deg);
    -moz-transform: rotate(-31deg);
    -webkit-transform: rotate(-31deg);
    transform: rotate(-31deg);
    awidth: 36px;
}
.twitter16 {
    clip: rect(0px 30px 3px 0);
    border-radius: 30px/10px;
    height: 10px;
    left: 50px;
    top: 59px;
    awidth: 30px;
}
.twitter17   {
    clip: rect(31px 76px 62px 0);
    border-radius: 80px/62px;
    height: 62px;
    left: 51px;
    top: 31px;
    -ms-transform: skewx(10deg);
    -o-transform: skewx(10deg);
    -moz-transform: skewx(10deg);
    -webkit-transform: skewx(10deg);
    transform: skewx(10deg);
    awidth: 80px;
}
.twitter18 {
    clip: rect(0px 30px 7px 0);
    border-radius: 30px/20px;
    height: 20px;
    left: 64px;
    top: 91px;
    awidth: 30px;
}
.twitter19 {
    clip: rect(16px 40px 34px 0);
    border-radius: 40px 40px 40px 40px/34px;
    height: 34px;
    left: 65px;
    top: 81.5px;
    -ms-transform: skewx(23deg);
    -o-transform: skewx(23deg);
    -moz-transform: skewx(23deg);
    -webkit-transform: skewx(23deg);
    transform: skewx(23deg);
    awidth: 40px;
}
.twitter20 {
    border-radius: 40px 60px/34px;
    height: 34px;
    left: 86px;
    top: 109px;
    -ms-transform: rotate(-20deg) skewx(10deg) scale(0.9);
    -o-transform: rotate(-20deg) skewx(10deg) scale(0.9);
    -moz-transform: rotate(-20deg) skewx(10deg) scale(0.9);
    -webkit-transform: rotate(-20deg) skewx(10deg) scale(0.9);
    transform: rotate(-20deg) skewx(10deg) scale(0.9);
    awidth: 50px;
}
.twitter21 {
    background: none !important;
    border: 56px solid white;
    border-right: 59px solid transparent;
    border-top: 33px solid transparent;
    height: 0;
    left: 77px;
    top: 30px;
    -ms-transform: skewx(30deg);
    -o-transform: skewx(30deg);
    -moz-transform: skewx(30deg);
    -webkit-transform: skewx(30deg);
    transform: skewx(30deg);
    awidth: 0;
}
.twitter22 {
    background: none !important;
    border: 20px solid transparent;
    border-right-color: white;
    border-bottom-color: white;
    top: 54px;
    left: 130px;
}
/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

Như vậy là chúng ta đã có một logo twitter để dùng chia sẻ bài viết của mình trên mạng xã hội mà không cần phải dùng bất kì phần mềm tạo ảnh hay đoạn script nào cả. Các bạn chỉ cần copy và sử dụng thôi.

Chuyên Mục: Css

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