/
blur.html
53 lines (51 loc) · 2.24 KB
/
blur.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<!-- Article: -->
<!-- Demo: http://www.paulrhayes.com/experiments/cube-3d/blur.html -->
<!-- Originally posted: 10th June 2012 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CSS cube which blurs as it moves away — Paul Hayes</title>
<meta name="author" content="Paul Hayes" />
<link rel="stylesheet" href="../experiment-styles.css" />
<link rel="stylesheet" href="css/experiment.css" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="experiment">
<div class="wrapper">
<article class="viewport">
<div class="zoom-wrapper">
<section class="cube">
<div></div>
<div>
<h2>3D cube that blurs</h2>
<time>10th June 2012</time>
<p>By Paul Hayes</p>
<p>An extension to the 3D cube that blurs as it moves away from you.</p>
<p>Blurring uses the recent filter property.</p>
<p><a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top">Read more on the original cube »</a></p>
</div>
<div>
<!-- video -->
</div>
<div>
<h2><a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Learn how to make a cube</a></h2>
<time>17th July 2009</time>
<p>By Paul Hayes</p>
<p>“A 3D cube can be created solely in CSS, with all six faces.”</p>
<p>Article: <a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Cube explanation</a></p>
</div>
<div>
<p>I design and build websites in Brighton</p>
</div>
<div>
<small>Nothing down here.</small>
</div>
</section>
</div>
</article>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/experiment.js"></script> </body>
</html>