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

La création de formes d'ondes dans CSS peut être un défi. Nous essayons souvent de simuler les effets d'onde en utilisant border-radius les attributs et un grand nombre d'approximations, mais cela peut devenir plus complexe lorsqu'il s'agit de motifs d'onde.

Bien que SVG soit un moyen plus efficace de créer des formes d'onde, CSS peut également obtenir de bons résultats et le code ne doit pas être trop compliqué. Encore mieux, je fournis un générateur en ligne pour simplifier le processus!

En utilisant le générateur, vous pouvez voir que le code CSS généré ne contient que deux gradients et une propriété CSS mask - c'est tout, et vous pouvez créer diverses formes et motifs d'ondes. De plus, nous pouvons facilement contrôler la taille et la courbure de l'onde.

Certaines valeurs peuvent ressembler à des "nombres magiques", mais il y a en fait une base logique derrière eux. Nous disséquerons le code et découvrirons tous les secrets de la création d'ondes.

Cet article est un suivi d'un article précédent sur la création de diverses bordures en zigzag, limitée de portée, festonnée et ondulée. Je recommande fortement de lire cet article car il utilise la même technique décrite ici, mais plus en détail.

Le principe mathématique derrière les vagues

à proprement parler, il n'y a pas de formule magique pour créer des formes d'onde. Toute forme avec une courbe supérieure et inférieure peut être appelée une vague, nous ne nous limitons donc pas aux calculs mathématiques complexes. Au lieu de cela, nous utiliserons une base géométrique pour reproduire les vagues.

Commençons par un exemple simple en utilisant deux formes circulaires:

Nous avons deux cercles avec le même rayon adjacent les uns aux autres. Avez-vous vu cette ligne rouge? Il couvre la moitié supérieure du premier tour et la moitié inférieure du deuxième tour. Imaginez maintenant que vous prenez cette ligne et répétez-la.

Nous avons vu les vagues. Maintenant, remplissons la section inférieure (ou supérieure) pour obtenir les résultats suivants:

Regardez! Nous obtenons une forme d'onde et nous pouvons utiliser une variable pour contrôler le rayon du cercle. C'est l'une des vagues les plus faciles que nous pouvons créer et celle que j'ai montrée dans mon post précédent.

Ajoutons une certaine complexité en prenant la première légende et en déplaçant un peu le cercle:

Nous avons encore deux cercles avec le même rayon, mais ils ne sont plus alignés horizontalement. Dans ce cas, la ligne rouge ne couvre plus la moitié de la zone de chaque cercle, mais une zone plus petite. Cette zone est limitée par la ligne rouge en pointillés. La ligne passe par le point où deux cercles se rencontrent.

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

Je pense que vous comprenez. En contrôlant la position et la taille du cercle, nous pouvons créer n'importe quelle vague que nous voulons. Nous pouvons même créer des variables pour eux, que j'appellerai respectivement P et S.

Vous avez peut-être remarqué que dans le générateur en ligne, nous utilisons deux entrées pour contrôler les vagues. Ils sont cartographiés aux variables mentionnées ci-dessus. S est la "taille de l'onde" et P est la "courbure de l'onde".

Je définis P comme p = m * s, où m est la variable que vous ajustez lors de la mise à jour de la courbure de l'onde. Cela nous permet de toujours maintenir la même courbure, même si nous mettons à jour S.

m peut être n'importe quelle valeur entre 0 et 2. 0 donnera notre premier cas spécial où deux cercles sont alignés horizontalement. 2 est une valeur maximale. Nous pouvons être plus gros, mais après quelques tests, j'ai constaté que toute valeur supérieure à 2 produira une mauvaise forme plate.

N'oublions pas le rayon de notre forme circulaire! Cela peut également être défini à l'aide de S et P, comme indiqué ci-dessous:

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Lorsque m est égal à 0 (c'est-à-dire que p est égal à 0), nous aurons r = s / 2.

Nous avons tout ce dont nous avons besoin pour convertir tout cela en gradients dans CSS!

Créer un gradient

Nos vagues utilisent des cercles, et en ce qui concerne les cercles, nous parlons de gradients radiaux. Étant donné que les deux cercles définissent nos vagues, nous utiliserons logiquement deux gradients radiaux.

Nous commencerons par un cas spécial où P est égal à 0. Ceci est la première illustration de gradient:

Ce gradient crée la première courbure tout en remplissant toute la zone inférieure - sans doute «l'eau» des vagues.

<code>.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;
}</code>

--size Les variables définissent le rayon et la taille du gradient radial. Si nous le comparons avec la variable S, il est égal à S / 2.

Ajoutons le deuxième gradient maintenant:

