Guide des fonctions mathématiques en CSS pour les débutants

Salut à toi, futur·e sorcier·ère de CSS ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des fonctions mathématiques en CSS. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, tu seras étonné·e de voir combien il est possible de faire avec quelques astuces mathématiques en CSS !

Fonctions arithmétiques de base

Commençons par les bases. CSS nous offre quelques fonctions arithmétiques simples qui peuvent grandement faciliter notre vie lors de la conception de pages web. Ces fonctions nous permettent d'effectuer des calculs directement dans notre code CSS.

La fonction calc()

La fonction calc() est le couteau suisse des fonctions mathématiques en CSS. Elle permet d'effectuer des opérations arithmétiques de base directement dans ton CSS. Jetons un œil à un exemple :

.box {
width: calc(100% - 20px);
}

Dans cet exemple, nous définissons la largeur d'un élément avec la classe "box" à 100% de la largeur de son parent, moins 20 pixels. C'est super utile lorsque l'on veut créer des layouts responsifs qui s'adaptent à différentes tailles d'écran.

Reprenons cela :

• 100% représente la largeur complète de l'élément parent.
• -20px soustrait 20 pixels de cette largeur.
• La fonction calc() effectue ce calcul pour nous.

Tu peux utiliser les quatre opérations arithmétiques de base dans calc() : l'addition (+), la soustraction (-), la multiplication (*) et la division (/). Voici un autre exemple :

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

Dans ce cas, nous créons un layout à trois colonnes. Chaque colonne occupe un tiers de la largeur (33.33%) moins 10 pixels pour l'espacement, et nous ajoutons un margin droit qui est deux fois la taille de notre espacement.

Fonctions de comparaison

Maintenant que nous avons les bases, passons aux fonctions de comparaison. Elles sont géniales pour créer des designs responsifs qui s'adaptent à différentes conditions.

La fonction min()

La fonction min() renvoie la plus petite valeur d'une liste. Elle est parfaite pour définir des limites maximales sur les tailles des éléments. Par exemple :

.responsive-text {
font-size: min(5vw, 30px);
}

Cela définit la taille de la police à 5% de la largeur de la fenêtre, mais jamais supérieure à 30 pixels. C'est une excellente manière de rendre le texte responsive sans qu'il ne devienne trop grand sur les écrans grands.

La fonction max()

Comme tu pourrais le deviner, max() fait l'inverse de min(). Elle renvoie la plus grande valeur d'une liste. Voici comment tu pourrais l'utiliser :

.responsive-image {
width: max(300px, 50%);
}

Cela garantit qu'une image est toujours d'au moins 300 pixels de large, même si 50% de son conteneur est plus petit.

La fonction clamp()

La fonction clamp() est comme une combinaison de min() et max(). Elle prend trois valeurs : un minimum, une valeur préférée et un maximum. Voici un exemple :

.responsive-element {
width: clamp(200px, 50%, 500px);
}

Cela définit la largeur à 50% du conteneur, mais garantit qu'elle n'est jamais inférieure à 200px ou supérieure à 500px.

Fonctions mathématiques avancées

Maintenant que nous avons couvert les bases, plongons dans quelques fonctions plus avancées qui peuvent vraiment faire monter tes compétences en CSS au niveau supérieur.

La fonction abs()

La fonction abs() renvoie la valeur absolue d'un nombre. Cela peut être utile dans les animations ou lorsque tu veux t'assurer qu'une valeur est toujours positive. Voici un exemple :

.box {
transform: translateX(abs(var(--x)));
}

Cela déplacerait la boîte horizontalement en fonction de la valeur de la propriété personnalisée --x, toujours dans la direction positive, indépendamment de savoir si --x est positif ou négatif.

La fonction round()

La fonction round() arrondit un nombre au plus proche entier. Cela peut être utile pour aligner les valeurs sur une grille. Par exemple :

.grid-item {
width: calc(round(100% / 3));
}

Cela créerait un layout à trois colonnes où la largeur de chaque colonne est arrondie au plus proche pourcentage entier.

Fonctions de valeurs escaladées

Les fonctions de valeurs escaladées te permettent de créer des valeurs qui changent en étapes discrètes, plutôt qu'en douceur. Cela peut être génial pour créer des effets visuels intéressants.

La fonction mod()

La fonction mod() renvoie le reste après la division. Cela peut être utilisé pour créer des motifs récurrents. Voici un exemple :

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

Cela créerait un arrière-plan rayé où la lumière de chaque bande est déterminée par son index (--i), se répétant tous les 10 bandes.

Fonctions trigonométriques

Pour finir, penchons-nous sur quelques fonctions trigonométriques. Celles-ci peuvent être incroyablement puissantes pour créer des animations et des layouts complexes.

Les fonctions sin() et cos()

Les fonctions sin() et cos() renvoient respectivement le sinus et le cosinus d'un angle. Elles sont souvent utilisées dans les animations. Voici un exemple simple :

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

Cela crée une animation orbitale où un élément se déplace en cercle autour d'un point central.

Tableau de référence des fonctions

Voici un tableau de référence rapide de toutes les fonctions mathématiques en CSS que nous avons couvertes :

Fonction	Description	Exemple
calc()	Effectue des opérations arithmétiques de base	calc(100% - 20px)
min()	Renvoie la plus petite valeur	min(5vw, 30px)
max()	Renvoie la plus grande valeur	max(300px, 50%)
clamp()	Claque une valeur entre un minimum et un maximum	clamp(200px, 50%, 500px)
abs()	Renvoie la valeur absolue	abs(var(--x))
round()	Arrondit au plus proche entier	round(100% / 3)
mod()	Renvoie le reste après division	mod(var(--i) * 10, 100)
sin()	Renvoie le sinus d'un angle	sin(45deg)
cos()	Renvoie le cosinus d'un angle	cos(45deg)

Et voilà ! Nous avons couvert beaucoup de terrain, des fonctions arithmétiques de base aux fonctions trigonométriques avancées. Souviens-toi, la clé pour maîtriser celles-ci est la pratique. Essaie de les intégrer dans ton CSS, expérimente avec différentes combinaisons, et bientôt tu seras capable de créer des designs responsifs et éblouissants avec facilité. Bon codage !

Credits: Image by storyset