Here is my first try at creating a logo with css3 and html markup only. No images were used. That is the power of css3.
yeah. I know its missing the rounding. I’ll get to that later.
Html Markup
Here is my first try at creating a logo with css3 and html markup only. No images were used. That is the power of css3.
yeah. I know its missing the rounding. I’ll get to that later.
Html Markup
CSS Markup
body { background: #fff; } #arrow .canvas { background: #00539B; width: 490px; height: 100px; margin: 100px 0 0 90px; } #arrow .RtRtAngleTriangle { width:0; height: 0; line-height: 0; border-top: 100px solid #fff; border-right: 15px solid #00539B; position: absolute; } #arrow .LtRtAngleTriangle { width:0; height: 0; line-height: 0; border-top: 80px solid #fff; border-left: 15px solid #00539B; position: absolute; } #arrow .LtRt45AngleTriangle { width:0; height: 0; line-height: 0; border-top: 40px solid #fff; border-left: 30px solid #00539B; position: absolute; } #arrow .LtRt45AngleTriangle2 { width:0; height: 0; line-height: 0; border-top: 26px solid #fff; border-left: 20px solid #00539B; position: absolute; } #arrow .IsoTrapezoid { width:10px; height: 0; line-height: 0; border-bottom: 80px solid #fff; border-right: 15px solid #00539B; border-left: 15px solid #00539B; position: absolute; } #arrow .Rectangle { background: #fff; clip:rect(0 75px 201px 0); position: absolute; width: 10px; height: 100px; } #arrow .t1 { left:98px; top:100px; } #arrow .t2 { left: 120px; top:120px; } #arrow .t3 { left: 165px; top: 100px; } #arrow .r1 { left: 180px; top: 100px; width: 5px; height: 80px; } #arrow .r2 { left: 210px; top: 120px; width: 15px; height: 80px; } #arrow .t4 { left: 225px; top: 160px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #arrow .r3 { left: 250px; top: 100px; width: 20px; height: 53px; } #arrow .t5 { left: 250px; top: 153px; } #arrow .r2a { left: 300px; top: 120px; width: 15px; height: 80px; } #arrow .t4a { left: 315px; top: 160px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #arrow .r3a { left: 340px; top: 100px; width: 20px; height: 53px; } #arrow .t5a { left: 340px; top: 153px; } #arrow .r4 { left: 360px; top: 173px; height: 5px; width: 25px; } #arrow .r5 { left: 385px; top: 120px; height: 58px; width: 15px; } #arrow .r6 { left: 390px; top: 120px; height: 5px; width: 35px; } #arrow .r7 { left: 425px; top: 120px; height: 80px; width: 5px; } #arrow .t6 { left: 425px; top: 120px; -moz-transform: rotate(180deg) scalex(0.6); -webkit-transform: rotate(180deg) scalex(0.6); transform: rotate(180deg) scalex(0.6); } #arrow .t7 { left: 445px; top: 100px; -moz-transform: rotate(180deg) scalex(0.6); -webkit-transform: rotate(180deg) scalex(0.6); transform: rotate(180deg) scalex(0.6); } #arrow .t8 { left: 485px; top: 120px; -moz-transform: scalex(0.6); -webkit-transform: scalex(0.6); transform: scalex(0.6); } #arrow .t9 { left: 525px; top: 100px; -moz-transform: rotate(180deg) scalex(0.6); -webkit-transform: rotate(180deg) scalex(0.6); transform: rotate(180deg) scalex(0.6); } #arrow .t10 { left:573px; top:100px; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
Inspiration from:
http://www.ecsspert.com/twitter.php