CSS で波状の形状とパターンを作成する方法

波はおそらく、CSS で作成するのが最も難しい形状の XNUMX つです。 常に次のようなプロパティで近似しようとします border-radius そして、ちょっと近いと感じるものが得られるまで、たくさんのマジックナンバー。 そして、それは、より難しい波状パターンに入る前です.

「SVGそれ！」 と言うかもしれませんが、その方が良い方法だというのはおそらく正しいでしょう。 しかし、CSS は素晴らしい波を作ることができ、CSS のコードはすべてクレイジーである必要はないことがわかります。 そして、何を推測しますか？ 私は持っている オンラインジェネレーター さらに簡単にするために！

ジェネレーターをいじってみると、ジェネレーターが吐き出す CSS は XNUMX つのグラデーションと CSS マスク プロパティだけであることがわかります。この XNUMX つだけで、あらゆる種類の波形やパターンを作成できます。 言うまでもなく、波のサイズと曲率を簡単に制御できます。

一部の値は「マジックナンバー」しかし、実際にはそれらの背後にロジックがあり、コードを分析して、波を作成する背後にあるすべての秘密を発見します.

この記事は のフォローアップです 前のもの ここで、あらゆる種類のさまざまなジグザグ、スコープ、スカラップ、およびはい、波状の境界線を作成しました。 ここで説明するのと同じ手法を使用しているため、その記事を確認することを強くお勧めしますが、より詳細に説明しています.

波の背後にある数学

厳密に言えば、波形の背後にある魔法の公式は XNUMX つではありません。 曲線が上下する形状はすべて波と呼ぶことができるため、複雑な数学に限定するつもりはありません。 代わりに、幾何学の基礎を使用して波を再現します。

XNUMX つの円形状を使用した簡単な例から始めましょう。

同じ半径の XNUMX つの円が隣り合っています。 あの赤い線が見えますか？ 最初の円の上半分と XNUMX 番目の円の下半分をカバーします。 今、あなたがその行を取り、それを繰り返すと想像してください。

すでに波が見えています。 次に、下の部分 (または上の部分) を埋めて、次のようにします。

多田！ 波状の形状があり、円の半径に XNUMX つの変数を使用して制御できます。 これは私たちが作ることができる最も簡単な波の XNUMX つです。 this 前の記事

最初の図の円を少し動かして、少し複雑にしましょう。

半径が同じ XNUMX つの円がまだありますが、それらは水平方向に整列していません。 この場合、赤い線は各円の領域の半分ではなく、より小さな領域をカバーしています。 この領域は赤い破線で制限されています。 その線は、両方の円が交わる点を横切ります。

その行を繰り返して、別の波、より滑らかな波を取得します。

私はあなたがアイデアを得ると思います。 円の位置と大きさをコントロールすることで、思い通りの波を作ることができます。 それらの変数を作成することもできます。 P & Sそれぞれ。

お気付きかもしれませんが、オンライン ジェネレーターでは、XNUMX つの入力を使用して波を制御します。 これらは上記の変数にマップされます。 S は「波の大きさ」であり、 P 「波の曲率」です。

私は定義しています P as P = m*S コラボレー m 波の曲率を更新するときに調整する変数です。 これにより、S を更新しても、常に同じ曲率を維持できます。

m 間の任意の値にすることができます 0 & 2. 0 両方の円が水平に配置されている最初の特定のケースを示します。 2 は一種の最大値です。 もっと大きくすることもできますが、いくつかのテストの後、上記の何かが見つかりました 2 悪い、平らな形状を生成します。

円の半径を忘れないようにしましょう! を使用して定義することもできます S & P このような：

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

日時 P 等しい 0、 R = S/2.

これらすべてを CSS のグラデーションに変換するためのすべてが揃っています。

グラデーションの作成

私たちの波は円を使用し、円について話すときは放射状グラデーションについて話します。 XNUMX つの円が波を定義するため、論理的には XNUMX つの放射状グラデーションを使用します。

特定のケースから始めます。 P 等しい 0. 最初のグラデーションの図を次に示します。

この勾配は、いわば波の「水」であるボトム領域全体を埋めながら、最初の曲率を作成します。

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

　 --size 変数は、放射状グラデーションの半径とサイズを定義します。 と比較すると、 S 変数、それは等しいです S/2.

次に、XNUMX 番目のグラデーションを追加しましょう。

XNUMX 番目のグラデーションは、波を完成させるための円に他なりません。

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

あなたがチェックしている場合 前の記事 すでに行ったことを単に繰り返しているだけであることがわかります。

両方の記事に従いましたが、グラデーション構成は同じではありません。

