300+ Ultimate bookmarks collection of CSS3 & HTML5

Publié le 21 mai 2010 par Paul

J’ai regroupé dans cet article l’ensemble de mes bookmarks (merci delicious!) en rapport avec l’HTML5 et la CSS3. Plusieurs centaines de liens qui devraient pouvoir intéresser un certain nombre de développeurs web. Il y a un peu de tout et ce n’est pas franchement organisé mais c’était ça ou rien Des tutoriels, des guides, des exemples, des générateurs, des fichiers .pdf : vraiment de quoi égayer vos longues soirées asociales et étancher votre soif de connaissance (si l’on peut dire). Vous trouverez peut être quelques doublons dans cette sélection mais je n’avais ni le temps ni l’envie de la vérifier. Non mais faudrait vraiment tout faire dans cette baraque ! En l’état ces liens m’ont déjà beaucoup aidé mais libre à vous de compléter cette liste par l’intermédiaire des commentaires : toutes vos trouvailles sont les bienvenues ! NightAngel.fr est partiellement HTML5-friendly et ceux qui viennent avec Safari ou Chrome auront déjà noté l’injection de CSS3 à haute dose 

Préambule

 

Preamble

Tous les navigateurs ne supportent pas l’HTML5 et encore moins la CSS3 ; vous trouverez les compatibilités dans les liens suivants. L’HTML5 ne pose pas de problème particuliers sur les navigateurs récents (Firefox, Safari, Chrome, etc) autres que Internet Explorer. La version 9 d’Internet Explorer devrait supporter l’HTML5 mais en attendant il est nécessaire d’utiliser un hack javascript pour les versions d’IE inférieures à 9. Pour cela il suffit d’ajouter cette ligne entre les balises HEAD de votre page (dans header.php pour ceux qui souhaitent passer leur blog WordPress en HTML5) :

 

All browsers don’t supports HTML5 and CSS3… much less ; you’ll find compatibility in the following links. No particular problems with HTML5 on recents browsers (Firefox, Safari, Chrome, etc) others than Internet Explorer. Internet Explorer v9 should support the HTML5 but in the meantime it’s necessary to use a javascript hack for IE versions lower than 9 :

?[Copy to clipboard]View Code HTML4STRICT

1
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Un petit mot également quant aux incompatibilités de la CSS3 avec certains navigateurs. Selon moi, à l’heure actuelle, seuls les navigateurs basés sur le moteur de rendu Webkit (Safari, Chrome, etc) offrent une compatibilité et un résultat satisfaisants. La version stable actuelle (3.6) de Firefox est limitée à ce niveau là puisqu’elle reste basée sur la version 1.9.2.3 du moteur de rendu Gecko. Tout devrait rentrer dans l’ordre avec la version 3.7 (actuellement en Alpha4) qui sera basée sur Gecko 1.9.3. Voilà, c’est tout ! 

 

A word also about the CSS3 incompatibilities with some browsers. In my opinion, for the moment, only browsers based on Webkit rendering-engine (Safari, Chrome, etc) have a good compatibility. The current stable version (3.6) of Firefox is limited at this level : it’s based on v1.9.2.3 of Gecko rendering-engine. Everything should return to normal with version 3.7 (Alpha4 currently) will be based on Gecko 1.9.3. That’s it ! 

SmashingMagazine.com

08.01.2009 – Push Your Web Design Into The Future With CSS3 par Chris Spooner.

15.06.2009 – Take Your Design To The Next Level With CSS3 par Inayaili de Leon.

06.07.2009 – HTML 5 Cheat Sheet.

13.07.2009 – CSS3 Cheat Sheet.

16.07.2009 – HTML5 and The Future of the Web par Tim Wright.

04.08.2009 – Coding an HTML 5 Layout From Scratch par Enrique Ramirez.

02.12.2009 – Pushing Your Buttons With Practical CSS3 par ZURB.

16.12.2009 – Stronger, Better, Faster Design with CSS3 par ZURB.

25.01.2010 – The New Hotness: Using CSS3 Visual Effects par ZURB.

01.02.2010 – 50 Brilliant CSS3/JavaScript Coding Techniques.

01.03.2010 – The Future Of CSS Typography par Inayaili de Leon.

