Bookmark

ブックマーク(CSS)

HTMLを元に１クリックで対応した空のCSSを生成してくれるので作業効率があがるかも

OneClickCSS
Online StyleSheet Generator | OneClickCSS
https://css.miugle.info
OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。子孫セレクタ、小セレクタ、Less、Sacc、Scssを１クリックで自動生成します。
HTMLメールコーディングの際に主要なメーラーのCSS対応状況が確認できるサービス

Campaign Monitor
CSS Support Guide for Email Clients [+Checklist] | Campaign Monitor
https://www.campaignmonitor.com/css/
A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet.
CSSだけでグリッチ効果とRGBずらし（ホラー演出などでよくあるやつ）を付与する方法 ※少々ニッチだけどhover演出などピンポイントで使えるケースがあるかも

Zenn
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
https://zenn.dev/ixkaito/articles/css-image-glitch
CSSグラデーションをGUIで生成するWebサービス RGBによるグラデーションでくすむ色をoklch, hsl指定できれいに補完してくれる

gradient.style
CSS HD Gradients
https://gradient.style
Wide gamut Color 4 compliant CSS gradient builder.
CSSイージングのcubic-bezierを視覚的に調整できるサービス

cubic-bezier.com
cubic-bezier.com
~~https://cubic-bezier.com~~
CSSのイージング関数のチートシート

easings.net
イージング関数チートシート
https://easings.net/ja
適切なイージング関数を選択して、アニメーションをよりリアルにします。
font-sizeをレスポンシブ（clamp）指定する際の計算をしてくれるサービス画面サイズごとの変化をグラフ（or表組）表示してくれるが基準値の指定までしないといけないので少々知見が必要

modern-fluid-typography.vercel.app
Modern fluid typography editor
https://modern-fluid-typography.vercel.app
Generate fluid typography code snippets using modern CSS clamp function and fine-tune fluid typography behavior using this robust and sleek editor.
font-sizeをレスポンシブ（clamp）指定する際の計算をしてくれるサービス minとmaxを入力するだけのシンプルなUI

min-max-calculator.9elements.com
Min-Max-Value Interpolation
https://min-max-calculator.9elements.com
A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.