これは、さまざまなグラデーション構成を使用して同じ結果に到達できるためです。 両方の構成を比較すると、位置合わせにわずかな違いがあることに気付くでしょうが、トリックは同じです。 グラデーションに慣れていない場合、これは混乱する可能性がありますが、心配する必要はありません。 少し練習すれば、それらに慣れ、異なる構文が同じ結果につながる可能性があることに気付くでしょう。

最初のウェーブの完全なコードは次のとおりです。

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

次に、このコードを調整して、任意のウェーブを作成するためにこれを完全に再利用できるようにする変数を導入します。 前のセクションで見たように、主なトリックは円を移動して整列しないようにすることです。それぞれの位置を更新しましょう。 最初のものを上に、XNUMX 番目のものを下に移動します。

コードは次のようになります。

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

新作を紹介しました --p 各円の中心位置を定義するために使用された変数。 最初のグラデーションは使用しています 50% calc(-1*var(--p))、そのため、XNUMX番目のものが使用されている間、その中心が上に移動します calc(var(--size) + var(--p)) 下に移動します。

デモは千の言葉に値します。

円は整列しておらず、互いに接触していません。 半径を変更せずにそれらを遠く離して配置したため、波が失われました。 しかし、以前に使用したのと同じ数学を使用して新しい半径を計算することで問題を解決できます。 覚えておいてください R = sqrt(P² + S²)/2. 私たちの場合には、 --size 等しい S/2; についても同じ --p これはまた等しい P/2 両方の円を動かしているからです。 したがって、それらの中心点間の距離は の値の XNUMX 倍です。 --p このため：

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

これにより、次の結果が得られます 55.9px.

私たちの波が戻ってきました！ その方程式を 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;
}

これは有効な CSS コードです。 sqrt() 仕様の一部です、しかし、私がこれを書いている時点では、ブラウザのサポートはありません。 つまり、より広くなるまで、その値を計算するために JavaScript または Sass を少し加える必要があります。 sqrt() サポート。

これは非常にクールです。XNUMX つのグラデーションを使用してクールなウェーブを作成するだけで、 mask 財産。 試行錯誤はもう必要ありません。XNUMX つの変数を更新するだけで準備完了です。

波を逆にする

「水」の代わりに「空」を埋める波を別の方向に向けたい場合はどうでしょうか。 信じられないかもしれませんが、あとは XNUMX つの値を更新するだけです。

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

私が行ったのは、オフセットに等しい値を追加することだけです 100%、上で強調表示されています。 結果は次のとおりです。

さらに簡単にするために、キーワード値を使用してより使いやすい構文を検討できます。

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

私たちは left & bottom 辺とオフセットを指定するキーワード。 デフォルトでは、ブラウザのデフォルトは left & top —それが私たちが使用する理由です 100% 要素を一番下に移動します。 実際には、 top by 100%、だから本当に言っているのと同じです bottom. 数学より読みやすい！

この更新された構文では、スワップするだけです bottom for top — またはその逆 — 波の方向を変更します。

上と下の両方の波を取得したい場合は、すべてのグラデーションを XNUMX つの宣言に結合します。

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

コードを確認すると、すべてのグラデーションを組み合わせるだけでなく、高さを 100% 〜へ 51% 両方とも要素の半分をカバーするようにします。 はい、 51%. ギャップを回避する小さなオーバーラップには、少し余分なパーセントが必要です。

左側と右側はどうですか？

それはあなたの宿題です ！ 上辺と下辺で行ったことを取り、値を更新して右と左の値を取得してみます。 心配する必要はありません。簡単で、値を交換するだけです。

困ったらいつでも使える オンラインジェネレータ コードをチェックして結果を視覚化します。

波線

以前、赤い線を使用して最初の波を作成し、要素の下部を塗りつぶしました。 あの波線はどうですか？ それも波！ さらに良いのは、再利用できるように変数で厚さを制御できる場合です。 やってみましょう！

ゼロから始めるのではなく、以前のコードを取得して更新します。 最初に行うことは、グラデーションのカラー ストップを更新することです。 両方のグラデーションは、透明な色から不透明な色へ、またはその逆に始まります。 線または境界線をシミュレートするには、透明から始めて不透明にし、再び透明に戻す必要があります。

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

あなたはすでにそれを推測していると思います --b 変数は、線の太さを制御するために使用しているものです。 これをグラデーションに適用しましょう。

ええ、結果は波線にはほど遠いです。 しかし、よく見ると、XNUMX つのグラデーションが底部の曲率を正しく作成していることがわかります。 したがって、実際に行う必要があるのは、XNUMX 番目の勾配を修正することだけです。 完全な円を維持する代わりに、他のグラデーションのように部分的な円を作成しましょう。

まだ遠いですが、必要な両方の曲率があります! コードを確認すると、XNUMX つの同一のグラデーションがあることがわかります。 唯一の違いは、それらの配置です。

.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%;
}