28.04.2010 – CSS3 Solutions for Internet Explorer par Louis Lazaris.

1stwebdesigner.com

04.12.2009 – 22 Advanced CSS Text Effects And Web Typography Tips par Dainis Graveris.

11.12.2009 – 33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles par Dainis Graveris.

28.02.2010 – 50 Awesome CSS3 Animations par Yanuar Prisantoso.

24.03.2010 – 22 Handy HTML5 & CSS3 Tools, Resources And Guides par Daniels Mekšs.

05.04.2010 – Amazing CSS3 Techniques You Can’t live Without par Jared White.

27.04.2010 – How to use CSS3 Orientation Media Queries par Ryan Seddon.

opera.com

13.12.2006 – Improve your forms using HTML5! par Anne Van Kesteren.

25.10.2007 – Styling Forms with Attribute Selectors – Part 1 par Christopher Schmitt.

09.01.2008 – Progressive Enhancement with CSS3: A Better Experience for Modern Browsers par Peter Gasston.

21.02.2008 – CSS text shadows and background sizing par Christopher Schmitt.

21.08.2008 – CSS 3 attribute selectors par Christopher Schmitt.

08.01.2009 – HTML 5 Canvas—The Basics par Mihai Sucan.

html5doctor.com

16.06.2009 – Headers in HTML 5 par Richard Clark.

18.06.2009 – The Video Element par Tom Leadbetter.

20.06.2009 – How to get HTML5 working in IE and Firefox 2 par Remy Sharp.

30.06.2009 – Designing a Blog with HTML 5 par Bruce Lawson.

02.07.2009 – HTML 5 + XML = XHTML 5 par Bruce Lawson.

09.07.2009 – Native Drag and Drop par Remy Sharp.

17.07.2009 – HTML 5 Boilerplates par Remy Sharp.

zenelements.com

CSS3 rgb & rgba par Alex (twitter).

CSS3 hsl & hsla par Alex (twitter).

CSS3 Opacity par Alex (twitter).

CSS3 Gradients par Alex (twitter).

CSS3 RGB & RGBA par Alex (twitter).

CSS3 Background Images (Sizing and Multiple Images) par Alex (twitter).

CSS3 Box & Images Shadows par Alex (twitter).

CSS3 Text Shadow par Alex (twitter).

CSS3 Multiple Columns par Alex (twitter).

css3 embed a font face par Alex (twitter).

westciv.com

Style Master CSS Editor for Windows and Mac OS X.

Linear Gradients.

Box Shadow.

Text Shadow.

CSS3 Property Tests.

Apple’s Navigation Bar Using Only CSS

admixweb.com

08.03.2010 – How to Create a Fancy Image Gallery with CSS3 par Teylor Feliz .

16.03.2010 – Creating an Animated CSS3 Horizontal Menu par Teylor Feliz .

12.05.2010 – Creating a Bubble Coda Style with CSS3 par Teylor Feliz .

css3.info

CSS3 Selectors Test.

RGBA colors.

HSLA Colors.

HSL Colors.

Opacity.

Border-image: Using Images for Your Border.

Word-Wrap.

Border-radius: create rounded corners with CSS.

Box-shadow, one of CSS3’s best new features.

Css3 Attribute selectors.

18.11.2006 – A border-radius solution with CSS3 par Peter Gasston.

04.01.2007 – Vendor Specific Extensions to CSS3 par Joost de Valk.

06.01.2007 – Using CSS3 selectors to highlight hyperlinks par Peter Gasston.

16.01.2007 – Semantic Code: Put More In, Get More Out par Peter Gasston.

15.07.2007 – Using CSS 3 selectors to apply link icons par Peter Gasston.

30.07.2007 – A Mock-Up Interface Using CSS3 Color par David Storey.

18.09.2007 – Liquid Faux Columns with Background-Size par Peter Gasston.

13.02.2008 – Making an Image Gallery with :Target par Peter Gasston.

28.02.2008 – Tooltips with CSS3 par James Hopkins.

08.07.2009 – A Marriage Made in Heaven? HTML 5 and CSS3 par Frederick Townes.

w3.org

CSS3 and International Text

CSS Color Module Level 3.

