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.
- Présentation des concepts et des outils CSS
- Démonstration des concepts à l’ordinateur
- Exercices à l’ordinateur supervisés par le formateur
- Aide individuelle lors des exercices
Pour bien maîtriser les notions enseignées, le participant devrait compléter le cours par la pratique personnelle.
Une attestation de participation est remise aux personnes ayant assisté à plus de 80 % des heures de formation.
- 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
- 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
- Introduction aux arrière-plans CSS3
- Arrière-plans multiples et positionnement
- 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
- Introduction aux transformations
- Fonctions de transformations 2D (changements d’échelle, translations, rotations, obliques)
- Aperçu des transformations 3D
- Introduction aux animations CSS
- Propriétés pour une animation (keyframes, name, duration, delay, direction)
- 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
- Concept de flexbox
- Propriété de flexbox (flex-direction, justify-content, etc.)
- 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
- 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)
- 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
- 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-ins sur son ordinateur avant la formation.