Warning: curl_setopt(): CURLOPT_FOLLOWLOCATION cannot be activated when an open_basedir is set in /www/htdocs/w006633a/projekte/doctypehtml.net/www/lib/Curl.php on line 98
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1"> <title> doctypehtml.net – HTML5/CSS3 Demos + Experiments </title> <base href="http://doctypehtml.net/"> <link rel="stylesheet" href="http://doctypehtml.net/assets/css/layout.css" type="text/css"> <link rel="stylesheet" href="http://doctypehtml.net/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)"> <link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"> </script> <script src="http://doctypehtml.net/assets/js/jquery.DOMWindow.js" type="text/javascript"> </script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src= "https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a> <div id="wrapper"> <h1> <a href="/">&lt;!DOCTYPEhtml.net&gt;<br> HTML5/CSS3 Demos + Experiments</a> </h1> <p> This is a small demonstration of what can be done with HTML5 and CSS3. Not every technique listed as HTML5 demo is actually part of the HTML5 standard. Geolocation API and File API for example are their very own standards but are often mentioned in connection with HTML5. So they're listed here as well. You can use the code in your projects, all examples are under <a href="http://en.wikipedia.org/wiki/WTFPL">WTFPL</a>. This showcase is work in progress. More demos will follow soon, so check back often! </p> <h2> HTML5 </h2> <table> <colgroup> <col class="coldemo"> <col class="colsupport"> </colgroup> <thead> <tr> <th> Demo </th> <th> Support </th> </tr> </thead> <tbody> <tr> <td> <a href="http://doctypehtml.net/./html5/contenteditable.html">contenteditable attribute</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/contextmenu.html">Contextmenu</a> <span class="contributor">Contributed by: <a href= "http://www.twitter.com/codepo8">Chris</a></span> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/desktop-notifications.html">Desktop Notifications</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/details-summary.html">&lt;details&gt; and &lt;summary&gt; element</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/drag+drop.html">Drag and Drop</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/fileapi.html">FileAPI + FileReader + Fileupload</a> (using Mozilla's proprietary sendAsBinary()) </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/geolocation.html">Geolocation API</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/input-types-required-attribute.html">Input types + required attribute</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/localstorage-sessionstorage.html">localStorage + sessionStorage</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./html5/navigatoronline.html">navigator.onLine</a> </td> <td></td> </tr> </tbody> </table> <h2> CSS3 </h2> <table> <colgroup> <col class="coldemo"> <col class="colsupport"> </colgroup> <thead> <tr> <th> Demo </th> <th> Support </th> </tr> </thead> <tbody> <tr> <td> <a href="http://doctypehtml.net/./css3/calc.html">calc() function</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./css3/columns.html">Columns</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./css3/generated-content.html">CSS Card deck with flip effect</a> Mixed CSS techniques </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./css3/multiple-backgrounds.html">Multiple Background Images</a> </td> <td></td> </tr> <tr> <td> <a href="http://doctypehtml.net/./css3/nth-child.html">nth-child (even|odd) zebra table</a> </td> <td></td> </tr> </tbody> </table><br style="clear: both;"> </div> <div> All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href="http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href="http://www.twitter.com/rem">@rem</a> | <a href= "http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/" class="viewsource">view source</a> | <iframe src= "http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&amp;via=manuelbieh" style= "vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src= "http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21" style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe> <div class="g-plusone" data-size="medium" data-count="true"></div> </div><script type="text/javascript"> $('.viewsource').openDOMWindow({ height:'90%', width:'90%', positionType:'absolute', positionTop:50, eventType:'click', positionLeft:'5%', windowSource:'iframe', windowPadding:0, loader:1, // loaderImagePath:'animationProcessing.gif', loaderHeight:16, loaderWidth:17 }); </script><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-16083973-9']); _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); })(); </script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> </body> </html>