Cours Web 2.0 / HTML5 / JS 2015-2015

CSS

Exemples interactifs très utiles pour comprendre CSS / CSS2 : Exemples interactifs CSS

• Exemples CSS de w3schools.com : http://www.w3schools.com/css/default.asp
• Transparents de Estelle Weil : http://estelle.github.io/
• Lea Verou : projets (http://lea.verou.me/projects/, en particulier l'outil prefix-free pour css), transparents : http://lanyrd.com/profile/leaverou/slides/

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

• Ici l'exemple interactif : http://jsbin.com/ixowoc/5/edit#html,live
• Ici un tableau avec lignes en couleurs, colonnes bloquées, scrolling horizontal, etc, en CSS3 : http://jsbin.com/ibesul/2/edit

Flex Layout exemples

• Exemple simple, montre aussi les sélecteurs nth + les ombres CSS3 : http://jsbin.com/tadivale/9/edit
• Exemple avec du layout imbriqué : http://jsbin.com/yekededu/2/edit

Transitions exemples

• Exemple basique, utilisant la bibliothèque prefix-free : http://jsbin.com/kocaqone/5/edit
• Article du MSDN, montrant les différents types d'interpolations : http://blogs.msdn.com/b/eternalcodin...ansitions.aspx
• Générateur de fonctions de transition : http://matthewlein.com/ceaser/
• Exemples faisant du "fading" sur des images : http://css3.bradshawenterprises.com/cfimg/

Animations exemples

• http://jsbin.com/pomikipe/6/edit et http://jsbin.com/pomikipe/8/edit
• http://jsbin.com/kafewudu/2/edit un autre exemple

Multi-colonnes exemple

• http://jsbin.com/kobudiyo/2/edit

WebFont exemple

• Utilisation de google fonts et custom fonts : http://jsbin.com/ofucaq/15/edit

Dégradés exemples

• Générateur de boutons : http://www.colorzilla.com/gradient-editor/
• Exemple simple : http://jsbin.com/wihixuqi/2/edit

Ombres exemple

• http://jsbin.com/wewipofu/2/edit

Background exemple

• http://jsbin.com/sufohine/2/edit

Border-image exemple

• http://jsbin.com/wokihori/2/edit