連載

CSS3アニメーションでつくるインターフェイス表現

 

  • 第7回 追加情報をアニメーションで表示するボタン
    • ボタンの静的なデザイン
    • ボタンの凹凸の表現
    • ボタンにポインタを重ねたら追加情報を示す
    • アニメーションに効果を加える
    • ボタンのパーツのアニメーションを仕上げる

    2016年4月26日

  • 第6回 画像をパネルに分けてアニメーションで切り替える
    • 画像とキャプションを切り替える
    • 擬似要素::beforeと::afterで加えたデザイン
    • キャプションをクロスフェードさせる
    • 画像をパネルに分けてクロスフェードする

    2016年4月19日

  • 第5回 画像にポインタを重ねるとキャプションが現れる
    • キャプションを加えた画像の静的スタイル
    • Google Fontsと回り込みの解除
    • 画像にポインタが重なったらキャプションを示す
    • 画像に色をかぶせる
    • 画像に変形のアニメーションを加える
    • リンクボタンをアニメーションで加える

    2016年3月15日

  • 第4回 3次元で垂直に回る立方体のメニュー
    • メニューのもとになる静的スタイル
    • 要素にポインタを重ねたら水平軸で回す
    • それぞれの項目に底面を加える

    2016年3月1日

  • 第3回 選択項目以外がぼけるメニュー
    • メニューのもとになる静的スタイル
    • メニューの背景色とテキストの影
    • メニュー項目の間に区切り線を入れる
    • メニューバーに外枠を加える
    • メニュー項目にポインタが重なったとき他の項目のテキストをぼかす
    • ポインタが重なったメニュー項目を浮き上がらせるアニメーション
    • マウスボタンを押したメニュー項目を凹ませる

    2016年2月9日

  • 第2回 アコーディオンメニューのアニメーション
    • メニューのもとになる静的スタイル
    • メニューに角の丸みと影を加える
    • メニューの開け閉じの動きを加える
    • メニュー項目の間に区切り線を入れる
    • サブメニュー項目にポインタを重ねたときハイライトさせる

    2016年1月26日

  • 第1回 プッシュボタンのアニメーション
    • ボタンのもとになる静的スタイル
    • ボタンの角に丸みを加える
    • 影でボタンを立体的に見せる
    • マウスポインタを重ねたときのボタンの表現
    • ベンダープレフィックスと-prefix-free
    • ボタンに滑らかなアニメーションを定める

    2016年1月12日

 

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書