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.
My Version
yeah. I know its missing the rounding. I’ll get to that later.
Original Version
Html Markup
Css3 – No Images
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
Nice work! I’m glad my website inspired you! Keep it going!
Hiya, I am really glad I’ve found this info. Today bloggers publish only about gossips and web and this is actually frustrating. A good web site with interesting content, that’s what I need. Thanks for keeping this website, I will be visiting it. Do you do newsletters? Can’t find it.