SCSS

技術

CSS 入力フォームフォーカスアニメーション9選一行でコピペOK

css 入力フォームのアニメーションは、クリックする前・クリックした瞬間・値を入力し終えたあとまで、ブラウザがすでに持っている:focus:focus-within:placeholder-shown:valid:invalidという状態を

読む

CSS キーフレームアニメーションは、@keyframesで定義した一連の変化をクラス名ひとつにまとめ、任意の要素へそのまま適用する書き方です。浮く・跳ねる・回る・脈打つ・揺れる・ぐらつく・点滅する・鼓動する・ぷるぷるする、9種類をtra

css 枠線アニメーションは、カードや入力欄の外側の線だけを動かして「今なにが起きているか」を伝える技法です。今回は9種類を選び、光の縞を流すもの、SVGで線を描くもの、色相だけを回すものまで、マスク・SVG・アウトライン・@proper

css タップエフェクトとは、指でボタンやカード、リンクに触れた瞬間だけ色・大きさ・影が変わり、入力が確かに届いたとスマホの画面だけで伝える演出です。この記事では9種類を選び、それぞれ6〜25行のコードとして実装しました。4つは@medi

css ハートアニメーションを9種類まとめました。いいねボタンのハートから星評価、拍手カウントや絵文字リアクションまで、押した瞬間に画面がはっきり反応するものだけを選び、ほとんどはtransformとopacityだけで動き、05だけwi

ラジオボタンチェックボックス css カスタムは、ブラウザ標準の丸いラジオボタンと四角いチェックボックスのinput要素は消さずに残し、隣に置いた図形だけを:checkedひとつで描き直す手法です。九つ集め、そのうち一つは四角いチェックボ

css プログレスバー円で探している人が見たいのは、直線の帯ではなく丸いリングやゲージで割合を示すCSS部品です。今回は実際に動く9種類を用意し、どれもwidthではなくtransformとconic-gradientだけで値を表現してい

css トグルスイッチは、チェックボックス一つで実際にオン・オフができ、トラックとノブの位置・色・アイコンだけを変えて見た目を作るコントロールです。ここでは9種類を集め、どれもtransformとopacityを軸にしたコードで組みました。

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

css カードホバーとは、カード型のUIコンポーネントがマウスやフォーカスを受け取った瞬間だけ、浮く・光る・傾くといった短い変化を見せる仕掛けです。今回は9種類を選び、7つはCSSのtransformとtransitionだけで、残り2つ