Chapter 3 サンプル集｜CSS3デザインプロフェッショナルガイド

Section1 ボタン

  1. シンプルでカラフル、CSS3らしいボタンの表現
  2. 押し込まれたボタンの表現
  3. アクア調ボタン
  4. 内側に1pxの溝が入ったボタンの表現
  5. 奥行きのある沈んだ質感の丸いボタン
  6. ボタンを透明プラスチックでコーティングしたような質感
  7. マーブルのような丸いボタン

ページトップへ

Section2 アニメーション

  1. 一定時間をおくと画像が変わるアニメーション
  2. CSS3の3Dを使った絵合わせゲーム
  3. transitionだけでできる、Mac OS XのDock風アニメーション

ページトップへ

Section3 レイアウト

  1. 新聞のような段組みを使って、更新しやすいWebマガジンスタイル
  2. デザイン性の高いリキッドレイアウト

ページトップへ

Section4 テーブル

  1. 情報をシンプルに見やすくするテーブル

ページトップへ

Section5 ギャラリー

  1. target疑似クラスを使った縦方向のスライドショー
  2. CSSだけで作るLightBox風のギャラリー
  3. ロールオーバーで差がつく、スタイリッシュなギャラリー
  4. マスクを適用して画像の形も自由自在、テクスチャ表現も簡単に
  5. ロールオーバー時に、隠れたキャンプションが写真の下から上ってくる
  6. 斜めから正面に変形しながら動くフォトギャラリー

ページトップへ

Section6 フォーム

  1. target疑似クラスを使ったトグルスイッチ
  2. 目立たない『規約に同意のチェックボタン』もユーザにやさしく
  3. フォームのパーツを設計してみる
  4. ユーザにも楽しみながら使ってもらえるフォーム
  5. フォームの色々なバリエーション　zip
    1. ブロック
    2. アナログ

ページトップへ

Section7 ナビゲーション

  1. サブナビゲーションが出てくるナビゲーション
  2. 触ると背景が動く楽しい幼稚園ナビゲーション
  3. 付箋で作るナビゲーション、アナログ感を出すための工夫

ページトップへ

plugin - jQueryプラグイン

ページトップへ