Top

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:--スポンサー広告 | Trackback(-) | コメント(-)
はてなブックマーク - スポンサーサイト

CSSスプライトを使ったポップなメニュー

tab-1

Deepu Balanに、CSSスプライトを使ったメニュー
Free overlapped CSS menu using CSS Sprites」が紹介されています。




CSSスプライトとは?

通常,ウェブページを制作する場合,
デザインファイル(psdやpngなどの画像)をスライスし,HTMLのimg要素として埋め込んだり,
CSSの背景画像として指定していることと思います。

それらの画像を一つにまとめ,1度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。

このテクニックは,以前からマウスオーバーメニューを実現する際にも使われていたものでもありますが,
YouTubeのプレーヤーやGoogleなど,大手サイトでもこのテクニックが使われるようになり,
CSS Spritesの名前と共に注目を集めるようになりました。

独学で極める “Webデザイン”の技と心:第10回 CSS Spritesでサイトを高速化より


HTML




CSS



イメージファイルはPNGとPSDの二つがあるようです。
Cool Sprites – Free overlapped CSS menu using CSS Sprites
2010/02/02 22:22CSS | Trackback(0) | Comment(0)
はてなブックマーク - CSSスプライトを使ったポップなメニュー
コメントの投稿















管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL