Tag : RollOver

READ MORE

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

READ MORE

Webサイト上で重要な役割を持つナビゲーションメニュー。ページデザインをする上で、ボタン素材のテンプレート集などは良くありますが、ナビゲーション全体のデザインテンプレートを36種類まとめたエントリー「36 Best Menu Designs Template」が参考になりそうなデザインがたくさんあったのでご紹介。36 …

READ MORE

CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、何かアクションを付けることに使用する「:hover」要素。本来この指定はマウスオーバーしている要素のみに効果を利かすものですがマウスオーバーした要素の兄弟要素に対しても「:hover」の効果を付けることを可能とするチュートリアル「Hover on…

READ MORE

今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。画像の見せ方としてちょっと興味があったのでプラグインを使わず実際にスクリプトを組んで実装する方法を…

READ MORE

昨年(2010年)に、サイト制作で役立ちそうなjQueryプラグインをまとめて紹介している記事を、自分用にメモっていたものが、まとまりきらなくなってきたので、ここに一部まとめて紹介してみます。jQueryを使ってサイトに華やかな演出を加えたり、UIを勉強するために役立ちそうなサイト(ブログ)のまとめ。60 Useful…

READ MORE

先日のCSS(CSS3)のみでスライド画像ギャラリーを作る方法に引き続き、CSS(CSS3)のみで形成する、画像にマウスオーバーで拡大エフェクトをつけるギャラリー的なもののサンプルを紹介してみます。初めに完成サンプルから。※動作環境は前回同様にWebkitブラウザのSafariやChromeのみです。CSS3 HOVE…

READ MORE

サイト内でのナビゲーションメニュー構成は特に重要視しなければいけないところ。見せ方から配置位置までユーザビリティを考慮したナビゲーション構成になることが望まれます。そんなナビゲーションメニューをjQueryを使って演出するチュートリアルを26パターンまとめた「26 Useful jQuery Navigation Me…

READ MORE

CSSのみでアニメーション動作を可能とするCSS3の機能Transition。海外のサイトではもうすでにCSS3アニメーションを実装しているサイトを見かけることもちらほら。そんなCSS3アニメーションのテクニックを紹介しているサイトは多く見かけますが、ここではCSS3アニメーションを実行させるタイミングに関してサンプル…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner