html Archives - Greg Tam

Tag: html

Css3 – No Images

October 27, 2011 by Greg Tam·2 Comments

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

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