Le deuxième gradient est juste un cercle pour compléter nos vagues:

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

Si vous regardez le post précédent, vous constaterez que je répète simplement ce que j'ai fait là-bas.

J'ai lu deux articles, mais la configuration du gradient n'est pas la même.

En effet, nous pouvons utiliser différentes configurations de gradient pour obtenir le même résultat. Si vous comparez les deux configurations, vous remarquerez un alignement légèrement différent, mais l'astuce est la même. Si vous n'êtes pas familier avec les dégradés, cela peut être déroutant, mais ne vous inquiétez pas. Avec quelques exercices, vous vous y habituez et vous constaterez que différentes syntaxes peuvent produire les mêmes résultats.

C'est le code complet de notre première vague:

<code>.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;
}</code>

Prenons maintenant ce code et ajustez-le afin que nous introduisions une variable qui peut être complètement utilisée pour créer n'importe quelle vague que nous voulons.正如我们在上一节中看到的，主要技巧是移动圆形，使它们不再对齐，因此让我们更新每个圆形的位置。 Nous déplaçons le premier et le second.

Notre code ressemblera à ceci:

<code>.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;
}</code>

J'ai introduit une nouvelle variable --p pour définir la position centrale de chaque cercle. Le premier gradient utilise 50% calc(-1*var(--p)), donc son centre se déplace vers le haut, tandis que le deuxième gradient utilise calc(var(--size) var(--p)) pour le déplacer vers le bas.

La démonstration est meilleure que mille mots:

Les cercles ne sont ni alignés ni ne se touchent. Nous les avons séparés loin sans changer le rayon, nous avons donc perdu les vagues. Mais nous pouvons résoudre ces problèmes en calculant le nouveau rayon en utilisant la même méthode mathématique utilisée plus tôt. N'oubliez pas R = SQRT (P² S²) / 2. Dans notre cas, --size est égal à S / 2; donc c'est --p car il est également égal à P / 2 parce que nous déplaçons deux cercles. Par conséquent, la distance entre leurs points centraux est deux fois plus élevée que --p:

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Cela nous donne le résultat de 55,9px.

Nos vagues sont de retour! Insérons l'équation dans notre CSS:

<code>.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;
}</code>

Le CSS ci-dessus semble valable, mais cela ne fonctionnera pas parce que nous ne pouvons pas multiplier deux longueurs, nous devons donc introduire une variable M pour contrôler la courbure, comme décrit dans la section précédente.

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

C'est très cool: seulement deux gradients sont nécessaires pour obtenir une onde fraîche que vous pouvez appliquer à n'importe quel élément à l'aide de l'attribut mask. Pas besoin d'essayer de le faire - il vous suffit de mettre à jour deux variables!

onde inverse

Et si nous voulons que les vagues se déplacent dans l'autre sens, nous remplissons le "ciel" au lieu de "l'eau"? Croyez-le ou non, nous devons seulement mettre à jour deux valeurs:

<code>.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;
}</code>

Tout ce que j'ai fait, c'est ajouter un décalage égal à 100%, comme indiqué ci-dessus. Les résultats sont les suivants:

Nous pourrions envisager d'utiliser une syntaxe plus conviviale de mots clés pour faciliter la tâche:

<code>.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;
}</code>

Nous utilisons les mots clés left et bottom pour spécifier les bords et les décalages. Par défaut, les navigateurs par défaut sont par défaut left et top - c'est pourquoi nous utilisons 100% pour déplacer les éléments vers le bas. Nous l'avons en fait déplacé à 100% du haut, donc c'est en fait la même chose que de dire le fond. Plus facile à lire que les mathématiques!

En utilisant cette syntaxe mise à jour, nous remplaçons simplement bottom par top - et vice versa - pour modifier la direction de l'onde.

Si vous souhaitez obtenir les vagues supérieure et inférieure, nous combinons tous les gradients dans une déclaration:

<code>R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))</code>

Si vous vérifiez le code, vous verrez qu'en plus de combiner tous les gradients, j'ai également réduit sa hauteur de 100% à 51% pour qu'ils couvrent tous la moitié de l'élément. Oui, 51%. Nous avons besoin d'un petit pourcentage supplémentaire pour faire de petits chevauchements pour éviter les lacunes.

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

Ce sont vos devoirs! Profitez de ce que nous avons fait en haut et en bas et essayez de mettre à jour les valeurs pour obtenir les valeurs à droite et à gauche. Ne vous inquiétez pas, c'est facile, la seule chose que vous devez faire est d'échanger des valeurs.

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

... (Le contenu restant est similaire au texte d'origine, sauf que la langue et l'expression sont ajustées, et les images et les blocs de code sont conservés)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!