CSS3 pour les concepteurs de sites Web
Adresses derrière les liens

Préambule
Écran 2
  1. www.espacecourbeformation.com/fr/cours/maitriser-css3 http://www.espacecourbeformation.com/fr/cours/maitriser-css3/
CSS3
Écran 3
  1. liste des modules CSS3 sur le Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
  2. vérifier le support http://caniuse.com/
Préfixes de moteurs de rendu
Écran 4
  1. Les préfixes vendeurs en CSS http://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html
  2. Comparison of layout engines http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
Outils pour mettre des préfixes
Écran 6
  1. The Impeding CSS Vendor Prefix Catastrophe http://www.sitepoint.com/w3c-css-webkit-prefix-crisis/
  2. Prefixr http://prefixr.com/
  3. -prefix-free http://leaverou.github.com/prefixfree/
  4. CSS3 Please http://css3please.com/
  5. préprocesseur CSS http://css-tricks.com/musings-on-preprocessing/
  6. Prefixr http://prefixr.com/
Tester le support dans les navigateurs
Écran 9
  1. grille de compatibilité CSS3 et support HTML5 http://www.findmebyip.com/litmus
  2. Support tables for HTML5, CSS3 http://caniuse.com/
  3. Modernizr test suite http://modernizr.github.com/Modernizr/test/index.html
Exemple de coins arrondis avec border-radius
Écran 13
  1. Radius Generator http://border-radius.com/
Introduction aux arrière-plans CSS3
Écran 21
  1. CSS Backgrounds and Borders Level 3 https://www.w3.org/TR/css3-background/
Arrière-plans multiples du CSS3
Écran 29
  1. Multiple Backgrounds with CSS3 http://www.css3.info/preview/multiple-backgrounds/
  2. spécification des arrière-plans au W3C http://www.w3.org/TR/css3-background/#backgrounds
Usages des arrière-plans multiples
Écran 30
  1. Parallax scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
  2. 25 sites utilisant un effet de parallaxe original http://www.blogduwebdesign.com/web-design-inspiration/25-sites-utilisant-un-effet-de-parallaxe-original/435
Illustration de l'effet de parallaxe - un site
Écran 31
  1. Silverback http://silverbackapp.com/
Illustration de l'effet de parallaxe - explication
Écran 33
  1. How to recreate Silverback's parallax effect http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/
  2. CSS: Using Percentages in Background-Image http://www.sitepoint.com/css-using-percentages-in-background-image/
Dégradés CSS
Écran 35
  1. Speed Up with CSS3 Gradients http://css-tricks.com/css3-gradients/
  2. Multiple Backgrounds and CSS Gradients http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
  3. CSS Image Values and Replaced Content http://www.w3.org/TR/css3-images/#linear-gradients
Créer des dégradés facilement
Écran 36
  1. outil de John Allsop (gradients nouveau style) http://www.westciv.com/tools/gradientsnustyle/index.html
  2. création de gradients avec l'ancienne syntaxe http://westciv.com/tools/gradients/
  3. Colorzilla http://www.colorzilla.com/gradient-editor/
Présentation des transitions CSS
Écran 39
  1. liste complète des propriétés animables http://www.w3.org/TR/css3-transitions/#properties-from-css-
  2. brouillon de travail http://www.w3.org/TR/css3-transitions/
Options de courbes de vitesse de la transition
Écran 41
  1. Transitions CSS3 http://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html
  2. CSS3 Transitions http://css3.bradshawenterprises.com/transitions/
Fonction de vitesse personnalisée
Écran 42
  1. Ceaser CSS Easing Animation Tool http://matthewlein.com/ceaser/
Exemple pour illustrer les transitions : code CSS pour la transition
Écran 44
  1. Prefixr http://prefixr.com/
Pourquoi ne pas utiliser le JavaScript?
Écran 47
  1. Test de transition pour navigateur http://www.quirksmode.org/css/transitions.html