CSS Template Layout Module.

Cascading Style Sheets Current Work de w3.org

W3C: Selectors

CSS Working Group Blog

W3C’s CSS3 Roadmap

W3C HTML 5 Spec

HTML 5 differences from HTML 4

The Web Developer’s Guide to HTML 5

Accessibility Features of CSS

css4design.com

07.07.2009 – Quelques notes, beaucoup de liens (et un peu de mauvaise foi) sur HTML5

21.10.2009 – HTML5 et CSS pour l’intégrateur web

02.02.2010 – HTML5 — Une orientation encore trop « littéraire » et pas assez « web »

14.03.2010 – Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

20.03.2010 – HTML5 — Pas de balise aside dans un hgroup ?

19.04.2010 – Générateurs de CSS3 pour tous les navigateurs (ou presque)

24.04.2010 – HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»

CSS3 & HTML5 : Storm Links !

10.08.2010 – 70 Must-Have CSS3 and HTML5 Tutorials and Resources par Ray Cheung de webappers.com.

04.12.2007 – A Preview of HTML 5 par Lachlan Hunt de alistapart.com.

12.04.2010 – 7 Useful CSS3 Code Generators par Ferman de pelfusion.com.

09.05.2010 – Everything You Need to Know about CSS3 Color Techniques par Aygul Zagidullina de pelfusion.com

12.07.2009 – CSS3 Color Names

04.05.2008 – Not As Clear As It Seems: CSS3 Opacity and RGBA par Tim Kadlec de timkadlec.com.

23.03.2010 – Quick Tip: Understanding CSS3 Gradients par Jeffrey Way de tutsplus.com.

19.05.2008 – Introduction to CSS3 – Part 5: Multiple Columns par David Appleyard de designshack.co.uk.

13.05.2008 – Introduction to CSS3—Part 4: User Interface par David Appleyard de designshack.co.uk.

04.12.2006 – Rounded Corner Boxes the CSS3 Way par Andy Budd de 24ways.org.

02.10.2008 – Overview of CSS3 Structural Pseudo-Classes de javascriptkit.com.

19.02.2009 – Box Shadow par Onsitus de flepstudio.org.

15.02.2010 – Get Started with CSS 3 de webmonkey.com.

10.01.2006 – CSS3 Selectors Explained de 456bereastreet.com.

14.08.2005 – Multiple Backgrounds par Justin Halsall de mind-productions.com.

02.03.2010 – Speed Up with CSS3 Gradients par Chris Coyier de css-tricks.com.

01.02.2008 – Overriding the Default Text Selection Color with CSS par Chris Coyier de css-tricks.com.

31.10.2008 – @font-face in IE: Making Web Fonts Work par Jon Tan de jontangerine.com.

09.12.2008 – The Fundamental Problems with CSS3 par Matt Wilcox de mattwilcox.net.

The CSS3 ‘Box-Sizing’ Concept par James Hopkins de idreamincode.co.uk.

Web Designer’s Browser Support Checklist par findmebyip.com.

CSS3 Generator par Randy Jensen (twitter).

Web Browser CSS3 Support par David Hammond de webdevout.net.

Making Your Backgrounds Transparent with CSS 3 Opacity par Jennifer Kyrnin de about.com.

RGBA – Color with Transparency de greenevillage.net.

HSLA – Color with Transparency de greenevillage.net.

CSS3 Borders Preview de cssportal.com.

CSS3 Opacity de exforsys.com.

CSS3 Gradient Generator

CSS Border Radius par Jacob Bijani.

Font-Face Kit Generator de fontsquirrel.com.

Border Image Generator

Cross Browser CSS3 Rule Generator

SlideShare Presentation: Colors in CSS3 par Lea Verou.

CSS3 Gradient Buttons + Démo

Super Awesome Buttons with CSS3 and RGBA + Démo

CSS at Ten: The Next Big Thing

Fonts Available for @font-face Embedding de webfonts.info.

Six Questions: Eric Meyer on CSS3

Enhance Internal Page Links

Creating a Polaroid Photo Viewer with CSS3 and jQuery par Marco Kuiper de marcofolio.net.

CSS: Transition Timing Functions

CSS3 Corporate Fun

