Create Twitter Logo | Only with CSS

Sebenarnya dengan hanya CSS.. kita bisa membuat logo dan gambar apa saja.. hanya dengan membtuhkan kesabaran dan ketelitian.. Tidak hanya itu, jika kita mendesain dengan CSS, tentu saja, gambar ini dapat di-load dengan sangat ringan dan cepat..

Ini Screenshot hasilnya : (cantik y? jika tidak percaya, silahkan dicoba sendiri.. :D)

Bagaimana cara membuatnya?? Here we go :

Untuk kode HTML :

<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 class="twitter23 draw"></div>
            <div class="twitter24 draw"></div>
            <div class="twitter25 draw"></div>
            <div class="twitter26 draw"></div>
            <div class="twitter27 draw"></div>
        </div>
    </div>
</div>

Dan ini untuk kode CSS nya :

.canvas { 
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(250,250,250,0.2) inset, 0 2px 2px RGBA(0,0,0,0.5);
    height: 300px;
    overflow: hidden;
    position: relative;
    text-indent:-9999px;
    width: 530px;
    z-index: 10;
}
.icon, .icon * {
    position: absolute;
}#twitter .canvas { 
    background: #33ccff ;
}
#twitter .icon { 
    height: 200px;
    left:105px;
    position: absolute;
    top:50px;
    width:290px;
}
#twitter .draw { 
    background: white;
    opacity:1.6;
}
#twitter .mask { 
    background: #33ccff;
    opacity:1.6;
}
.twitter1,
.twitter3 { 
    border-radius:56px/33px;
    height:33px;
    width:56px;
}
.twitter1 { 
    clip: rect(17px 70px 40px 0);
left: 234px;
top: 72px;
-moz-transform: skewy(-4deg);
-webkit-transform: skewy(-4deg);
transform: skewy(-4deg);
}
.twitter3 { 
    clip:rect(18px 70px 40px 0);
    left:232px;
    top:56px;
    -moz-transform: skewy(-5deg);
    -webkit-transform: skewy(-5deg);
    transform: skewy(-5deg);
}
.twitter2,
.twitter4 { 
    border-radius:38px/10px;
    height: 10px;
    width:38px;
}
.twitter2 { 
    left:254px;
    top:83px;
    -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;
    width: 148px;
}
.twitter6 { 
    border-radius: 258px/167px;
    bottom: 0;
    clip: rect(50px 120px 170px 0px);
    height: 167px;
    left: -5px;
    width: 258px;
}
.twitter7 { 
    border-radius: 259px/208px;
    bottom: 0;
    clip: rect(91px 260px 220px 117px);
    height: 208px;
    left: -3px;
    -moz-transform: skewx(-5deg);;
    -webkit-transform: skewx(-5deg);
    transform: skewx(-5deg);
    width: 259px;
}
.twitter8 { 
    border-radius: 149px;
    height: 149px;
    left: -22px;
    top: 16px;
    width: 149px;
}
.twitter9, .twitter10 { 
    border-radius: 63px/157px;
    height: 157px;
    width: 63px;
}
.twitter9 { 
    clip:rect(49px 20px 160px 0px);
    left: 149px;
    top: -20px;
    -moz-transform: rotate(27deg);
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
}
.twitter10 { 
    clip:rect(26px 20px 50px 0px);
    left: 149px;
    top: -20px;
    -moz-transform: rotate(27deg);
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
}
.twitter11 { 
    height: 10px;
    left: 182px;
    top: 3px;
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    width: 10px;
}
.twitter12 { 
    border-radius: 8px/30px;
    height: 30px;
    left: 198px;
    top: -3px;
    -moz-transform: rotate(66deg);
    -webkit-transform: rotate(66deg);
    transform: rotate(66deg);
    width: 8px;
}
.twitter13 { 
    border-radius: 7px 13px 0 0/64px;
    height: 44px;
    left: 180px;
    top: -8px;
    -moz-transform: rotate(53deg);
    -webkit-transform: rotate(53deg);
    transform: rotate(53deg);
    width: 9px;
}
.twitter14 { 
    border-radius: 27px 137px 137px 137px/50px;
    clip: rect(0 130px 7px 14px);
    height: 50px;
    left: 29px;
    top: 47px;
    -moz-transform: rotate(24deg) skewx(32deg);
    -webkit-transform: rotate(24deg) skewx(32deg);
    transform: rotate(24deg) skewx(32deg);
    width: 137px;
}
.twitter15 { 
    border-radius: 36px/58px;
    clip: rect(14px 8px 60px 0);
    height: 58px;
    left: 48px;
    top: 5px;
    -moz-transform: rotate(-31deg);
    -webkit-transform: rotate(-31deg);
    transform: rotate(-31deg);
    width: 36px;
}
.twitter16 {
    clip: rect(0px 30px 3px 0);
    border-radius: 30px/10px;
    height: 10px;
    left: 50px;
    top: 59px;
    width: 30px;
}
.twitter17   {
    clip: rect(31px 76px 62px 0);
    border-radius: 80px/62px;
    height: 62px;
    left: 51px;
    top: 31px;
    -moz-transform: skewx(10deg);
    -webkit-transform: skewx(10deg);
    transform: skewx(10deg);
    width: 80px;
}
.twitter18 {
    clip: rect(0px 30px 7px 0);
    border-radius: 30px/20px;
    height: 20px;
    left: 64px;
    top: 91px;
    width: 30px;
}
.twitter19 {
    clip: rect(16px 40px 34px 0);
    border-radius: 40px 40px 40px 40px/34px;
    height: 34px;
    left: 65px;
    top: 81.5px;
    -moz-transform: skewx(23deg);
    -webkit-transform: skewx(23deg);
    transform: skewx(23deg);
    width: 40px;
}
.twitter20 {
    border-radius: 40px 60px/34px;
    height: 34px;
    left: 86px;
    top: 109px;
    -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);
    width: 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;
    -moz-transform: skewx(30deg);
    -webkit-transform: skewx(30deg);
    transform: skewx(30deg);
    width: 0;
}
.twitter22 {
    background: none !important;
    border: 20px solid transparent;
    border-right-color: white;
    border-bottom-color: white;
    top: 54px;
    left: 130px;
}

Ini hanya berlaku untuk Chrome dan Safari saja..
Klo untuk Firefox hasilnya jadi kayak gini :

Untuk melihat lebih banyak logo lainnya dapat dikunjungi di web berikut ini :
Sumber : http://www.ecsspert.com/twitter.php