-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
40 lines (40 loc) · 8.57 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
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="apple-mobile-web-app-capable" content="yes"><title>The Revolutionary CSS 3</title><meta name="author" content="Scott Cheng"><meta name="description" content="A non-technical intro to CSS level 3"><link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet"><link href="style.css" rel="stylesheet"><link rel="shortcut icon" href="favicon.png"><link rel="canonical" href="http://scottcheng.github.com/revolutionary-css3/"></head><body class="impress-not-supported"><div id="fallback-message">You must be either using a mobile browser or an ancient one!<br />
If the latter, I sincerely suggest you come back in <a href="http://www.google.com/chrome/" target="_blank">Chrome</a>.</div><div id="hint"><p>Use spacebar, arrow keys or page up / down to navigate</p></div><script>if ('ontouchstart' in document.documentElement) {
document.querySelector('.hint').innerHTML = '<p>Tap on the left or right to navigate</p>';
}
</script><div id="impress"><div id="title" data-z='500' data-rotate='60' data-rotate-x='-15' data-rotate-y='15' data-scale='1' class="step"><div class="info">Best with <a href="http://www.google.com/chrome/" target="_blank">Chrome</a></div><h1><span class="article">The</span><br />
<span class="adj">Revolutionary</span><br />
<span class="noun">CSS 3</span></h1><div class="subtitle">A non-technical intro to CSS level 3</div></div><div id="impact" data-x='-600' data-y='0' data-rotate='90' data-scale='0.25' class="step"><p>Web UI development has never been so <em>simple</em> and <em>flexible</em>.</p></div><div id="impact-old" data-x='-810' data-y='0' data-rotate='90' data-scale='0.25' class="step"><p class="visual"><em>Stunning visual effect</em><br />
with <span class="problem">large, non-flexible images</span></p><p class="animation"><em>Fancy animation</em><br />
with <span class="problem">complex, error-prone JavaScript</span></p></div><div id="how" data-x='0' data-y='0' data-scale='8' class="step"><div class="how">How?</div></div><div id="border-radius" data-x='-2800' data-y='1200' data-scale='0.5' class="step property"><h2>Rounded corners</h2><div class="content"><div class="doraemon"><div class="face"><div class="base-white"></div><div class="lefteye eye eye-left"><div class="leftblackeye black-eye black-left"></div></div><div class="righteye eye eye-right"><div class="rightblackeye black-eye black-right"></div></div><div class="nose"><div class="nose-line"></div></div><div class="mouth"></div><div class="whiskers whi-right whi-top"></div><div class="whiskers whi-right whi-mid"></div><div class="whiskers whi-right whi-bottom"></div><div class="whiskers whi-left whi-top"></div><div class="whiskers whi-left whi-mid"></div><div class="whiskers whi-left whi-bottom"></div></div></div><div class="info">Try mouseover Doraemon!</div></div></div><div id="shadows" data-x='-1988' data-y='1200' data-scale='0.5' class="step property"><h2>Shadows</h2><div class="content"><div class="inset">Greetings,<br />
my name is shadow.</div></div></div><div id="gradient" data-x='-1176' data-y='1200' data-scale='0.5' class="step property"><h2>Gradient</h2><div class="content"><div class="apple-nav"></div><div class="radial"></div></div></div><div id="google-lofter" data-x='-770' data-y='1500' data-z='100' data-rotate-x='-75' data-scale='0.25' class="step"><div class="google-box box"><div class="title">Google</div><div class="content"><div class="google-button">Compose</div><div class="google-button">Create</div><div class="google-button">Subscribe</div></div></div><div class="lofter-box box"><div class="title">Lofter</div><div class="content"><img src="img/lofter.png"></div></div></div><div id="opacity" data-x='-364' data-y='1200' data-scale='0.5' class="step property"><h2>Opacity (& transition)</h2><div class="content"><div class="renren-button"><div class="renren-button-icon"></div><div class="renren-button-text">Download Album</div></div><div class="info">Try mouseover the button!</div></div></div><div id="opacity-image" data-x='42' data-y='1500' data-z='100' data-rotate-x='-75' data-scale='0.25' class="step"><div class="image-wrapper"><img src="img/heart.jpg"><div class="caption">heart.</div></div></div><div id="reflect" data-x='448' data-y='1200' data-scale='0.5' class="step"><h2>Reflection</h2><div class="content"><div class="ibooks-wrapper"><img src="img/ibooks.jpg" class="ibooks"></div><div class="info">(WebKit only)</div></div></div><div id="transform" data-x='1260' data-y='1200' data-scale='0.5' class="step"><h2>Transformation</h2><div class="content"><div class="tag">Text overflow</div><div class="tag">Columns</div><div class="tag">Shadows</div><div class="tag">Text stroke</div><div class="tag">Rounded corners</div><div class="tag">Gradient</div><div class="tag">Opacity</div><div class="tag">Reflection</div><div class="tag">Transition</div><div class="tag">Transformation</div></div></div><div id="animation" data-x='2072' data-y='1200' data-scale='0.5' class="step"><h2>Animation</h2><div class="content"><div class="spinner"><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div><div class="spinner-dot"></div></div></div></div><div id="end" data-x='750' data-y='1800' data-z='450' data-scale='0.2' data-rotate-x='-60' data-rotate-y='45' class="step"><div class="credits"><h2><a href="#title" class="title">The Revolutionary CSS 3</a><br />
brought to you by
<a href="https://github.com/scottcheng" target="_blank">Scott Cheng</a></h2><p><a href="http://bartaz.github.com/impress.js/" target="_blank">impress.js presentation framework</a>
by
<a href="http://bartaz.github.com/" target="_blank">Bartek Szopka</a></p><p><a href="http://www.google.com/webfonts/specimen/Telex" target="_blank">Telex font</a>
by Andrés Torresi for
<a href="http://www.huertatipografica.com.ar/" target="_blank">Huerta Tipográfica</a></p><p><a href="http://subtlepatterns.com/light-wool/" target="_blank">Light wool pattern</a>
by
<a href="http://www.tall.me.uk/" target="_blank">Andy Davies</a></p><p><a href="http://subtlepatterns.com/low-contrast-linen/" target="_blank">Low contrast linen pattern</a>
by Jordan Pittman</p><p><a href="#border-radius">Doraemon</a>
inspired by
<a href="http://slides.html5rocks.com/#rounded-corners" target="_blank">HTML5 Rocks slides</a></p><p><a href="#transform">CSS3 tags</a>
inspired by
<a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/tagtastic-tag-cloud-with-css-transformations/" target="_blank">Luke Spoor</a></p></div><div class="css3-logo-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.5 199.5" class="css3-logo"><path d="M32.8,0L25.4,37.0 176.0,37.0 171.3,60.9 20.6,60.9 13.3,97.9 163.9,97.9 155.5,140.1 94.8,160.2 42.2,140.1 45.8,121.8 8.8,121.8 0,166.2 87.0,199.5 187.3,166.2 200.6,99.4 203.3,86.0 220.4,0z"></path></svg></div></div></div><div id="social"><div class="social-button-wrapper"><div data-size="medium" data-annotation="none" class="g-plusone"></div></div><div class="social-button-wrapper"><a href="https://twitter.com/share" data-url="http://scottcheng.github.com/revolutionary-css3/" data-counturl="http://scottcheng.github.com/revolutionary-css3/" data-count="none" class="twitter-share-button">Tweet</a></div><div class="social-button-wrapper"><iframe src="http://ghbtns.com/github-btn.html?user=scottcheng&repo=revolutionary-css3&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe></div></div><script src="lib/impress.js"></script><script>impress().init();
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33401065-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
window.addEventListener('hashchange', function() {
_gaq.push(['_trackEvent', 'Step', 'move', window.location.hash]);
}, false);</script></body></html>