Les fonctions

Le CSS inclut de nombreuses fonctions. En voici quelques-unes très pratiques :

DéfinitionCouleurs

Pour les couleurs rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), color()

1
.button {
2
  background: hsl(200, 80%, 50%);
3
  color: white;
4
}

DéfinitionTransformation

translate(), rotate(), scale(), skew(), matrix(), perspective().

1
.box {
2
  transform: translate(50px, 20px) rotate(30deg) scale(1.2) skew(10deg, 0);
3
}

DéfinitionImages

blur(), brightness(), contrast(), grayscale(), sepia(), invert(), hue-rotate(), saturate(), opacity(),

1
img {
2
  filter: grayscale(0.8) blur(3px) contrast(120%);
3
}

Définitionattr()

La fonction attr() permet de récupérer la valeur d'un attribut de l'élément sur lequel la règle CSS est appliquée.

attr( <nom-attribut> <type>? , <valeur-par-défaut>? )

1
.box {
2
  width: attr(data-size length, 100px);
3
  color: attr(data-color color, green);
4
5
}
1
<div class="box" data-color="red">
2
<div class="box" data-size="300px">




Fonction attr()
Définitioncounter()
La fonction counter() permet de gérer la numérotation d'éléments à l'aide d'un compteur.
Les propriétés counter-reset et counter-incremente permettent de gérer l'évolution du compteur.
1
body {
2
  counter-reset: numero;
3
}
4
h1::before {
5
  counter-increment: numero;
6
  content: counter(numero) "-";
7
}
1
<h1>Titre</h1>
2
<h1>Titre</h1>
3
<h1>Titre</h1>


Titre


Titre


Titre


Fonction counter()
DéfinitionCalculs dynamiques avec calc()
La fonction calc() permet d’effectuer des calculs à partir de valeurs de même ou de différentes unités.
1
section {
2
  width: calc(100% - 50px);
3
}