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.