Comment créer des formes et des motifs ondulés en CSS

La vague est probablement l'une des formes les plus difficiles à réaliser en CSS. Nous essayons toujours de l'approximer avec des propriétés comme border-radius et beaucoup de nombres magiques jusqu'à ce que nous obtenions quelque chose qui semble assez proche. Et c'est avant même d'entrer dans les motifs ondulés, qui sont plus difficiles.

« SVG ! » vous pourriez dire, et vous avez probablement raison, que c'est une meilleure façon de procéder. Mais nous verrons que CSS peut faire de belles vagues et que le code pour cela n'a pas besoin d'être complètement fou. Et devine quoi? j'ai un générateur en ligne pour le rendre encore plus trivial !

Si vous jouez avec le générateur, vous pouvez voir que le CSS qu'il crache n'est que deux dégradés et une propriété de masque CSS - juste ces deux choses et nous pouvons créer n'importe quel type de forme ou de motif d'onde. Sans compter qu'on peut facilement contrôler la taille et la courbure des vagues tant qu'on y est.

Certaines des valeurs peuvent ressembler à "nombres magiques” mais il y a en fait une logique derrière eux et nous allons disséquer le code et découvrir tous les secrets derrière la création de vagues.

Cet article fait suite à un précédent où j'ai construit toutes sortes de bordures en zig-zag, à portée, festonnées et oui, ondulées. Je recommande fortement de vérifier cet article car il utilise la même technique que nous allons couvrir ici, mais plus en détail.

Les maths derrière les vagues

À proprement parler, il n'y a pas de formule magique derrière les formes ondulées. Toute forme avec des courbes qui montent et descendent peut être appelée une vague, nous n'allons donc pas nous limiter à des mathématiques complexes. Au lieu de cela, nous reproduirons une onde en utilisant les bases de la géométrie.

Commençons par un exemple simple utilisant deux formes de cercle :

Nous avons deux cercles de même rayon l'un à côté de l'autre. Voyez-vous cette ligne rouge? Il couvre la moitié supérieure du premier cercle et la moitié inférieure du second. Imaginez maintenant que vous prenez cette ligne et que vous la répétez.

Nous voyons déjà la vague. Remplissons maintenant la partie du bas (ou celle du haut) pour obtenir ce qui suit :

Tada ! Nous avons une forme ondulée, et une que nous pouvons contrôler en utilisant une variable pour les rayons du cercle. C'est l'une des vagues les plus faciles que nous puissions faire et c'est celle que j'ai montrée dans this article précédent

Ajoutons un peu de complexité en prenant la première illustration et en déplaçant un peu les cercles :

Nous avons toujours deux cercles avec les mêmes rayons mais ils ne sont plus alignés horizontalement. Dans ce cas, la ligne rouge ne couvre plus la moitié de la surface de chaque cercle, mais une zone plus petite à la place. Cette zone est délimitée par la ligne rouge pointillée. Cette ligne croise le point où les deux cercles se rencontrent.

Maintenant, prenez cette ligne et répétez-la et vous obtenez une autre vague, plus douce.

Je pense que vous avez compris l'idée. En contrôlant la position et la taille des cercles, nous pouvons créer n'importe quelle vague que nous voulons. Nous pouvons même créer des variables pour eux, que j'appellerai P ainsi que S, Respectivement.

Vous avez probablement remarqué que, dans le générateur en ligne, nous contrôlons l'onde à l'aide de deux entrées. Ils correspondent aux variables ci-dessus. S est la "taille de la vague" et P est la "courbure de l'onde".

je définis P as P = m*S De m est la variable que vous ajustez lors de la mise à jour de la courbure de l'onde. Cela nous permet d'avoir toujours la même courbure, même si nous mettons à jour S.

m peut être n'importe quelle valeur entre 0 ainsi que 2. 0 nous donnera le premier cas particulier où les deux cercles sont alignés horizontalement. 2 est une sorte de valeur maximale. On peut aller plus gros, mais après quelques tests j'ai trouvé que rien au dessus 2 produit de mauvaises formes plates.

N'oublions pas le rayon de notre cercle ! Cela peut également être défini en utilisant S ainsi que P comme ça:

R = sqrt(P² + S²)/2

Quand P est égal à 0, nous aurons R = S/2.

