Steve Jobs Says – a CSS Illustration - Snippet

Preview
HTML
CSS
JS

<div class="container_12">
	
	<div class="steve-container">
		<span class="beard-shape"></span>
	
		<span class="face-shape">
		   <span class="lhair-shape"></span>
		   <span class="rhair-shape"></span>
		   <span class="chair-shape"></span>
		   <span class="chair-shape2"></span>
		
		   <span class="lbrow"></span>
		   <span class="rbrow"></span>
		
		   <span class="leye-shape"><span class="pupil"></span></span>
		   <span class="lspec-shape-dark"></span>
		   <span class="lspec-shape"></span>
		
		   <span class="reye-shape"><span class="pupil"></span></span>
		   <span class="rspec-shape-dark"></span>
		   <span class="rspec-shape"></span>
		
		   <span class="nose-bridge"></span>
		   <span class="nose-bottom"></span>
		   <span class="spec-bridge"></span>
		</span>
		
		<span class="head-clip"></span>
		<span class="shirt"></span>
		
		<div class="mouth-wrap">
			<div class="mouth"></div>
		</div>
	
		<p class="balloon">Real Artists Ship.</p>
		<span class="balloon-stem"></span>
		<p class="attr"> <a href="http://www.ghostinthepixel.com/?p=24">Steve Jobs, 1983</a></p>
	
	</div><!--steve_container-->
	<div class="grid_10 prefix_1 suffix_1">
	<!--<p class="note" style="padding: 20px 0px;font: 11px Georgia, serif;font-style: italic;line-height:1.6;">
	<strong>A Note:</strong> <br />
	This post uses some newer internetting technologies to render our friend Steve&#8217;s face. There are no images here, the picture is created from pure HTML/CSS. If you are not using a webkit enabled browser (like Safari or Chrome) this post may look like a hot mess to you. If so, click <a href="http://cl.ly/1H1B3n2O0H1d1T3n1V2F">here</a> to see what It should look like.</p>-->
	</div>
</div><!--container_12-->

/* Eric Meyer CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html { height: 100%; }

body {
	line-height: 1;
	background: #fff;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*************************

	Drawing

*************************/

.steve-container a {
	color: #C00;
	}

.steve-container a:hover {
	color: red;
	}

body {
	background: rgba(230, 242, 255, 0.3) top left repeat url(https://www.travisneilson.com/wp-content/themes/v6/images/stripe-bg.png);
	}


.steve-container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	height: 600px;
	width: 940px;
	background: rgba(230, 242, 255, 1);
	vertical-align: middle;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
	
	-webkit-box-shadow: /*2px 2px 0px rgba(255, 255, 255, 0.7)*/ 0px 0px 15px rgba(0, 0, 0, 0.2);
	   -moz-box-shadow: /*2px 2px 0px rgba(255, 255, 255, 0.7)*/ 0px 0px 15px rgba(0, 0, 0, 0.2);
	        box-shadow: /*2px 2px 0px rgba(255, 255, 255, 0.7)*/ 0px 0px 15px rgba(0, 0, 0, 0.2);
	}

