Directional Choice Menu
事業一覧メニューで、選択行の方向アイコンが回転し関連ラベルが出現する。
PRACTICAL WEB TIPS
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中:動き: rotate
事業一覧メニューで、選択行の方向アイコンが回転し関連ラベルが出現する。
認証済みの実績カードで検証シールと確認行が現れる。会社概要・資格表示向け。
照準を合わせるように四隅のマーカーが中央に集まるアイコンホバー。
完了アイコンの周りに小さなチェックポイントが順番に点灯。作業完了の補助表示に使えます。
写真プリントの隅がめくれ、撮影情報が裏面から現れるホバー。
資格紹介カードに認証スタンプが現れ、発行情報と認定分野が見えるホバー。
通知アイコンにホバーするとベルが揺れ、未読バッジがひろがる。動作はホバー時のみ。
紙を折るようなSVGアイコンがホバーで開き、進む方向を示す矢印に変わるミニアイコン。
角に重なる数字バッジが半回転し、メインボタンの二層プレートが逆方向にずれるホバー。
記事見出しの句読点・記号だけがホバーで動き、文字の可読性を崩さずアクセントを付ける。
アイコン内のカーブ矢印がホバーで直進矢印に変化する、外部ページ遷移用の小型リンク。
画像の角に旅のスタンプが回転して現れ、旅行記や観光サイトの写真に情報を添えます。
縦組みの短い見出しをホバーすると横組みの補足見出しが現れる、和文エディトリアル向けリンク。
封筒のフラップが開き、問い合わせのアイコンが顔を出すメール誘導ボタン。
クリップの線画が持ち上がり、添付資料を示す小さなラベルが現れる。
カテゴリリンクの件数表示がカードのように裏返り、ページ数・記事数へ視線を導く。
メニューの矢印が小さな方位記号へ変わり、見ているセクションを明確に示す。
写真プリントが少し回転して持ち上がると、下に隠れた撮影メモが顔を出す。