Introduction aux transformations
Écran 49
  1. fonctions pour les transformations 2D http://www.w3.org/TR/css3-transforms/#two-d-transform-functions
  2. fonctions pour les transformations 3D http://www.w3.org/TR/css3-transforms/#three-d-transform-functions
Exemple pour illustrer les transformations - changement d'échelle
Écran 54
  1. Prefixr http://prefixr.com/
Un mot sur les transformations 3D
Écran 58
  1. 3D card flipping http://css3.bradshawenterprises.com/flip/
Introduction aux animations CSS
Écran 60
  1. spécification en développement des animations CSS http://www.w3.org/TR/css3-animations/
Exemple d'animation - rayons de soleil en rotation
Écran 64
  1. Outside - Reinventing the Weather Forecast http://www.outsideapp.com/
Spécifications pour les sélecteurs
Écran 75
  1. Selectors Level 3 http://www.w3.org/TR/css3-selectors/
  2. Selectors Level 4 http://www.w3.org/TR/selectors4/
  3. grille de compatibilité CSS3 et support HTML5 http://www.findmebyip.com/litmus#css3-selectors
  4. CSS contents and browser compatibility http://www.quirksmode.org/css/contents.html
  5. CSS3 info http://tools.css3.info/selectors-test/test.html
Pseudo-classes structurelles
Écran 78
  1. nth-child http://nthmaster.com/
Concept de flexbox (p. 1/2)
Écran 85
  1. norme du W3C https://www.w3.org/TR/css-flexbox-1/
  2. Alsacréations https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Introduction
Écran 98
  1. spécification de la mise en colonnes CSS3 http://www.w3.org/TR/css3-multicol/
  2. CSS3 Columns http://www.quirksmode.org/css/multicolumn.html
  3. Create Columns Easily with the CSS3 Multi-column Layout Module http://www.vanseodesign.com/css/multi-columns/
  4. exemple de page avec mise en forme en colonnes http://itineraires.musees.qc.ca/fr/nouvelle-france/a-propos
Illustrer les zones d'une mise en colonnes
Écran 100
  1. The multi column model http://www.w3.org/TR/css3-multicol/#the-multi-column-model
Références pour les polices téléchargeables
Écran 107
  1. spécification au W3C sur les polices téléchargeables http://www.w3.org/TR/css3-webfonts/
  2. Typotheque Webfonts Tutorial http://www.typotheque.com/webfonts/tutorial
  3. Comment utiliser une fonte « non standard » sur un site Web? http://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html
  4. Font Awesome http://fontawesome.io/
  5. Fontello http://fontello.com/
  6. Icomoon https://icomoon.io/
Services de livraison de polices de caractères
Écran 110
  1. Typekit https://typekit.com/
  2. Web Ink http://www.webink.com/
  3. Font Squirrel http://www.fontsquirrel.com/
  4. Font Spring http://www.fontspring.com/
  5. Kernest http://kernest.com/
  6. Typotheque http://www.typotheque.com/webfonts
  7. Google Web Fonts https://fonts.google.com/
  8. The mess of web font services http://robots.thoughtbot.com/post/673335945/the-mess-of-web-font-services
Alternatives à @font-face
Écran 111
  1. Cufón http://cufon.shoqolate.com/generate/
  2. sIFR http://www.mikeindustries.com/blog/sifr/
Syntaxe de @font-face
Écran 112
  1. approche plus blindée à la spécification des polices http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  2. outil de génération de @font-face de Font Squirrel http://www.fontsquirrel.com/fontface/generator
Trucs de déverminage
Écran 115
  1. @font-face gotchas http://paulirish.com/2010/font-face-gotchas/
Problème du Flash of Unstyled Content
Écran 116
  1. Flash of Unstyled Content http://www.typotheque.com/webfonts/FOUC
Que faire maintenant
Écran 121
  1. suivez ECFormation sur Twitter https://twitter.com/search?q=%23css3%20from%3Aecformation
Tous droits réservés 2017, Espace Courbe Formation inc. —12 novembre 2017 — 19:23:02