On a tout pour commencer à convertir tout ça en dégradés en CSS !

Créer des dégradés

Nos vagues utilisent des cercles, et quand on parle de cercles on parle de gradients radiaux. Et puisque deux cercles définissent notre vague, nous utiliserons logiquement deux gradients radiaux.

Nous commencerons par le cas particulier où P est égal à 0. Voici l'illustration du premier dégradé :

Ce dégradé crée la première courbure tout en remplissant toute la zone inférieure - "l'eau" de la vague pour ainsi dire.

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Les --size La variable définit le rayon et la taille du dégradé radial. Si on le compare avec le S variable, alors il est égal à S/2.

Ajoutons maintenant le deuxième dégradé :

Le deuxième dégradé n'est rien d'autre qu'un cercle pour compléter notre vague :

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

Si vous cochez l'article précédent vous verrez que je ne fais que répéter ce que j'ai déjà fait là.

J'ai suivi les deux articles mais les configurations de dégradé ne sont pas les mêmes.

C'est parce que nous pouvons atteindre le même résultat en utilisant différentes configurations de gradient. Vous remarquerez une légère différence dans l'alignement si vous comparez les deux configurations, mais l'astuce est la même. Cela peut être déroutant si vous n'êtes pas familier avec les dégradés, mais ne vous inquiétez pas. Avec un peu de pratique, vous vous y habituerez et vous constaterez par vous-même qu'une syntaxe différente peut conduire au même résultat.

Voici le code complet de notre première vague :

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Prenons maintenant ce code et ajustons-le à l'endroit où nous introduisons une variable qui le rend entièrement réutilisable pour créer n'importe quelle vague que nous voulons. Comme nous l'avons vu dans la section précédente, l'astuce principale consiste à déplacer les cercles afin qu'ils ne soient plus alignés, alors mettons à jour la position de chacun. Nous allons déplacer le premier vers le haut et le second vers le bas.

Notre code ressemblera à ceci :

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

j'ai introduit un nouveau --p variable qui l'utilise pour définir la position centrale de chaque cercle. Le premier dégradé utilise 50% calc(-1*var(--p)), donc son centre monte tandis que le second utilise calc(var(--size) + var(--p)) pour le faire descendre.

Une démo vaut mille mots :

Les cercles ne sont ni alignés ni se touchent. Nous les avons espacés sans changer leurs rayons, nous avons donc perdu notre vague. Mais nous pouvons arranger les choses en utilisant les mêmes calculs que nous avons utilisés précédemment pour calculer le nouveau rayon. Rappelez-vous que R = sqrt(P² + S²)/2. Dans notre cas, --size est égal à S/2; pareil pour --p qui est également égal à P/2 puisque nous déplaçons les deux cercles. Ainsi, la distance entre leurs points centraux est le double de la valeur de --p pour ça:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

Cela nous donne un résultat de 55.9px.

Notre vague est de retour ! Branchons cette équation dans notre CSS :

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

Ceci est un code CSS valide. sqrt() fait partie du cahier des charges, mais au moment où j'écris ceci, il n'y a pas de support de navigateur pour cela. Cela signifie que nous avons besoin d'une pincée de JavaScript ou de Sass pour calculer cette valeur jusqu'à ce que nous devenions plus larges sqrt() soutien.

C'est sacrément cool : il suffit de deux dégradés pour obtenir une vague cool que vous pouvez appliquer à n'importe quel élément en utilisant le mask propriété. Plus d'essais et d'erreurs - il vous suffit de mettre à jour deux variables et vous êtes prêt à partir !

Inverser la vague

Que se passe-t-il si nous voulons que les vagues aillent dans l'autre sens, où nous remplissons le « ciel » au lieu de « l'eau ». Croyez-le ou non, tout ce que nous avons à faire est de mettre à jour deux valeurs :

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

Tout ce que j'ai fait là-bas, c'est ajouter un décalage égal à 100%, mis en évidence ci-dessus. Voici le résultat :

Nous pouvons envisager une syntaxe plus conviviale en utilisant des valeurs de mots-clés pour le rendre encore plus simple :

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

