Permalink
Browse files

Add files

  • Loading branch information...
lojjic committed Apr 24, 2012
1 parent ce3d6d2 commit 9b04d8977299b84089f786021f1f628b1258c869
View
@@ -1,4 +1,7 @@
-html5denver-polyfills
-=====================
+# HTML5 Denver: "Polyfills For The Pragmatist" slides and demos #
-HTML5 Denver: "Polyfills For The Pragmatist" slides and demos
+Slide deck: slides.html
+
+Simple YepNope demo: yepnope/demo.html
+
+CSS3 PIE demos: css3pie/basic.html, css3pie/stress-test.html
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>Basic CSS3 Demos</title>
+
+ <style type="text/css">
+
+ html, body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif;
+ font-size: 16px;
+ background: #EEE;
+ }
+
+ .section {
+ border: 1px solid #CCC;
+ padding: 1em 2em 2em;
+ margin: 3em;
+ background: #FFF;
+ position: relative;
+ }
+
+ .section h2 {
+ border: 1px solid #CCC;
+ position: relative;
+ left: -3em;
+ top: -2em;
+ background: #FFF;
+ font-size: 1em;
+ padding: .25em 1em;
+ margin: 0;
+ }
+
+ .section code {
+ display: block;
+ white-space: pre;
+ margin-left: 250px;
+ min-height: 100px;
+ color: #999;
+ overflow: auto;
+ }
+ .section code strong {
+ color: #000;
+ }
+
+ .test {
+ width: 200px;
+ height: 100px;
+ line-height: 100px;
+ text-align: center;
+ border: 2px solid;
+ background: #FFF;
+ float: left;
+ position: relative;
+ behavior: url(PIE.htc);
+ }
+
+ #test1 {
+ border-color: #c00;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ }
+
+ #test2 {
+ border-color: #090;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ -webkit-box-shadow: #999 0 .25em .5em;
+ -moz-box-shadow: #999 0 .25em .5em;
+ box-shadow: #999 0 .25em .5em;
+ }
+
+ #test3 {
+ border-color: #00c;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ -webkit-box-shadow: #999 0 .25em .5em;
+ -moz-box-shadow: #999 0 .25em .5em;
+ box-shadow: #999 0 .25em .5em;
+ background: #9CF;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CF), color-stop(100%, #03C));
+ background: -moz-linear-gradient(#9CF, #03C);
+ background: linear-gradient(#9CF, #03C);
+ -pie-background: linear-gradient(#9CF, #03C);
+ }
+
+ #test4 {
+ border-color: #F99;
+ -webkit-border-radius: 1em;
+ -moz-border-radius: 1em;
+ border-radius: 1em;
+ -webkit-box-shadow: #999 0 .25em .5em;
+ -moz-box-shadow: #999 0 .25em .5em;
+ box-shadow: #999 0 .25em .5em;
+ background: #FFF url(icon-ie.png) no-repeat 50% 0;
+ background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
+ -pie-background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
+ }
+
+ #test5 {
+ -webkit-border-image: url(border2.png) 15 stretch;
+ -moz-border-image: url(border2.png) 15 stretch;
+ border-image: url(border2.png) 15 fill stretch;
+ border-width: 15px;
+ width: 180px;
+ height: 80px;
+ line-height: 80px;
+ }
+
+ </style>
+
+</head>
+<body>
+
+
+ <div class="section">
+ <h2>border-radius</h2>
+ <div class="test" id="test1">Cherry</div>
+<code><strong>border-radius: 1em; /* Standard */
+-moz-border-radius: 1em; /* Gecko */
+-webkit-border-radius: 1em; /* WebKit */</strong></code>
+ </div>
+
+ <div class="section">
+ <h2>box-shadow</h2>
+ <div class="test" id="test2">Apple</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+<strong>box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;</strong></code>
+ </div>
+
+ <div class="section">
+ <h2>linear-gradient</h2>
+ <div class="test" id="test3">Blueberry</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+<strong>background: #9CF; /* Fallback */
+background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
+background: -moz-linear-gradient(#9CF, #03C);
+background: linear-gradient(#9CF, #03C);
+-pie-background: linear-gradient(#9CF, #03C);</strong></code>
+ </div>
+
+ <div class="section">
+ <h2>multiple background images</h2>
+ <div class="test" id="test4">Rhubarb</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+<strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF; /* Fallback */
+background: url(icon-ie.png) no-repeat 50% 0,
+ url(icon-firefox.png) no-repeat 0 0,
+ url(icon-chrome.png) no-repeat 100% 0,
+ url(icon-safari.png) no-repeat 0 100%,
+ url(icon-opera.png) no-repeat 100% 100% #FFF;
+-pie-background: ...</strong></code>
+ </div>
+
+ <div class="section">
+ <h2>border-image</h2>
+ <div class="test" id="test5">Pumpkin</div>
+<code><strong>border-image: url(border2.png) 15 fill stretch;
+-moz-border-image: url(border2.png) 15 stretch;
+-webkit-border-image: url(border2.png) 15 stretch;
+border-width: 15px;</strong></code>
+ </div>
+
+
+</body>
+</html>
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Stress Test</title>
+
+ <script type="text/javascript">
+ function toggleClass( el, cls ) {
+ var re = new RegExp( '\\b' + cls + '\\b' );
+ if( re.test( el.className ) ) {
+ el.className = el.className.replace( re, '' );
+ } else {
+ el.className += ' ' + cls;
+ }
+ }
+
+ function log( txt ) {
+ var el = log._el;
+ if(!el) {
+ el =log._el = document.createElement( 'div' );
+ el.style.position = 'absolute';
+ el.style.bottom = '1em';
+ el.style.right = '1em';
+ el.style.width = '200px';
+ el.style.height = '100px';
+ el.style.overflow = 'auto';
+ el.style.background = '#FFF';
+ el.style.border = '1px solid #EEE';
+ el.style.fontSize = '9px';
+ document.body.appendChild( el );
+ }
+ var item = document.createElement( 'div' );
+ item.appendChild( document.createTextNode( txt ) );
+ el.appendChild( item )
+ }
+
+ function animate( el, fromX, fromY, toX, toY ) {
+ el.style.position = 'absolute';
+ var i = 0;
+
+ function step() {
+ el.style.left = fromX + ( toX - fromX ) * i / 100 + 'px';
+ el.style.top = fromY + ( toY - fromY ) * i / 100 + 'px';
+ i++;
+ if( i < 100 ) {
+ setTimeout( step, 10 );
+ }
+ }
+
+ step();
+ }
+ </script>
+
+ <style>
+
+ .tester {
+ behavior: url(PIE.htc);
+ background: #EEE url(border.png) 50% 50%;
+ border: 3px solid #66F;
+ float: left;
+ padding: 10px;
+ margin: 10px;
+ width: 10%;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ box-shadow: #000 5px 5px 8px;
+ -moz-box-shadow: #000 5px 5px 8px;
+ -webkit-box-shadow: #000 5px 5px 8px;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+ <div class="tester">test</div>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 9b04d89

Please sign in to comment.