CSSのlinear()でUIが軽快になる! スプリングアニメーション活用術13選 - ICS MEDIA

CSSのlinear()関数を使うと動きの自由度が高まります。バネのような動きをするスプリングアニメーションもlinear()で実現できることのひとつ。これを使うと、UIにイキイキとした躍動感を加えられ、ユーザーに軽快な印象や心地よいフィードバックを与えることができます。 linear()で作った動きはCSSトランジションやCSS...

そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaScriptを使わずにアニメーションで高さを変更するCSSなど、よく使用...

CSS Responsive Rules

css-responsive.md CSS Responsive Rules 目的 レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。 基本方針: エスカレーション順序 レスポンシブ対応は以下の優先順序で検討する。上位...

CSSのlight-dark()関数が画像もサポート！ これでライトテーマとダークテーマの対応がさらに簡単になります

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。 これまではlight-dark()関数はカラー値（<color>）のみしかサポートしていませんでしたが、画像ファイル（<image>）もサポートされ、ロゴ画像や背景画像などをライトテーマとダークテーマで切り...