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.