Nous utilisons le left ainsi que bottom mots-clés pour spécifier les côtés et le décalage. Par défaut, le navigateur utilise par défaut left ainsi que top — c'est pourquoi nous utilisons 100% pour déplacer l'élément vers le bas. En réalité, nous le déplaçons du top by 100%, donc c'est vraiment la même chose que de dire bottom. Bien plus facile à lire que les maths !

Avec cette syntaxe mise à jour, tout ce que nous avons à faire est d'échanger bottom en top — ou vice versa — pour changer la direction de l'onde.

Et si vous souhaitez obtenir à la fois des vagues du haut et du bas, nous combinons tous les dégradés dans une seule déclaration :

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

Si vous vérifiez le code, vous verrez qu'en plus de combiner tous les dégradés, j'ai également réduit leur hauteur de 100% à 51% de sorte qu'ils couvrent tous les deux la moitié de l'élément. Oui, 51%. Nous avons besoin de ce petit pourcentage supplémentaire pour un petit chevauchement qui évite les lacunes.

Qu'en est-il des côtés gauche et droit ?

C'est tes devoirs ! Prenez ce que nous avons fait avec les côtés supérieur et inférieur et essayez de mettre à jour les valeurs pour obtenir les valeurs droite et gauche. Ne vous inquiétez pas, c'est facile et la seule chose que vous devez faire est d'échanger les valeurs.

Si vous avez des problèmes, vous pouvez toujours utiliser le générateur en ligne pour vérifier le code et visualiser le résultat.

Lignes ondulées

Plus tôt, nous avons fait notre première vague en utilisant une ligne rouge puis avons rempli la partie inférieure de l'élément. Que diriez-vous de cette ligne ondulée? C'est une vague aussi ! Encore mieux, si nous pouvons contrôler son épaisseur avec une variable afin de pouvoir la réutiliser. Faisons-le!

Nous n'allons pas repartir de zéro mais plutôt reprendre le code précédent et le mettre à jour. La première chose à faire est de mettre à jour les arrêts de couleur des dégradés. Les deux dégradés partent d'une couleur transparente vers une couleur opaque, ou vice versa. Pour simuler une ligne ou une bordure, nous devons commencer par transparent, passer à opaque, puis revenir à nouveau à transparent :

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

Je pense que vous avez déjà deviné que le --b variable est ce que nous utilisons pour contrôler l'épaisseur de la ligne. Appliquons ceci à nos dégradés :

Ouais, le résultat est loin d'être une ligne ondulée. Mais en regardant de plus près, nous pouvons voir qu'un dégradé crée correctement la courbure inférieure. Donc, tout ce que nous avons vraiment besoin de faire est de rectifier le deuxième gradient. Au lieu de garder un cercle complet, faisons-en un partiel comme l'autre dégradé.

Encore loin, mais nous avons les deux courbures qu'il nous faut ! Si vous vérifiez le code, vous verrez que nous avons deux dégradés identiques. La seule différence est leur positionnement :

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

Maintenant, nous devons ajuster la taille et la position pour la forme finale. Nous n'avons plus besoin que le dégradé soit de pleine hauteur, nous pouvons donc remplacer 100% avec ça:

/* Size plus thickness */
calc(var(--size) + var(--b))

Il n'y a aucune logique mathématique derrière cette valeur. Il doit seulement être assez grand pour la courbure. Nous verrons son effet sur le motif dans un instant. En attendant, mettons également à jour la position pour centrer verticalement les dégradés :

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

Pas encore tout à fait là :

Un dégradé doit se déplacer un peu vers le bas et l'autre un peu vers le haut. Les deux doivent se déplacer de la moitié de leur hauteur.

Nous y sommes presque! Nous avons besoin d'un petit correctif pour que le rayon ait un chevauchement parfait. Les deux lignes doivent être décalées de la moitié de la bordure (--b) épaisseur:

On l'a eu! Une ligne ondulée parfaite que nous pouvons facilement ajuster en contrôlant quelques variables :

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

Je sais que la logique prend un peu de temps à comprendre. C'est bien et comme je l'ai dit, créer une forme ondulée en CSS n'est pas facile, sans parler des calculs délicats derrière cela. C'est pourquoi le générateur en ligne est une bouée de sauvetage - vous pouvez facilement obtenir le code final même si vous ne comprenez pas entièrement la logique qui le sous-tend.

Motifs ondulés

Nous pouvons créer un motif à partir de la ligne ondulée que nous venons de créer !

