Bookmark

ブックマーク(CSS)

img画像にSVGfilterを適用して生成しなくても様々なフィルター効果を得ることが出来るソースコード付解説

ICS MEDIA
コピペOK！ SVGフィルターを使った画像加工の作例集 - ICS MEDIA
https://ics.media/entry/241122/
ウェブサイトに欠かせない画像コンテンツ。AdobePhotoshopなどで加工し書き出すことも多いですが、SVGフィルターを使用すると同じように複雑な効果を表現できます。本記事では、SVGフィルターを使っていろいろな雰囲気の画像加工の作例を紹介します。
line-heightの上下余白をカットする為のスタイルと考え方

www.tak-dcxi.com
line-heightのハーフ・レディングを打ち消す"calc((1em - 1lh) / 2)"をCSS変数に定義しておくとよい – TAKLOG
https://www.tak-dcxi.com/article/use-line-height-trim-as-css-variable/
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.