今回は、ちょっとだけCSSの実装が楽になる便利ツールをご紹介します。
目次
Animated CSS Background Generator
アニメーション付きの背景デザインを作成し、コードを取得できるオンラインツール。
JS不要。すべてCSS3のアニメーションで動きます。
https://wweb.dev/resources/animated-css-background-generator
Joni Bologna’s fruity Flexbox Cheatsheet
何気にややこしいflexbox。
出題される質問にYES/NOで答えることで、どのようにスタイリングすれば良いのか一眼でわかるチートシートです。
https://jonibologna.com/flexbox-cheatsheet
Easing Functions Cheat Sheet
イージングのパラメーターの変化を、サンプルと一緒に確認できるチートシート。
普段はなんとなく設定アニメーションも、イージングをいじるだけで印象がかなり変わります。
https://easings.net/en
Clippy
CSSだけで、画像をさまざまなシェイプに切り抜くことができるツール。
※IE非対応。
ユーザーがIEを使用している場合は、まず最初のIE以外のブラウザのインストール方法を説明することをお勧めします。
https://bennettfeely.com/clippy/
Trianglify.io
ポリゴンスタイルのパターンテクスチャを作成できます。
背景に何か敷きたいときにオススメです。
https://trianglify.io/
導入して一手間加えるだけで、
サイトのクオリティがぐっと上がると思います。
是非使ってみてください。
