Passer au contenu
36 h

Web

2$/h – Design Web avec CSS3

Objectifs

Au terme de cette formation, les participants pourront utiliser les nouvelles fonctionnalités de CSS3 pour donner du style à leur page ou leur site web.

Contenu du cours

Introduction 

  • Préambule
  • CSS3
  • Préfixes de moteurs de rendu
  • Exemples de règles avec préfixe
  • Outils pour ajouter des préfixes
  • Philosophie de développement
  • Avantages de l’utilisation de CSS3
  • Test du support dans les navigateurs
  • Propriétés principales de CSS3 utilisables aujourd’hui

Nouveaux effets visuels 

  • Coins arrondis avec border-radius
  • Ombre portée pour le texte avec text-shadow
  • Superposition des ombres portées
  • Ombre portée pour un objet avec box-shadow
  • Représentation des couleurs avec RGBA et HSLA

Gradients pour le remplissage et introduction aux arrière-plans 

  • Gradients
  • Introduction aux arrière-plans CSS3
  • Arrière-plans multiples et positionnement

Transitions CSS 

  • Présentation des transitions CSS
  • Paramètres pour une transition
  • Options de courbes de vitesse de la transition
  • Fonction de vitesse personnalisée
  • Avertissement pour les préfixes
  • Exemple d’une transition avec plusieurs propriétés

Transformations 2D 

  • Introduction aux transformations
  • Fonctions de transformations 2D (changements d’échelle, translations, rotations, obliques)
  • Aperçu des transformations 3D

Animations CSS 

  • Introduction aux animations CSS
  • Propriétés pour une animation (keyframes, name, duration, delay, direction)

Sélecteurs avancés 

  • Spécifications pour les sélecteurs
  • Amélioration des attributs grâce aux sélecteurs
  • Exemple pour les sélecteurs d’attributs
  • Pseudo-classes structurelles
  • Sélecteurs structurels

Flexbox 

  • Concept de flexbox
  • Propriété de flexbox (flex-direction, justify-content, etc.)

Mise en forme en colonnes 

  • Motivation de la mise en colonnes
  • Règles pour la mise en colonnes
  • Illustration des zones d’une mise en colonnes
  • Exemple simple de mise en colonnes
  • Précisions sur la mise en place de multicolonnes
  • Règles les plus récentes

Polices téléchargeables 

  • Introduction au concept des polices téléchargeables
  • Références pour les polices téléchargeables
  • Commande @font-face
  • Compatibilité des formats de polices dans les navigateurs
  • Bibliothèques de polices de caractères
  • Options de rechange à @font-face
  • Syntaxe de @font-face
  • Téléchargement d’une police sur Font Squirrel
  • Utilisation d’une police téléchargeable
  • Trucs de déverminage
  • Solution au problème de flash of unstyled content (FOUC)

Responsive Web Design 

  • Techniques pour créer une grille flexible qui garde les proportions
  • Insertion d’images et de médias flexibles
  • Unités de mesure CSS récentes (vw, vh, vmin, vmax et rem)
  • Requêtes médias pour ajuster les règles en fonction des caractéristiques de l’appareil
  • Identification des points de rupture de résolution (resolution breakpoints)
  • Application du principe de l’amélioration progressive

Préalables

  • Maîtriser les notions de base des CSS.
  • Posséder un ordinateur avec microphone et caméra ainsi qu’un deuxième écran pour la formation à distance.
  • Avoir installé Sublime Text avec plug-inssur son ordinateur avant la formation.