CSS3 Avancé

Contenu

Le langage CSS3 possède des fonctionnalités avancées qui permettent de concevoir un design responsive et de créer des animations, des transitions, des transformations 3D et des effets, sans avoir besoin du JavaScript.
Le langage SVG permet de créer des animations vectorielles d’illustrations, de textes et des graphiques pour des logos et des présentations, ainsi que des images responsives.

Public

Ce workshop s’adresse à des WebDesigners qui sont déjà familiers avec le HTML5 et les CSS3 et qui souhaitent créer une interactivité dans leurs sites web sans avoir besoin de programmer en JavaScript

Programme

1. Les nouveaux sélecteurs

  • Les pseudos-sélecteurs
  • Les Sélecteurs

2. Module Flexbox et Grid

  • Alignement horizontal et vertical
  • Distribution des blocs
  • Comportement responsive des blocs

3. Les animations

  • Transitions
  • Animations
  • Personnaliser une animation
  • Easing et Delay

4. Effets CSS3

  • Ombres portées, filtres couleurs, transparences
  • Transformation : rotation, skew, translate, scale
  • Filtres sur les images

4. SVG (Scalable Vector Graphics)

  • Utilisation du SVG
  • Dessiner du SVG en CSS et en JS
  • Animation CSS3 et SVG

5. Générer une police d’icône

6. Outils pratiques et librairies

  • Générateur d’animations SVG en JavaScript
  • Animate.css
  • Wow.js
  • SVG.js
  • Tweenmax

7. Les bonnes pratiques

  • Images adaptatives
  • Décomposition des class
  • Methode BEM (Block-Element-Modifier)
  • Introduction au SASS

Prochaines dates

du 09.03.2020 au 11.03.2020

Écolage

CHF 800.-