CSS Trick: Hidden Messages

The Potential of Web Typography par Ian Lynam & Craig Mod de craigmod.com.

HTML 5 and CSS3: The Techniques You’ll Soon Be Using

When Can I Use… (Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies)

The Power of HTML 5 and CSS3

Yes, You Can Use HTML 5 Today!

A Selection of Supported Features in HTML5

HTML5 id/class Name Cheatsheet

Preparing for HTML 5 with Semantic Class Names

HTML 5: Nav Ambiguity Resolved

Wikipedia: HTML 5

HTML 5 Demos

HTML 5 Drag and Drop + Microformats = a whole world of possibilities

html5gallery.com

HTML 5 Forms Demo

HTML 5 – Draft Standard

Semantics in HTML 5

Thinking About HTML 5 canvas Accessibility

The WHATWG Blog

Bespin

Comparison of layout engines (HTML 5)

12 resources for getting a jump on HTML 5

More on developing naming conventions, Microformats and HTML5

The Rise of HTML5

An Event Apart and HTML 5

Semantics in HTML 5

Test new HTML 5 elements

Attribute Selection in CSS3

CSS3 Transparency: The Opacity Property

CSS3 Text-Wrapping

CSS3 Color Names

Stay on :target with CSS3

CSS3 Links Creation and Usage

CSS3 Unleashed: Tips, Tricks and Techniques

When can I use…
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Vendor-specific Properties
Vendors—browser makers—are free to implement extensions to the CSS specifications that, in most cases, are proprietary to their browser.

CSS: border-radius and -moz-border-radius

Css3 opacity: transparency of an element in css

CSS3 box-sizing attribute

css3 transform

Pure CSS3 AT-AT Walker

Pure CSS Speech Bubbles

Opera logo With CSS

Social Media Icons in Pure CSS

Pure CSS3 Analogue Clock

Realistic Looking Button with CSS3

Super Awesome Buttons with CSS3 and RGBA

Matrix Animation With WebKit CSS3

Speed Up with CSS3 Gradients

Working With RGBA Colour

Cross Browser Pure CSS3 Horizontal Accordion

Cross Browser Pure CSS3 Vertical Accordion

Animated CSS3 Horizontal Menu

Create a Fancy Image Gallery with CSS3

Sliding Navigation without JavaScript

Design a Prettier Web Form with CSS3

Overriding The Default Text Selection Color With CSS

Practical Uses of CSS3

Tabbed Navigation Using CSS3

Quickie CSS3 Tricks with Fallbacks

A Look at Some of the New Selectors Introduced in CSS3

Text Rotation with CSS

Classic CSS Techniques Made Simple with CSS3

Fun with :target (CSS3)

Make Cool and Clever Text Effects with CSS text-shadow

Animation Using CSS Transforms

Going Nuts with CSS Transitions

The Shadow effect in CSS3

Simple CSS3 Rounded Corners With Support For IE

CSS3 Dropdown Menu

Slick Menu using CSS3

Depth and Nice 3D Ribbons Only Using CSS3

Animated CSS3 Cube using 3D Transforms

3D Cube Using CSS Transforms

Auto Scrolling Parallax Effect without JavaScript

Clever Lists with CSS3 Selectors

Pure CSS Opacity and How to Have Opaque Children

CSS3 Two Column List Layout

Futurebox, Lightbox Without the JavaScript

Hidden Messages

jQuery Style Menu With CSS3

Webkit CSS3 Generator

CSS3 learning tool

Introduction to CSS3

WaSP Community CSS3 Feedback

Conversation with CSS 3 team

5 Techniques to Acquaint You With CSS 3

30 Essential CSS3 Resources

Dan Cederholm’s Handcrafted CSS Workshop

Introducing the CSS3 Multi-Column Module

Stay on :target with CSS3

CSS3 Exciting Functions and Features: 30+ Useful Tutorials

HTML5 Readiness

CSS3 support in Internet Explorer 6, 7, and 8

Keith Clark – IE CSS3 pseudo selectors

47 Amazing CSS3 Animation Demos

The Basics of CSS3

CSS3 Techniques You Should Know

5 CSS3 Techniques For Major Browsers using the Power of jQuery