Oh non, le code du pattern sera encore plus difficile à comprendre !

Pas du tout! Nous avons déjà le code. Tout ce que nous devons faire est d'enlever repeat-x de ce que nous avons déjà, et tada. 🎉

Un joli motif ondulé. Vous souvenez-vous de l'équation que j'ai dit que nous reviendrions ?

/* Size plus thickness */
calc(var(--size) + var(--b))

Eh bien, c'est ce qui contrôle la distance entre les lignes du motif. Nous pouvons en faire une variable, mais il n'y a pas besoin de plus de complexité. Je n'utilise même pas de variable pour cela dans le générateur. Je changerai peut-être cela plus tard.

Voici le même modèle allant dans une direction différente :

Je vous fournis le code dans cette démo, mais je vous demanderais de le disséquer et de comprendre les changements que j'ai apportés pour que cela se produise.

Simplifier le code

Dans toutes les démos précédentes, nous définissons toujours le --size ainsi que --p indépendamment. Mais vous souvenez-vous comment j'ai mentionné plus tôt que le générateur en ligne évalue P comme égal à m*S, Où m contrôle la courbure de l'onde ? En définissant un multiplicateur fixe, nous pouvons travailler avec une vague particulière et le code peut devenir plus facile. C'est ce dont nous aurons besoin dans la plupart des cas : une forme ondulée spécifique et une variable pour contrôler sa taille.

Mettons à jour notre code et introduisons le m variable:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

Comme vous pouvez le voir, nous n'avons plus besoin de --p variable. je l'ai remplacé par var(--m)*var(--size), et optimisé certains calculs en conséquence. Maintenant, si nous voulons travailler avec une forme ondulée particulière, nous pouvons omettre le --m variable et remplacez-la par une valeur fixe. Essayons .8 par exemple.

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

Vous voyez comment le code est plus facile maintenant ? Une seule variable pour contrôler votre vague, plus vous n'avez plus besoin de compter sur sqrt() qui n'a pas de support de navigateur !

Vous pouvez appliquer la même logique à toutes les démos que nous avons vues, même pour les lignes ondulées et le motif. J'ai commencé par une explication mathématique détaillée et j'ai donné le code générique, mais vous pourriez avoir besoin d'un code plus simple dans un cas d'utilisation réel. C'est ce que je fais tout le temps. J'utilise rarement le code générique, mais je considère toujours une version simplifiée surtout que, dans la plupart des cas, j'utilise des valeurs connues qui n'ont pas besoin d'être stockées en tant que variables. (Alerte divulgâcheur : Je partagerai quelques exemples à la fin !)

Les limites de cette approche

Mathématiquement, le code que nous avons créé devrait nous donner des formes et des motifs ondulés parfaits, mais en réalité, nous serons confrontés à des résultats étranges. Donc, oui, cette méthode a ses limites. Par exemple, le générateur en ligne est capable de produire de mauvais résultats, notamment avec des lignes ondulées. Une partie du problème est due à une combinaison particulière de valeurs où le résultat est brouillé, comme l'utilisation d'une grande valeur pour l'épaisseur de la bordure par rapport à la taille :

Pour les autres cas, c'est le problème lié à certains arrondis qui entraînera un désalignement et des écarts entre les vagues :

Cela dit, je pense toujours que la méthode que nous avons couverte reste bonne car elle produit des ondes douces dans la plupart des cas, et nous pouvons facilement éviter les mauvais résultats en jouant avec différentes valeurs jusqu'à ce que nous l'obtenions parfaite.

Emballage en place

J'espère qu'après cet article, vous n'aurez plus à tâtonner avec des essais et des erreurs pour créer une forme ou un motif ondulé. en outre au générateur en ligne, vous avez tous les secrets mathématiques pour créer n'importe quel type de vague que vous voulez !

L'article se termine ici, mais vous disposez maintenant d'un outil puissant pour créer des designs fantaisistes qui utilisent des formes ondulées. Voici l'inspiration pour vous aider à démarrer…

Qu'en pensez-vous? Utilisez mon générateur en ligne (ou écrivez le code manuellement si vous avez déjà appris tous les calculs par cœur) et montrez-moi vos créations ! Ayons une bonne collection dans la section des commentaires.