DArcMattr/attack.html

## attack.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>grid</title>
<style type="text/css">
html {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;;
  /* from Lea Verou's gradient pattern gallery:
  @link: http://lea.verou.me/css3patterns/#starry-night */
  background-image:
  radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
  radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
  radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
  radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 375px 375px, 275px 275px, 160px 160px, 120px 120px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
body {
  width: 100%;
  height: 100%;
  display: table;
  margin: 0 auto;
  padding: 0;
  color: hsla( 60, 80%, 50%, .8 );
  background-color: hsla( 0, 0%, 0%, .8 );
  background-image:
    linear-gradient(rgba(0,255,0,.3) 2px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,0,.3) 2px, transparent 1px);
  background-size: 50px, 25px;
  background-position: -1px -1px, -1px -1px;
  -webkit-transform: perspective( 300px ) rotateX( 25deg);
  -webkit-origin: 25% 25%;
  font-family: "NI7SEG", fantasy;
  font-variant: small-caps;
  text-align: center;
}
div {
  display: table-cell;
  vertical-align: middle;
}
p {
  font-size: 3vw;
}
small {
  font-size: 50%;
}
h1 {
  color: hsla( 296, 98%, 33%, .8 );
  -webkit-text-stroke: 1px hsla( 0, 10%, 10%, .8 );
  font-size: 8vw
}
</style>
</head>
<body>
  <div>
    <h1>Attack of the CSS3 3D Transforms</h1>
    <p><small>Starring:</small> David Arceneaux
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>grid</title>
	<style type="text/css">
	html {
	background-color: #000;
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;;
	/* from Lea Verou's gradient pattern gallery:
	@link: http://lea.verou.me/css3patterns/#starry-night */
	background-image:
	radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
	radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 375px 375px, 275px 275px, 160px 160px, 120px 120px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
	}
	body {
	width: 100%;
	height: 100%;
	display: table;
	margin: 0 auto;
	padding: 0;
	color: hsla( 60, 80%, 50%, .8 );
	background-color: hsla( 0, 0%, 0%, .8 );
	background-image:
	linear-gradient(rgba(0,255,0,.3) 2px, transparent 1px),
	linear-gradient(90deg, rgba(0,255,0,.3) 2px, transparent 1px);
	background-size: 50px, 25px;
	background-position: -1px -1px, -1px -1px;
	-webkit-transform: perspective( 300px ) rotateX( 25deg);
	-webkit-origin: 25% 25%;
	font-family: "NI7SEG", fantasy;
	font-variant: small-caps;
	text-align: center;
	}
	div {
	display: table-cell;
	vertical-align: middle;
	}
	p {
	font-size: 3vw;
	}
	small {
	font-size: 50%;
	}
	h1 {
	color: hsla( 296, 98%, 33%, .8 );
	-webkit-text-stroke: 1px hsla( 0, 10%, 10%, .8 );
	font-size: 8vw
	}
	</style>
	</head>
	<body>
	<div>
	<h1>Attack of the CSS3 3D Transforms</h1>
	<p><small>Starring:</small> David Arceneaux
	</div>
	</body>
	</html>