.face-shape {
	display: block;
	position: absolute;
	top: 30px;
	right:80px;
	height: 310px;
	width: 350px;
	/*background: rgba(251, 228, 203, 1);*/
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	overflow: hidden;
	background: #FBF4E9; /* old browsers */
	background: -moz-linear-gradient(left, #FBF4E9 0%, #FBE4CB 55%); /* firefox */	
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FBF4E9), color-stop(55%,#FBE4CB)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF4E9', endColorstr='#FBE4CB',GradientType=1 ); /* ie */	}

.beard-shape {
	display: block;
	position: absolute;
	top: 30px;
	right:80px;
	height: 425px;
	width: 350px;
	background: rgba(231, 214, 192, 1);
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	}
	
.head-clip {
	display: block;
	position: absolute;
	top: -70px;
	right: -20px;
	height: 425px;
	width: 350px;
	-webkit-border-radius: 300px;
	-moz-border-radius: 300px;
	border-radius: 300px;
	border: solid rgba(230, 242, 255, 1) 100px;
	}


.lhair-shape {
	display: block;
	position: absolute;
	top: 10px;
	left:-180px;
	border-width: 230px 140px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(230, 221, 219, 1);
	border-top-color: rgba(230, 221, 219, 1);
	border-left-color: transparent;
	border-right-color: transparent;	
	}
.rhair-shape {
	display: block;
	position: absolute;
	top: 10px;
	right:-180px;
	border-width: 230px 140px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(230, 221, 219, 1);
	border-top-color: rgba(230, 221, 219, 1);
	border-left-color: transparent;
	border-right-color: transparent;	
	}
.chair-shape {
	display: block;
	position: absolute;
	top: 0px;
	right:60px;
	border-width: 25px 140px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(230, 221, 219, 1);
	border-top-color: rgba(230, 221, 219, 1);
	border-left-color: transparent;
	border-right-color: transparent;	
	}
.chair-shape2 {
	display: block;
	position: absolute;
	top: 10px;
	right:60px;
	border-width: 25px 60px 0px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(230, 221, 219, 1);
	border-top-color: rgba(230, 221, 219, 1);
	border-left-color: transparent;
	border-right-color: transparent;	
	}
	
.leye-shape {
	display: block;
	position: absolute;
	top: 180px;
	left:80px;
	height: 40px;
	width: 40px;
	background: #000;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	overflow: hidden;
	}
	.pupil {
		display: block;
		position: absolute;
		top: 7px;
		left:7px;
		height: 10px;
		width: 10px;
		background: #fff;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		overflow: hidden;
		}
.lspec-shape {
	display: block;
	position: absolute;
	top: 140px;
	left:50px;
	height: 100px;
	width: 100px;
	background: rgba(255, 255, 255, .6);
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	overflow: hidden;
	}
	.lspec-shape-dark {
		display: block;
		position: absolute;
		top: 142px;
		left:52px;
		height: 100px;
		width: 100px;
		background: rgba(179, 179, 179, .6);
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		overflow: hidden;
		}

.reye-shape {
	display: block;
	position: absolute;
	top: 180px;
	right:80px;
	height: 40px;
	width: 40px;
	background: #000;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	overflow: hidden;
	}
	.pupil {
		display: block;
		position: absolute;
		top: 7px;
		left:7px;
		height: 10px;
		width: 10px;
		background: #fff;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		overflow: hidden;
		}
.rspec-shape {
	display: block;
	position: absolute;
	top: 140px;
	right:50px;
	height: 100px;
	width: 100px;
	background: rgba(255, 255, 255, .6);
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	overflow: hidden;
	}
	.rspec-shape-dark {
		display: block;
		position: absolute;
		top: 142px;
		right:48px;
		height: 100px;
		width: 100px;
		background: rgba(179, 179, 179, .6);
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;
		overflow: hidden;
		}

.lbrow {
	display: block;
	position: absolute;
	top: 120px;
	left:50px;
	height: 20px;
	width: 110px;
	background: #000;
	-webkit-transform:rotate(8deg);
	}
.rbrow {
	display: block;
	position: absolute;
	top: 130px;
	right:50px;
	height: 20px;
	width: 110px;
	background: #000;
	overflow: hidden;
	}
	
.spec-bridge {
	display: block;
	position: absolute;
	top: 180px;
	left:150px;
	height: 10px;
	width: 50px;
	background: rgba(179, 179, 179, .6);
	overflow: hidden;
	}

.nose-bridge {
	display: block;
	position: absolute;
	top: 170px;
	right:137px;
	border-width: 0px 40px 100px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(222, 203, 183, 1);
	border-top-color: rgba(222, 203, 183, 1);
	border-left-color: transparent;
	border-right-color: transparent;	
	}
.nose-bottom {
	display: block;
	position: absolute;
	top: 270px;
	right:137px;
	border-width: 25px 40px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: rgba(195, 179, 163, 1);
	border-top-color: rgba(195, 179, 163, 1);
	border-left-color: transparent;
	border-right-color: transparent;
	}
.mouth-wrap {
	padding: 300px 470px;
	display: block;
	position: absolute;
	right:0px;
	}
.mouth {
	display: block;
	position: absolute;
	top: 355px;
	right: 200px;
	height: 20px;
	width: 110px;
	background: #000;
	overflow: hidden;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-transition: all .3s ease-in-out;
	}
.mouth-wrap:hover .mouth {
	height: 50px;
	width: 75px;
	right: 220px;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	}
	
	
.balloon {
	display: block;
	position: absolute;
	top: 30px;
	left:80px;
	width: 350px;
	background: #fff;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	overflow: hidden;
	padding: 30px;
	font: 62px sans-serif;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: bold;
	}
	
.balloon-stem {
	display: block;
	position: absolute;
	top: 220px;
	left:420px;
	border-width: 0px 80px 40px 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-bottom-color: #fff;
	border-top-color: #fff;
	border-left-color: transparent;
	border-right-color: transparent;
	}
	
.attr {
	left: 45px;
	bottom: 5px;
	font: 16px Georgia, serif;
	position: absolute;
	font-style: italic;
	}
	
.shirt {
	display: block;
	position: absolute;
	top: 460px;
	right:80px;
	height: 425px;
	width: 350px;
	background: #000;
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	border-radius: 80px;
	}