HTML5 Showcase
browser warning…
Some of you may have noticed this blog uses some uncommon features for web development. While creating this website I had a goal to use as many as possible new features provided by Javascript 1.5, CSS3 and HTML5. When you look at the sourcecode of this website, you might see some funky HTML5 things like:
- <header>
- <nav>
- <footer>
- <section>
- <aside> ???
- <script defer=”defer”> notype?
- <style> notype?
- <!DOCTYPE html>
- <input type=”search” placeholder=”search”>
- <meta name=”viewport” content=”width=device-height”>
Designers are probably more interested in these CSS3 functions:
- box-reflect
- linear-gradient
- box-shadow
- border-radius
- @font-face{font-family:Delicious;src:url(”….otf”)}
-transition
-animation-name: ”pos1-2”
-animation-duration:1s;
-animation-timing-function:cubic-bezier(1,.1,.4,1.2)
The javascript I currently use is very lightweight but still offers (limited) support for Internet Explorer. One of the less common functions is:
- document.querySelectorAll
You can find all of these HTML5 tags, CSS3 properties and Javascript functions in the sourcecode.
The experience I got from testing these new features shed a new light on my vision of Javascript in the future. By providing hardware accelerated, and therefore faster, animations via CSS3 there is a smaller need for including javascript, especially for small websites.
Currently I am experimenting with:
- @-webkit-variables
A couple of interesting sites and blogs to follow:
- http://html5gallery.com/
- http://www.apple.com/html5/
- http://www.hongkiat.com/blog/48-excellent-html5-demos/
Er zijn nog geen reacties.