Aide CSS : notions supplémentaires¶

1. Transform et Transition¶

transform¶

L'attribut transform permet d'appliquer des transformations visuelles à un élément.

Exemples :

.box {
  transform: rotate(45deg); /* rotation de 45 degrés */
}

.box2 {
  transform: scale(1.5); /* agrandir de 50% */
}

.box3 {
  transform: translateX(3rem); /* déplacer de 3rem à droite */
}

transition¶

L'attribut transition permet d'animer en douceur un changement de style.

Exemple :

.button {
  background-color: blue;
  transition: background-color 0.5s;
}

.button:hover {
  background-color: red;
}

Ici, la couleur passera graduellement du bleu au rouge en 0,5 seconde.

2. Outline vs Border¶

border : fait partie du modèle de boîte (box model), prend de l'espace autour de l'élément.
outline : ne prend pas d'espace, se dessine au-dessus de l'élément, souvent utilisé pour l’accessibilité et la rétroaction visuelle.

Exemple :

.box-border {
  border: 2px solid black;
}

.box-outline {
  outline: 2px dashed red;
}

3. Différence entre :hover, :active et :focus¶

:hover : quand la souris survole l’élément.
:active : quand on clique sur l’élément (pendant l’action du bouton enfoncé).
:focus : quand l’élément est sélectionné (clavier, après clic, tabulation).

Exemple :

button:hover {
  background-color: lightblue;
}

button:active {
  background-color: blue;
}

button:focus {
  outline: 2px solid orange;
}

4. display: none¶

La valeur display: none masque complètement un élément de la page :

Il ne prend pas de place.
Il est invisible.

Contrairement à visibility: hidden, qui cache l’élément mais garde l’espace occupé.

Exemple :

.hidden {
  display: none;
}

✅ À retenir¶

transform modifie un élément, transition anime un changement.
border prend de la place, outline non.
:hover (survol), :active (clic), :focus (sélection clavier).
display: none supprime l’élément de l’affichage.