Great Collection of HTML5 and CSS3 Resources for designers & developers.
HTML5 and CSS3 are the next big improvements which are still under development. Many designers and developers have already implemented new features from HTML5 and CSS3, which are supported in most browsers, on their websites and many are still experimenting with them.
In this “Great Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below.
1- Fully Skin able & Configurable Web Player: JW Player For HTML5
The popular web player JW Player now has a HTML5 version after its well-known Flash and Silverlight ones.
JW Player For HTML5 is a totally skinnable and configurable player based on the <video> tag of HTML5.
It is built with jQuery, and for any browser without HTML5 support, falls back to the JW Player for Flash automatically.
The player can be set to display a poster image before and/or after the video.
Also, it is possible to make it auto-play, auto-repeat, start with a pre-defined volume and much more.
Considering the player falls back to Flash, the formats supported are also the ones that can be played by Flash:
- H264 baseline video / AAC low-complexity audio in the MP4 or MOV container
- Theora video / Vorbis audio in the OGG container
- VP6 video / MP3 audio in the FLV container
- Spark (H263) video / MP3 audio in the FLV container
Website: http://www.longtailvideo.com/support/jw-player/jw-pl…
Demo: http://www.longtailvideo.com/support/jw-player/jw-pl…
2- iPhone Compatible HTML5 Audio and Video Player – OIPlayer
OIPlayer is a jQuery plugin built as HTML5 Audio and Video Player that works fine in nearly every browsers with a fall back support to Flash and Java.
This open source HTML5 audio and video player is compatible with iPhone, though there are limitations (hope to see all controls working in a future version).
Features
- Plays video and audio files
- Falls back to Flowplayer (needs the Flash plugin and plays h.264, flv and mp4) or Cortado (Java applet that plays Ogg video and audio – ogv, oga)
- Full screen support
- iPhone compatible
- Keyboard support for Time Slider
Website: http://www.openbeelden.nl/oiplayer/
3- Control HTML5 Video With MooTools: CwVideo
CwVideo is a toolkit for using and controlling HTML5 video with MooTools.
By simply providing an id to the video tag and calling a function, every property of the video can be reached in a MooTools way.
It supports the methods play, pause, top, rewind, move, volume, getNetworkState and more.
Also, there are 2 custom extensions built with the Fx.Slider:
- timeline
- volume slider
that offers a good looking and user-friendly experience.
Website: http://www.chipwreck.de/blog/software/cwvideo/
Demo: http://www.chipwreck.de/blog/software/cwvideo/demo
Download: http://mootools.net/forge/p/cwvideo
4- HTML5 Demos And Examples: Html5Demos.com
Html5Demos.com, created by Remy Sharp, is a website that is sharing a list of beautiful HTML5 demos and examples.
The list includes items using HTML5 features like video, audio, canvas, geolocation, drag’n drop, web storage and more.
Browsers that are compatible with every demo is mentioned as well and it is possible to filter them according to the browsers and/or HTML5 feature used.
Website: http://html5demos.com/
Download: http://github.com/remy/html5demos
5- MooTools Image Slider With HTML5: Gradually
Gradually is a simple MooTools image slider that can present the images in an order and display an informative text for each (which is sometimes all we need).
It makes use of the HTML5 canvas element to create a beautiful transition effect.
The slider simply requires an unordered list of images (hopefully, with the same size) and uses the alt tag value as the informative text.
Besides the width/height values, the duration and interval when image is switched can be set too.
Website: http://holyshared.github.com/Gradually/index.html
Download: http://github.com/holyshared/Gradually
6- HTML5 Video & Media JS Library By Kaltura
Kaltura, an advanced video publishing platform, is sharing a free and open source HTML5 Video & Media JavaScript Library.
The library enables you to use the HTML5 <video> and <audio> tags today with a cross-browser and consistent player.
It is a feature-rich library that is built on jQuery and jQueryUI which makes theming, customizing and extending easier.
The player supports the open media formats ogg theora/vorbis (if you’re using h.264 formats, the library supports a smooth transition with fallback to h.264 sources).
Besides the video player, there is also a compact audio player with similar features.
It can gracefully identify the best playback engine (native HTML5, Flash, VLC or Java Cortado) for your settings and video format.
The player’s interface is multilingual (with the help of language files), it is already integrated with MediaWiki and can be integrated into any other platform easily.
Website: http://www.html5video.org/
Demo: http://www.html5video.org/demos/
Download: http://www.html5video.org/kaltura-html5/
7- Advanced HTML5 Media Player – OSM Player
OSM Player is a highly customizable and open source HTML5 media player that is built with jQuery.
It is designed to dynamically play almost any media, whether it be HTML5 video – Flash video – Audio, etc.
For any non-standard media and browsers without HTML5 support, it can fallback to Flash.
OSM Player supports playlists and offers a seamless Youtube/Vimeo integration.
The playlist can optionally be hidden and the video can be displayed in fullscreen.
Also, the player generates direct and embed links to the media which is nice for anyone willing to include the content to their web pages.
Website: http://www.mediafront.org/project/osmplayer
Download: http://github.com/mediafront/osmplayer/downloads
8- IE Print Protector: HTML5-Enable IE
As we know, Internet Explorer 6,7 and 8 do not support the new HTML5 elements which result in messy outputs.
However, thanks to Remy Sharp, there is the popular HTML5 enabling script which adds HTML5 capabilities to IE.
It is a great script and supports most of the HTML5 elements but missing one feature which is “printing HTML5 elements from IE”..
There is now an alternative named IE Print Protector which helps IE to render HTML5 elements correctly, both on screen and in print.
It simply replaces HTML5 elements with supported fallback elements (like div and span) when you print.
Website: http://www.iecss.com/print-protector/
9- jStorage – HTML5 Local Storage For Prototype, MooTools And jQuery
jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to store data on browser side.
It is lightweight (2kb) and uses HTML5 local storage if available or userData behavior in older versions of IE (Webkit SQLite is not supported).
The plugin works the same in Prototype, MooTools, jQuery and it is very easy to use as there are only 4 functions:
- set (save a key)
- get (retrieve the value of a key)
- deleteKey (remove a key)
- flush (clear the cache)
jStorage was known as DOMCached and renamed after various features being dropped.
Website: http://www.jstorage.info/
Download: http://github.com/andris9/jStorage
10- Simple To-Do List Manager With HTML5 and local Storage
Fridgelist is web based online simple To-Do List Manager built on HTML5 and localStorage. It’s fast, effective for compiling your tasks and accessible using keyboard shortcuts.
You need a modern browsers to use this online To-Do list Manager as all information gets stored inside the browser and not on the server.
Fridgelist using jQuery JSON and Modernizr for limited HTML5 & CSS3 backwards comparability.
At the end, a nice small tool to help keep track of your tasks with ease. Add tasks with single click and double click the task to edit.
Website: http://lvl-1.net/fridgelist/
11- Image Zoomer With HTML5 Canvas: Wadda
Wadda is a lightweight JavaScript library that uses HTML5 canvas for zooming images.
It comes in 2 JS files, one for the common functions an the other for the wadda function.
The library simply displays the original-sized-image inside a “lens effect” that must be mentioned in the thumbnail’s title tag.
Wadda has several options for customization like the zoom level, lens size, enable/disable lens fade effect and the x/y offsets from the mouse cursor.
It is compatible with every canvas-enabled browser and will work on others using the explorercanvas library.
Website: http://blog.insicdesigns.com/2010/04/introducing-wad…
12- Powerful HTML5 Graph Library: RGraph
RGraph is a free graph library that uses the HTML5 canvas tag.
Using the library, it is possible to create a wide variety of graph types:
- bar, pie, donut, gantt, radar, funnel, bi-polar charts
- line and scatter graphs
- LED display
- meter
- odometer
- progress bar
The charts are interactive (respond to mouse-overs and clicks) and, optionally, they can load with animations or zoom to a specific point.
There is also an annotation feature where you can draw over the graphs for highlighting them.
Website: http://www.rgraph.net/
13- HTML5 Video Player: Projekktor
Projekktor is an open source HTML5 video player that is built with pure JavaScript but uses Flash when there is no native H.264 support..
The player supports playlists and can display the videos in full-screen.
It has a control panel which appears on-hover and can be easily customized/themed by editing a single CSS file.
For extending its capabilities, Projekktor comes with a plugin interface.
Having the great features said, we must mention that the player is not perfect yet (in alpha stage).
Considering the inconsistencies between browsers in HTML5 support, browsers may act differently while displaying the player (more details on its website). However, it is under heavy development and new features/fixes are added regularly.
Website: http://www.filenew.org/projekktor/
Download: http://code.google.com/p/projekktor-zwei/source/chec…
14- HTML5 And CSS3 Browser Compatibility Chart
FindMeByIP.com is sharing beautiful browser compatibility charts for HTML5 and CSS3 properties which we are seeing more and more everyday.
The charts include:
- CSS3 properties
- CSS3 selectors
- HTML5 web applications (local storage, geolocation, etc.)
- HTML5 embedded content (canvas, audio, etc.)
- HTML5 form inputs, attributes and audio/video codecs
and contain data for the popular browsers with their widely used versions.
P.S. You may also want to checkout FindMeByIP.com homepage which offers a free service to help you collect the browser capabilities of a remote user (like clients) for better responding to any browser-related cases/questions.
Website: FindMeByIP.com homepage
15- HTML5-Powered CSS Framework: Less
Less Framework is a lightweight CSS framework for building flexible multi-column website layouts.
It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.
Web pages created with the framework collapse smartly into a single column in modern browsers & on small screens.
Less Framework uses the HTML5 enabling script by Remy Sharp & optionally there is a JavaScript function provided (requires jQuery) included which mimics the function of min-device-width for browsers that do not support it.
Website: http://lessframework.com/
16- Cross-Browser Videos: Video For Everybody
Video For Everybody is a smartly created HTML code for embedding videos into websites using the HTML5 <video> element.
If HTML5 is not supported, it falls back to QuickTime & Flash as the last option automatically (actually, as the last option, it can display an image if the Flash is not supported).
It does not use any JavaScript or browser-sniffing & works in RSS readers, iPhone / iPad besides all the major browsers.
Video For Everybody requires the video to be encoded in 2 different formats:
- MP4 (Safari, Flash, iPhone / iPad)
- OGG (Firefox 3.5+, Chrome, Opera 10.5+)
There is also a test page provided to see the compatibility it offers across browsers.
Website: http://camendesign.com/code/video_for_everybody
Demo: http://camendesign.com/code/video_for_everybody/test…
17- CSS3 Framework With HTML5 Support: 52framework
52framework is a CSS framework which aims to provide an easy way to build websites using HTML5 & CSS3 while still supporting all modern browsers (including ie6).
It uses HTML5 tags like header, nav, section, article, footer or new input field types like url, email, etc. The framework also has a HTML5 compatible reset stylesheet.
52framework uses the new ::selection selector that enables you to customize the properties of selected text.
It can apply rounded corners for any block level element, text-shadow for text elements & more.
The framework also includes styles for creating grids: 16 column, 52 pixel based with 8 pixel gutter.
52framework is a user-contributed resource & you can easily send suggestions to improve it further.
Website: http://52framework.com/
Demo: http://52framework.com/demo
18- An Innovative Volume Control With HTML5 Audio Element
Our standard & traditional volume controls in mp3 audio players, video players, operating systems & mobile phones adjust volume from ‘quiet’ to ‘loud’ but David has introduced a new kind of volume control that adjusts audio from ‘whisper’ to ‘shout’.
David has used the new HTML5 audio element to make his idea a working demo.
View the Demo of this innovative HTML5 Audio player.
19- HTML5 And Javascript Audio Interface: JAI
JAI is an open source JavaScript audio interface for the HTML5 <audio> tag that can play a list of audio files.
It doesn’t use any image, all the elements are rendered in runtime with the <canvas> element & the click-able play-list is only a list of links that are styled with CSS.
It can only work in modern browsers that has HTML5 support & use the Ogg Vorbis audio codec for the <audio> tag.
JAI, rather than being a player to be used in today’s websites, is more a proof of concept that shows how HTML5 will be changing the web.
Website: http://hyper-metrix.com/misc/jai/
Via: http://www.anieto2k.com/2010/01/13/jai-jugando-con-a…
20- Better HTML5 & CSS3 Usage By Detecting Browsers Capabilities With Modernizr
Similar to the IE6 situation, when using HTML5/CSS3 in our websites, it is a good idea to offer non-problematic outputs to web users with older/non-standard browsers.
Modernizr is a JavaScript library that uses feature detection techniques to determine whether or not the current browser is capable of CSS3 and HTML5 features like rgba(), border-radius, CSS Transitions & more.
It enables you to write pseudo-IF/ELSE statements in your CSS &, if wanted, it is possible to wirite conditional statements in JavaScript with the help of a “Modernizr JavaScript object” created.
Also, Modernizr adds support for styling HTML 5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.
Website: http://www.modernizr.com/
21- HTML5 Canvas Cheat Sheet
How to Start a Functioning Website Under Thirty Dollars 2021? 
The HTML5 Time Element Is Back and Better Than Ever 
Periodeic table of HTML5 Elements, arrange by type. 
CSS3 Powered jQuery Image Slider for 2D or 3D transitions – Flux Slider 
Now Easy to Convert Websites Into Mobile Quickly: Mobilize.js 
Mozilla Introduce Firefox 9, with Speed and less memory improvements
Then after a truly long time, a decade perhaps, you can become a captain.