CSS3 Examples and Best Practices

10 examples of futuristic CSS3 techniques

Browser support for CSS3 and HTML5, We’ve tested all the A-grade browser…

Beautiful CSS3 Search Form

10 Best Tutorials To Learn CSS3

5 CSS3 Design Enhancements That You Can Use Today

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

Creating Polaroid Style Images with Just CSS

12 Excellent CSS3 Button and Menu Techniques

CSSDesk – Dynamic CSS Sandbox

All There Is To Know About HTML5 and CSS3

Coding a CSS3 & HTML5 One-Page Website Template

15 Useful HTML5 Tutorials and Cheat Sheets

CSS3 rounded corners for every browser ?

CSS3 loading spinners without images

50 Excellent Tutorials for Web Development Using CSS3

HTML 5 And CSS3 Cheat Sheets Collection

47 CSS Tips & Tricks To Take Your Site To The Next Level.

Create Beautiful CSS3 Typography

15 Useful CSS3 and HTML5 Templates and Frameworks

HTML5 Unleashed: Tips, Tricks and Techniques

15 CSS3 Navigation and Menu Tutorials and Techniques

A Collection of HTML5 Resources and Tutorials

Kick-ass CSS3 Support in IE6, 7, and 8

12 Really Useful CSS3 Tips And Techniques

15 Useful Resources to Get Clued Up on HTML5

Table of CSS3 border-radius Compliance

Pimp Your Tables with CSS3

25 Useful CSS3 Techniques and Tutorials

Our solar system… An experiment with CSS3 border-radius, transforms & animations.

CSS Infos : Webkit CSS Properties

CSS Infos : Firefox CSS Properties

SublimeVideo – HTML5 Video Player

HTML5 Canvas and Audio Experiment

How to Make an HTML5 iPhone App par Alex Kessinger de sixrevisions.com.

html5media – Project Hosting on Google Code

23 Essential HTML 5 Resources par Ryan Carson de carsonofied.com.

RGraph: HTML5 canvas graph library based on the HTML5 canvas tag

HTML5 Reset Stylesheet

Detecting HTML5 Features

HTML 5 Visual Cheat Sheet by Woork par Antonio Lupetti.

HTML5 differences from HTML4

Browser support for CSS3 and HTML5

HTML5 Canvas Cheat Sheet

14.02.2009 – 12 resources for getting a jump on HTML 5

Rethinking Forms in HTML5 par John Cox de tutsplus.com.

How HTML5 Will Change the Way You Use the Web par Kevin Purdy de lifehacker.com.

HTML5 Video Destruction

HTML5 drag and drop in Firefox 3.5

Music Notation with HTML5 Canvas

Projekktor Zwei – Free HTML5 Video Player

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 video Libraries, Toolkits and Players

Embed Videos In Your Web Pages Using HTML5

HTML5 Website Layout Tutorials and Inspiration

HTML5 Rocks My Socks Off par Shane Jeffers.

html5shiv – Project Hosting on Google Code

HTML5 Security Cheatsheet

5 Exciting Things to Look Forward to in HTML 5

Why HTML5 Isn’t Going to Save the Internet

Decoding the HTML 5 video codec debate

Everything you need to know about HTML5

HTML5 video and H.264 – what history tells us and why we’re standing with the web

How HTML 5 Is Already Changing the Web

html5lib – Google Code

Build Web applications with HTML 5

22.03.2010 – « HTML5″ versus Flash: Animation Benchmarking

Choosing The Best CSS Framework: A Complete Guide

25+ Great HTML 5 Resources to Get You Started

How to build a desktop WYSIWYG editor with WebKit and HTML 5

Safari CSS Reference

CSS 3, tout le monde est prêt, sauf IE8 …

Les ombrages en CSS3

Ovale et forme elliptique avec CSS3 sans image

La transparence de couleur avec RGBa en CSS3

Welcome to HTML5 and CSS3 – Tools, Resources & Frameworks

To be continued…

J’encourage vivement les personnes intéressées à suivre le blog css4design.com (Twitter) de Bruno Bichet (Twitter) qui reste une référence française. Il existe une multitude d’autres sites intéressants mais c’est mon coup de coeur à moi