Comment réaliser le logo Twitter entièrement en CSS ni image ni JS

C’est pas une blague mais c’est possible de réaliser le logo de Twiiter et autre logos à l’aide du HTML et CSS pas besoin d’un fichier graphique en utilisant uniquement du code, et voici comment :

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>

CSS

.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;
}

Non articles similaires.