100を超えるユニークなCSSパターンを作成しました | 最高のコレクション 🤩

CSSローダーやCSS下線/オーバーレイアニメーションに続き、また大きなコレクションを持って戻って来ました。今回はCSSパターンについてです。

100を超えるユニークなCSSパターンを一からコーディングしました（ええ、かなりの時間がかかりました）。

全てのパターンは同じコード構造を持っています：

html {
  --s: 50px; /* サイズを制御 */
  --c1: 赤;
  --c2: 青;
  /* 必要ならもっと色 */

  /* 多くのグラデーションと変な数字 */

}

全画面モードに切り替える全画面モードを終了

サイズを制御する変数が1つあり、各色はコード内で一度だけ定義されます。することは、コードをコピー＆ペーストして、いくつかの変数を調整するだけです。

素敵なパターンを手に入れて、お気に入りのウェブサイトで結果を見せてください 👇

この記事では全てのCSSパターンを紹介しませんが、こちらが私のトップ10です。

ベスト

これがとても気に入っています。わずか2つのグラデーションを使ったもので、特にそのちょっとした影が満足のいく結果になっています。

インポッシブル

このパターンには15のグラデーションが使われています！無理だと思っていましたが、たくさんの数学と頭痛の後、やり遂げました。

アクシデント

特定のパターンを作成しようとしていたのですが、計算を間違えて、より良いものができ上がりました。良い偶然でした！

ヘキサゴン

みんなヘキサゴンが好きなので、トップ10に必ず1つは入れなければなりません。

3D

いくつかの3Dパターンを作りましたが、これは本当にかっこいいです。

オプティカルイリュージョン

線は真っすぐですか？あなたの脳を信用しないで！

チャレンジング

この1つにはたくさんの幾何学のテクニックが使われています。良いチャレンジでした。

ウェービー

ヘキサゴンが好きでない場合は、波が好きでなければなりません。

パーフェクト

私はこれをCSS Tipに使用しており、結果は完璧です。

クリスマス

クリスマスのプレゼントが思い浮かばない場合に

あなたはどうですか？お気に入りを教えてください 👇

あなたのお気に入りのCSSパターンのリンクを生成して、誰とでも共有することもできます。簡単です！

パターンのコードを検証して、IDをつかんで、共有するためのユニークなリンクを取得してください！

私のお気に入りは「g48」です 👉 https://css-pattern.com/#g48

こちらは初心者向けの2つの記事で、基本的なパターンの作り方を始めるのに役立つでしょう：

CSS radial-gradient を利用して背景パターンを作る方法を学ぼう

CSSとconic-gradientを使って背景パターンを作る方法

将来的にもっと記事を出していく予定です。複雑なCSSパターンの作り方の全ての秘密を公開するので、お楽しみに 👀

コレクションは将来も増え続けるので、サイトをブックマークしておくのを忘れないでください：https://css-pattern.com

コードは全てGithubにあるので、その⭐スターをクリックして、プロジェクトを人気にする手伝いをしましょう。

私をサポートしたいですか？

または

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl