CSS フラグメントを迅速に生成する 10 個のビジュアル CSS ツール

今日も、釣りの時間を改善するためにいくつかのアーティファクトをお勧めします。

写真

1.ニューモーフィズム

アドレス:https://neumorphism.io/

section この Web サイトは、または に対応 するUI を生成し div 、カスタマイズすることもできますborder-radius。 box-shadow

写真

2. シャドウズ・ブラム

アドレス:https://shadows.brumm.af/

非常にクールな効果である複数のレイヤーの影を生成し、曲線から色をカスタマイズすることもできます。

写真

3. CSSクリップパスメーカー

アドレス:https://bennettfeely.com/clippy/

これは私が最もよく使用するツールです。以前に録画した CSS ビデオに多くの複雑な効果を生成するためにこのツールを使用しました。これをお勧めします。

写真

写真

4. 派手な枠線ジェネレーター

アドレス: https://9elements.github.io/fancy-border-radius/#30.36.29.30--。

操作を通じて素晴らしい形状を生成し border-radius 、プロジェクト内でそれらを自由に使用し、微調整を通じて希望の形状を実現できます。

写真

5. 三次曲線

アドレス:https://cubic-bezier.com/

CSS アニメーション用に生成されますcubic-bezier

写真

6.CSSグラデーション

アドレス: https://cssgradient.io/

プロジェクトでグラデーションを頻繁に使用する場合は、このサイトを気に入っていただけるでしょう。長い間使用しましたが、完璧です。ここでは、グラデーション ボタンなどのいくつかのツールを使用することもできます。

写真

7. CSS ウェーブ ジェネレーター

次の 3 つのウェーブ ジェネレーターはあらゆるタイプのウェーブを生成することができ、壊れたウェーブを描くのにまだ苦労している友達はこれらを使用できます。

写真

CSS ウェーブ

アドレス:https://getwaves.io/

単純な波形を生成でき、いくつかのカスタマイズ機能があります。

写真

複数の勾配波

アドレス: https://www.softr.io/tools/svg-wave-generator

複数の勾配波を生成できるのは素晴らしいことです。

写真

複数のアニメーションウェーブ

アドレス:https://svgwave.in/

複数のグラデーション波を生成することができますが、これに対するリアルタイムアニメーションも生成できるのが大きな特徴です。

写真

8. CSSグリッドジェネレータ

CSSグリッド

アドレス: https://cssgrid-generator.netlify.app/

グリッド用の素晴らしい CSS を生成し、div でカスタマイズでき、子要素も作成します。

写真

CSSグリッドエリア

グリッド領域を生成できます。特定のニーズに応じてゾーンに名前を付け、カスタマイズできます。

写真

9. アニメーション GIF/SVG の読み込み

アドレス:https://loading.io/

このサイトでは、複数の読み込みアニメーションを生成し、SVG、GIF、PNG、その他の形式でダウンロードできますが、その最大の特徴は、これらのアニメーションを新しいレベルにカスタマイズできることです。

写真

10. 無料アイコンライブラリ

フラアイコン

アドレス:https://www.flaticon.com/

このライブラリには 570 万以上のベクター アイコンが含まれています。考えられるアイコンはここにあり、それを使用できます。

写真

アイコン8

アドレス:https://icons8.com/

このライブラリには、ダウンロードせずにカスタマイズしたり直接使用したりできるアイコンが大量にあります。

写真

要約する

この記事から何かを学んだことを願っています。もしそうなら、Pozant Quilt に来てください。

~~終わりに、私は皿洗いをしており、退職後は家に帰って屋台を開きたいと思っているインスピレーションあふれる人間です。次号でお会いしましょう!

おすすめ

転載: blog.csdn.net/qq_27318177/article/details/121393170