Techniques CSS Avancées

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction

Aperçu du Cours Objectif du Cours Sujets du Cours Comment Réussir

2. Positionnement des Éléments

Qu'est-ce Que le Positionnement?Positionnement Relatif Défi : Positionnement Relatif Positionnement Absolu Défi : Positionnement Absolu Positionnement Fixe Défi : Positionnement Fixe Positionnement Sticky Défi : Positionnement Sticky Ordre d'Empilement Défi : Ordre d'Empilement Débordement de Contenu

3. Transitions

Qu'est-ce Qu'une Transition ?Sélection de la Propriété de Transition Durée de Transition Fonction de Temps de Transition Délai de Temps de Transition Combinaison de Transition Défi : Ajout de Transition

4. Animations

Qu'est-ce Que l'Animation ?Spécifier le Temps de l'Animation Contrôler la Quantité et la Direction de Lecture de l'Animation Gestion de l'État de l'Animation Composition d'Animation Défi : Ajouter une Animation

5. Transformations

Qu'est-ce Que la Transformation?Mise à l'Échelle Rotation Défi : Ajout de Mise à l'Échelle et de Rotation Traduire Inclinaison Perspective Défi : Ajouter la Translation et l'Inclinaison

6. Sites Web et Applications Adaptatifs/Réactifs

Qu'est-ce Que le Design Adaptatif/Réactif ?@media Requête Dispositions Adaptatives - Réactives Inspection de la Page Web Défi : Inspection de la Mise en Page Adaptative/Réactive

7. Préprocesseurs

Qu'est-ce Qu'un Préprocesseur ?Syntaxe Sass Variables Sass Opérateurs Numériques Sass Imbrication Sass Directive @extend Structure des Dossiers-Fichiers

Combinaison de Transition

Nous pouvons combiner toutes les propriétés liées à la transition en une seule ligne.

css

Imaginons que nous devons ajouter une propriété de transition à l'élément. Nous attendons :

le changement de la propriété background-color ;
la durée est de 1.2s ;
la fonction temporelle doit être ease-in-out ;
le délai est de 250ms.

Forme longue

css

Forme abrégée

css

Remarque

Il n'y a aucune différence de syntaxe pour le navigateur. Nous pouvons choisir l'option que nous préférons.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 6

some-alt