twitter logo

dabblet.css

/**
* twitter logo
**/
#icon {
background: url(http://cl.ly/0A143w1d110H2S032J0j/Photoshop%20Document.png) no-repeat 50% 50%;
font-size: 10px;
height: 200px;
overflow: hidden;
position: relative;
width: 290px;
}
.block,
.mask {
position: absolute;
}
.block {
background: green;
/* background: #fff */
}
#icon,
.mask {
background: red;
/* background: #33ccff; */
}


.twitter1,
.twitter3 { 
    border-radius:56px/33px;
    height:33px;
    width:56px;
}
.twitter1 { 
    clip: rect(17px 70px 40px 0);
    left: 234px;
    top: 72px;
    transform: skewy(-4deg);
}
.twitter3 { 
    clip:rect(18px 70px 40px 0);
    left:232px;
    top:56px;
    transform: skewy(-5deg);
}
.twitter2,
.twitter4 { 
    border-radius:38px/10px;
    height: 10px;
    width:38px;
}
.twitter2 { 
    left:254px;
    top:83px;
    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 130px 170px 0px);
    height: 167px;
    left: -5px;
    width: 258px;
}
.twitter7 { 
    border-radius: 259px/208px;
    bottom: 0;
    clip: rect(91px 260px 220px 127px);
    height: 208px;
    left: -3px;
    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;
    transform: rotate(27deg);
}
.twitter10 { 
    clip:rect(26px 20px 50px 0px);
    left: 149px;
    top: -20px;
    transform: rotate(27deg);
}
.twitter11 { 
    height: 10px;
    left: 182px;
    top: 3px;
    transform: rotate(20deg);
    width: 10px;
}
.twitter12 { 
    border-radius: 8px/30px;
    height: 30px;
    left: 198px;
    top: -3px;
    transform: rotate(66deg);
    width: 8px;
}
.twitter13 { 
    border-radius: 7px 13px 0 0/64px;
    height: 44px;
    left: 180px;
    top: -8px;
    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;
    transform: rotate(24deg) skewx(32deg);
    width: 137px;
}
.twitter15 { 
    border-radius: 36px/58px;
    clip: rect(14px 8px 60px 0);
    height: 58px;
    left: 48px;
    top: 5px;
    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;
    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;
    transform: skewx(23deg);
    width: 40px;
}
.twitter20 {
    border-radius: 40px 60px/34px;
    height: 34px;
    left: 86px;
    top: 109px;
    transform: rotate(-20deg) skewx(10deg) scale(0.9);
    width: 50px;
}
.twitter21 {
    background: none !important;
    border: 56px solid green;
    border-right: 59px solid transparent;
    border-top: 33px solid transparent;
    height: 0;
    left: 77px;
    top: 30px;
    transform: skewx(30deg);
    width: 0;
}
.twitter22 {
    background: none !important;
    border: 20px solid transparent;
    border-right-color: green;
    border-bottom-color: green;
    top: 54px;
    left: 130px;
}

dabblet.html

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

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}