/
index.html
102 lines (68 loc) · 3.61 KB
/
index.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3 Paperstack</title>
<meta name="description" content="Pure CSS based solution for creating the illusion of stacked papers">
<meta name="author" content="Matthias Kretschmann">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="style/style.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<aside><a href="https://twitter.com/kremalicious" rel="me">Follow me on Twitter</a></aside>
<div id="main" class="paperstack">
<header>
<hgroup>
<h1>CSS3 Paperstack</h1>
<p>Pure CSS based solution for creating the illusion of stacked papers.</p>
</hgroup>
</header>
<article>
<p>As you might have guessed you're right in the middle of the demo.</p>
<h1>How It Works</h1>
<p>The main work is done with a combination of everyone's favorite CSS pseudo elements :before/:after <span class="amp">&</span> CSS transforms. No additional markup elements are required. Placing the pseudo elements behind the content of the element they're injected on is achieved by utilising negative z-index values.</p>
<p>The css uses relative values a lot so the paper stacks will resize proportionally depending on the screen size and wrapper css.</p>
<p>All you have to do is include the .paperstack css rules <span class="amp">&</span> give your content wrapper this class.</p>
<h1>Within Content</h1>
<section>
<article class="paperstack">
<p>By adjusting z-index this works within content too.</p>
</article>
<article class="paperstack">
<p>And it will automatically grow or shrink depending on the content placed within so this sentence could really be long without destroying the stacks</p>
</article>
</section>
<h1>Browser Support</h1>
<p>This demo should work in all modern browsers including IE9. While IE8 understands pseudo elements it won't display CSS transforms.</p>
<h1>Use Me, Fork Me</h1>
<p>You can <a href="style/style.css">use the css</a> right away or fork this little site along with the css file <a href="https://github.com/kremalicious/csspaperstack">on Github</a>.</p>
<p><a class="button" href="https://github.com/kremalicious/csspaperstack/zipball/master">Download all files</a> <a class="button" href="https://github.com/kremalicious/csspaperstack">Fork on Github</a></p>
</article>
<footer>
<p><small>A small experiment by <a href="http://matthiaskretschmann.com">matthias kretschmann</a> | <a href="https://twitter.com/kremalicious">@kremalicious</a></small></p>
</footer>
</div>
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f53b82e844d52083900002c');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
<script>
var _gaq=[["_setAccount","UA-1441794-7"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>