ヒーロー

用途

メッシュグラデーションの上に、あえてグレインを残す

メッシュグラデーションは、暗い背景の上で複数のぼかした色の塊がオーロラのようににじみ合い、その上にフィルムグレインを重ねる背景スタイルです。AIっぽさを消すために、デザイナーはあえてこのグレインを残します。このスタイルから、9つのパーツをそ

読む

クレイモーフィズムとは、太い角丸と明るいハイライト・暗い影を同じ面に重ねることで、粘土を指で押したような柔らかい質感を作るUIデザインの手法です。ボタンやカードによく使われます。

キネティックタイポグラフィとは、見出しの文字サイズが画面幅に合わせて変わり、単語が順番に浮かび上がり、数字がオドメーターのように上がっていくデザイン手法のことです。最近のランディングページはどれもファーストビューがこれなので、実際にコードを

今、Pinterestで保存され続けているダークモードデザインシステムは、開発者向けツールLinear.appの画面をきっかけに広まった配色のルールで、濃いインク色の背景に青いグローや枠線のハイライトだけで階層を表現します。この記事では同

ヒーローセクションとは、サイトを開いた瞬間に画面いっぱいに映る最初の一枚、大きな見出しとボタンが乗ったあの一画面のことです。この記事では、そこに動きを添える「ヒーローセクションアニメーション」を集めました。CSSだけ・JS不要で、そのまま

css 背景アニメーション星のような検索でたどり着く人が本当に探しているのは、雪や星、雨、紙吹雪、泡、蛍、花びら、霧のように小さな粒を画面全体にばらまいて動かす背景の作り方です。span 1個をnth-childで何十回も繰り返し、位置・

css テキストグラデーションアニメーションは、文字の中に流し込んだ色が動いたり光を放ったりして見える、background-clip:textやfilterだけで組める小さな演出です。この記事では9種類を選び、6〜25行のコードとして

css 背景アニメーションは、CSSだけで背景を動かし続ける手法です。この記事では9種類を選び、background-positionとtransform、filter: blurという仕組みだけで実装しました。グリッドの9つはifram

css 文字アニメーションは、JavaScriptを使わずCSSのtransform・opacity・filterだけで見出しや文言を動かす小さな演出です。この記事は9種類を選び、6〜25行のコードに絞って実装を確かめました。冒頭のグリッ

css タイピングアニメーションは、文字が一文字ずつ入力されていくように見せる、CSSだけで動く小さな部品です。この記事では9種類を選び、steps()とwidth、clip-pathという仕組みだけで実装しました。グリッドの9つはifr