Article tiré du site : http://www.storiesinflight.com/
Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (early 2011) usable across a number of web browsers, chief among them Firefox, Safari, Chrome, Opera and the upcoming IE9.
For many of the CSS3 examples, older versions of Internet Explorer are the lone holdout with a limited number of workarounds, however these features degrade gracefully and may still be useful on new projects as long as this limitation is kept in mind.
Please note: With the exception of SVGWeb, no Internet Explorer workarounds have been included on this page - most of the examples will therefore not work in IE6, IE7 or IE8.
On this page: Some more complex subjects are also discussed in these
separate pages:
...and don't forget to
leave some comments below!
Updates
November 19, 2010:
- Added new page with CSS Transition-animated multiple backgrounds
December 27, 2010:
- Added Canvas Image Load & Manipulation
January 20, 2011:
- Added Gradients since WebKit now supports the standard gradient syntax
January 24, 2011:
- Added basic Audio and Video examples
HTML5 DOCTYPE
Rounded Corners
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Rounded Corners Redux: Circles
Box Shadows
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Gradients
Linear Gradient
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Angled Linear Gradient
CSS:
background-image: -webkit-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -moz-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -o-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: linear-gradient(135deg, #aaddaa, #ffffff);
Angled Linear Gradient with Color Stops
CSS:
background-image: -webkit-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -moz-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -o-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
Radial Gradient with Color Stops and Positions
CSS:
background-image: -webkit-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -moz-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -o-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
Text Shadows
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Lorem ipsum dolor sit amet in 3D!
Border Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.
Transform Rotate
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus.
Column Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae velit tortor, ac dictum eros. Phasellus ut ante ante, a lacinia est. Suspendisse quis velit vitae ligula aliquet porta eget in diam.
Proin nunc velit, fringilla eget pretium ut, ultricies at enim. Cras molestie sem ac dui ornare in accumsan nisi dapibus. Aliquam ac molestie neque. Nam auctor leo nec augue sollicitudin eget mattis enim auctor. Curabitur suscipit elementum turpis, quis facilisis lectus ullamcorper placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mi mauris, ornare at tincidunt eu, pretium mollis turpis. Curabitur interdum facilisis dapibus. Curabitur tortor augue, varius vel tempus in, fermentum nec est.
Etiam in nulla sit amet justo luctus faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Fusce condimentum eros ultrices turpis dictum ultricies. Donec velit dui, ultrices eu mattis in, pretium blandit nibh. Sed id elit in justo condimentum fermentum. Nam iaculis massa sed nulla tincidunt consectetur. Cras rutrum blandit felis, vel pulvinar massa tristique nec. Mauris vitae justo ut nisl adipiscing molestie eu vitae ligula. Curabitur accumsan vehicula tellus eu dignissim. Proin eleifend vehicula vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus suscipit condimentum mollis. Mauris urna nisi, viverra quis accumsan at, faucibus ac dolor. Sed pharetra, leo eget imperdiet aliquam, tellus elit ullamcorper quam, vel cursus libero urna at sapien. Quisque vitae mi eu arcu congue lobortis at at lorem. Quisque varius bibendum felis, id consequat lorem blandit at. Nullam feugiat lorem eget urna egestas in vehicula mi elementum.
SVG
Hello World
Video
HTML5 documents have a much simpler doctype definition. This doctype kicks all current browser engines into standards mode (vs. quirks mode) and is the recommended W3C doctype for modern HTML.