次に、最終的な形状のサイズと位置を調整する必要があります。 グラデーションをフルハイトにする必要がなくなったので、置き換えることができます 100% これとともに：

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

この値の背後にある数学的論理はありません。 曲率に対して十分な大きさがあれば十分です。 パターンへの影響を少しだけ見ていきます。 それまでの間、グラデーションを垂直方向の中央に配置するように位置も更新しましょう。

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

まだ十分ではありません：

XNUMX つのグラデーションを少し下に移動し、もう XNUMX つのグラデーションを少し上に移動する必要があります。 どちらも高さの半分だけ移動する必要があります。

私たちは、ほぼ、そこにいる！ 完全にオーバーラップするには、半径を少し修正する必要があります。 両方の線は境界線の半分だけオフセットする必要があります (--b) 厚さ:

わかりました！ いくつかの変数を制御することで簡単に調整できる完璧な波線:

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

ロジックを理解するのに少し時間がかかることは知っています。 それは問題ありません。前述したように、CSS で波状の形状を作成するのは簡単ではありません。その背後にある複雑な計算は言うまでもありません。 だからこそ、 オンラインジェネレータ は命の恩人です。背後にあるロジックを完全に理解していなくても、最終的なコードを簡単に取得できます。

波状パターン

作成した波線からパターンを作成できます。

いやいや、パターンのコードがさらに分かりづらくなります！

全くない！ 私たちはすでにコードを持っています。 削除するだけです repeat-x 私たちがすでに持っているものから、そして多田。 🎉

素敵な波模様。 再検討すると言った方程式を覚えていますか?

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

これは、パターン内の線間の距離を制御するものです。 そこから変数を作成できますが、これ以上複雑にする必要はありません。 ジェネレーターでそのための変数を使用していません。 多分私は後でそれを変更します。

以下は、同じパターンが別の方向に進んでいる例です。

そのデモのコードを提供していますが、それを分析して、それを実現するために私が行った変更を理解していただきたいと思います。

コードの簡素化

以前のすべてのデモでは、常に --size & --p 独立して。 しかし、オンラインジェネレーターが評価することを以前にどのように述べたか覚えていますか? P 等しいとして m*Sここで、 m 波の曲率を制御しますか? 固定乗数を定義することで、特定の XNUMX つの波を扱うことができ、コードが簡単になります。 ほとんどの場合、これが必要になります。特定の波状の形状と、そのサイズを制御する変数です。

コードを更新して導入しましょう m 変数：

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

ご覧のとおり、 --p 変数。 私はそれを var(--m)*var(--size)、それに応じて数学の一部を最適化しました。 ここで、特定の波状の形状で作業したい場合は、 --m 変数を固定値に置き換えます。 やってみよう .8 例えば。

--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;

コードが簡単になったことがわかりますか? Wave を制御する変数は XNUMX つだけで、依存する必要はもうありません sqrt() ブラウザをサポートしていません！

波線とパターンについても、私たちが見たすべてのデモに同じロジックを適用できます. 詳細な数学的な説明から始めて、一般的なコードを示しましたが、実際のユース ケースではより簡単なコードが必要になる場合があります。 これは私がいつもしていることです。 私は一般的なコードを使用することはめったにありませんが、特にほとんどの場合、変数として保存する必要のない既知の値を使用しているため、簡略化されたバージョンを常に検討しています。 (スポイラーの警告： 最後にいくつかの例を紹介します!)

このアプローチの制限

数学的には、作成したコードは完全な波状の形状とパターンを提供するはずですが、実際には奇妙な結果に直面することになります。 そうです、この方法には限界があります。 たとえば、オンライン ジェネレーターは、特に波線の場合に、悪い結果を生成する可能性があります。 問題の一部は、サイズと比較してボーダーの太さに大きな値を使用するなど、結果が混乱する値の特定の組み合わせによるものです。

それ以外の場合は、丸めに関連する問題で、波間にミスア​​ライメントとギャップが生じます。

とはいえ、ほとんどの場合、滑らかな波を生成するため、私たちがカバーした方法は依然として良い方法であり、完璧になるまでさまざまな値を試すことで悪い結果を簡単に回避できると思います.

包み込む

この記事の後、波状の形状やパターンを構築するために試行錯誤する必要がなくなることを願っています。 加えて オンラインジェネレーターへ、あなたは、あなたが望むあらゆる種類の波を作成する背後にあるすべての数学の秘密を持っています!

記事はここで終わりますが、これで、波状の形状を使用した派手なデザインを作成するための強力なツールが手に入りました。 ここにあなたを始めるためのインスピレーションがあります…

あなたはどうですか？ 私のオンライン ジェネレーターを使用して (または、すべての数学を暗記した場合は手動でコードを記述してください)、あなたの作品を見せてください! コメント欄で良いコレクションをしましょう。