Fun was had by all on the day 10 of the course in Essential HTML & CSS Skills at Friends of Design. We learnt how to draw shapes in CSS

You don’t have to use images

With the advances in CSS3 you can build sites with visual impact without using images. Some use these methods so affectively you would swear it is flash. Here are a few examples:

CSS3 Transform

In todays CSS3 exercise we used plenty of the properties we are already familiar with, most of them required positioning, and border properties, but we needed to learn the transform properties for more complex shapes. The CSS3 transform property allows you to manipulate a HTML element in the following ways:

  • rotate: rotates an element
  • translate: moves an element horizontally and vertically
  • skew: distorts an element horizontally and vertically
  • scale: increases or decreases the size of an element

Understanding some of these properties and how they effect the results can be a little counter intuitive. It is evident that a lot of experimentation is the only way to fully master them. A good way to investigate the methods is to find good examples online and inspect the code with Firebug, no developer should be without this add-on in their browser.

Code

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>CSS3</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>

<body>
	<div id="container">
			<h2>CSS Shapes</h2>
				
				<div class="shape">
					<div id="circle"></div>
				</div>
				<div class="shape">
					<div id="oval"></div>
				</div>
				<div class="shape">
					<div id="up-triangle"></div>
				</div>	
				<div class="shape">	
					<div id="down-triangle"></div>
				</div>
				<div class="shape">
					<div id="left-triangle"></div>
				</div>
				<div class="shape">
					<div id="right-triangle"></div>
				</div>
				<div class="shape">
					<div id="trapezium"></div>
				</div>	
				<div class="shape">	
					<div id="diamond"></div>
				</div>
				<div class="shape">
					<div id="parallelogram"></div>
				</div>
				<div class="shape">
					<div id="six-point-star"></div>
				</div>
				<div class="shape">
					<div id="twelve-point-star"></div>
				</div>
				<div class="shape">
					<div id="octagon"></div>
				</div>
				<div class="shape">
					<div id="speech-bubble"></div>
				</div>
				<div class="shape">
					<div id="heart"></div>
				</div>

	</div>
<body>

CSS


/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */


*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
input:focus {outline:0;}
input::-moz-focus-inner 
{ 
    border: 0;
    padding: 0;
}


strong { font-weight:bold }
em { font-style:italic }
a img { border:none } 
a:focus {
	outline: none
}


body {
font-family:Helvetica;
text-align:center;
color:#333;
}

#container {
width:600px;
padding:40px 0;
margin:0 auto;
text-align:left;
}

#container div {
float:left;
}

h2 {
font-size:24px;
margin:0 0 40px;
}



.shape {
width: 150px;
height:150px;
}

#circle {
	background:red;
	width:140px;
	height:140px;
	-moz-border-radius:70px;
	-ms-border-radius:70px;
	-o-border-radius:70px;	
	-webkit-border-radius:70px;
	border-radius:70px;
}

#oval {
	background:purple;
	width:200px;
	height:100px;
	-moz-border-radius:100px / 50px;
	-ms-border-radius:100px / 50px;
	-o-border-radius:100px / 50px;	
	-webkit-border-radius:100px / 50px;
	border-radius:100px / 50px;
}

#up-triangle {
	width:0;
	height:0;
	border-bottom: 120px solid green;
	border-left:60px solid transparent;
	border-right:60px solid transparent;
	margin-left: 46px;
}

#down-triangle {
	width:0;
	height:0;
	border-top: 120px solid green;
	border-left:60px solid transparent;
	border-right:60px solid transparent;		
}

#left-triangle {
	width:0;
	height:0;
	border-right: 100px solid orange;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;		
}

#right-triangle {
	width:0;
	height:0;
	border-left: 100px solid orange;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;		
}

#trapezium {
	width:80;
	height:0;
	border-bottom:80px solid blue;
	border-left:40px solid transparent;
	border-right:40px solid transparent;
}

#diamond {
	width:80px;
	height:80px;	
	background:purple;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

#parallelogram {
	width:130px;
	height:75px;
	background:green;
	-moz-transform:skew(20deg);
	-webkit-transform:skew(20deg);
	transform:skew(20deg);	
}

#six-point-star {
	position:absolute;
	width:0;
	height:0;
	border-left:50px solid transparent;
	border-right:50px solid transparent;	
	border-bottom:80px solid red;
}

#six-point-star:after {
	position:absolute;
	content:"";
	width:0;
	height:0;
	border-left:50px solid transparent;
	border-right:50px solid transparent;	
	border-top:80px solid red;
	margin:30px 0 0 -50px;
}

#twelve-point-star {
	height:100px;
	width:100px;
	border:1px solid #333;
	position:absolute;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}

#twelve-point-star:before {
	height:100px;
	width:100px;
	border:1px solid #333;
	position:absolute;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	content:"";
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	transform:rotate(30deg);
}

#twelve-point-star:after {
	height:100px;
	width:100px;
	border:1px solid #333;
	position:absolute;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	content:"";
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg);
}

#octagon {
	width:100px;
	height:100px;
	background:blue;	
}

#octagon:before {
	content:"";
	position:absolute;
	height:0;
	width:40px;
	border-bottom:30px solid blue;
	border-left:30px solid white;
	border-right:30px solid white;
}

#octagon:after {
	content:"";
	position:absolute;
	height:0;
	width:40px;	
	border-top:30px solid blue;
	border-left:30px solid white;
	border-right:30px solid white;
	margin:70px 0 0 0;
}

#heart {
	position:relative;	
}

#heart:before, #heart:after {
	content:"";
	position:absolute;
	background:red;
	width:70px;
	height:115px;
	left:70px;
	top:0;
	-moz-border-radius:50px 50px 0 0;
	-webkit-border-radius:50px 50px 0 0;	
	border-radius:50px 50px 0 0;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-moz-transform-origin: 0 100%;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

#heart:after {
	left:0;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	-moz-transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

Browser interpretation

Read the rest of the the Friends of Design: HTML and CSS series here