この記事では、CSS スニペットをすばやく生成できる、収集する価値のある 10 個の CSS 視覚化ツールを紹介します。仕事中に釣りをするのは問題ありません。信じてください。きっとあなたもそれらの虜になるでしょう。
![収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/article/000/000/024/618891d0284b326%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
1. Neumorphism
アドレス: https://neumorphism.io/
この Web サイトはsection
または div
は、対応する UI を生成します。これにより、border-radius
、box-shadow
などもカスタマイズできます。
![163633955269585収集する価値のある 10 の CSS 視覚化ツール (共有) 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/320/958/440/163633955269585%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
2. Shadows Brumm
アドレス: https://shadows.brumm.af/
it非常にクールな効果である複数のレイヤーの影を生成したり、曲線から色をカスタマイズしたりすることが可能です。
![163633959942059収集する価値のある 10 の CSS 視覚化ツール (共有) 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/879/882/584/163633959942059%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
#3. CSS クリップパス メーカー
アドレス: https://bennettfeely.com/clippy/
これは私が最もよく使っているものです。初期の頃に録画した CSS ビデオでは、このツールを使用して多くの複雑な効果が生成されました。強くお勧めします。
![1636339605264507.jpg 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/593/260/283/1636339605264507.jpg)
4. 派手な境界線形状ジェネレーター
アドレス: https://9elements.github.io/fancy-border-radius /
border-radius を操作することで素晴らしい形状を生成します。これをプロジェクトで使用し、微調整することで希望の形状を実現できます。
![収集する価値のある 10 の CSS 視覚化ツール (共有)](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab744008e1f4438da14fd6d3c66782c1~tplv-k3u1fbpfcp-watermark.awebp?)
5. 3次曲線
アドレス: https://cubic-bezier.com/
はCSS アニメーションの生成
cubic-bezier。
![163633962484425収集する価値のある 10 の CSS 視覚化ツール (共有) 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/583/806/136/163633962484425%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
6. CSS グラデーション
アドレス: https://cssgradient.io/
プロジェクトの場合多くの場合、グラデーションの使用が必要になるため、このサイトに夢中になるでしょう。長い間使用していますが、完璧です。ここでは、グラデーション ボタンなどのいくつかのツールを使用することもできます。
![1636339629598543.png 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/369/250/734/1636339629598543.png)
7. CSS ウェーブ ジェネレーター
次の 3 つのウェーブ ジェネレーターはあらゆる種類のウェーブを生成でき、現在も描画されています。波が崩れて困っている友達が使えます。
CSS Waves
アドレス: https://getwaves.io/
単純な Wave を生成できます。いくつかのカスタム機能。
![1636339663131743.png 7-収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/448/475/589/1636339663131743.png)
グラデーション複数波
アドレス: https://www.softr.io/tools/ svg-wave-generator
複数の勾配波を生成できるのは素晴らしいことです。
![163633967964790収集する価値のある 10 の CSS 視覚化ツール (共有) 7-収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/395/557/977/163633967964790%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
複数のアニメーション Wave##アドレス: https://svgwave.in/
複数のグラデーション波を生成することができますが、これに対するリアルタイムアニメーションも生成できるのが大きな特徴です。
8. CSS グリッド ジェネレーター![1636339706662380.png 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/685/384/272/1636339706662380.png)
CSS グリッド
アドレス: https: //cssgrid-generator.netlify.app/
グリッド用の優れた CSS を生成し、div でカスタマイズでき、その子要素も作成します。
#CSS グリッド領域
グリッド領域を生成できます。お客様の特定のニーズに合わせてゾーンに名前を付けてカスタマイズできます。
9. アニメーション GIF/SVG の読み込み![163633971923444収集する価値のある 10 の CSS 視覚化ツール (共有) 8-収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/431/204/419/163633971923444%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
アドレス: https://loading.io/このサイトでは、SVG、GIF、PNG、その他の形式でダウンロードするための複数の読み込みアニメーションを生成できますが、その最大の特徴は、これらのアニメーションを次のレベルにカスタマイズできることです。
##10. 無料アイコン ライブラリ
![163633976528689収集する価値のある 10 の CSS 視覚化ツール (共有) 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/243/394/135/163633976528689%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
#Flaticons
アドレス: https://www.flaticon.com/このライブラリには 570 万個のベクトル アイコンがあります。考えられるアイコンはここにあり、それを使用できます。
![163633977040501収集する価値のある 10 の CSS 視覚化ツール (共有) 収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/373/648/282/163633977040501%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
icons8
アドレス: https://icons8.com/
このライブラリには、ダウンロードせずにカスタマイズしたり直接使用したりできるアイコンの大規模なコレクションもあります。
![163633977584591収集する価値のある 10 の CSS 視覚化ツール (共有) 10-収集する価値のある 10 の CSS 視覚化ツール (共有)](https://img.php.cn/upload/image/975/753/984/163633977584591%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%2010%20%E3%81%AE%20CSS%20%E8%A6%96%E8%A6%9A%E5%8C%96%E3%83%84%E3%83%BC%E3%83%AB%20(%E5%85%B1%E6%9C%89))
概要
この記事から何かを学んでいただければ幸いです。そうなら、ぜひボザンキルトにお越しください。
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 !
以上が収集する価値のある 10 の CSS 視覚化ツール (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。