[B! CSSSprite] kasshinのブックマーク

[CSS]CSSスプライトの利点と潜在的な問題点、そして解決方法

CSSのテクニックに中でも最も使用されている一つ、CSSスプライトの利点と潜在的な問題点、そしてその解決方法を紹介します。 Transparent CSS Sprites デモ [ad#ad-2] 下記は各ポイントを意訳したものです。はじめに CSSスプライトの利点と潜在的な問題点 CSSスプライトの潜在的な問題の解決方法解決方法のデモおわりにはじめに最近のフロントエンドの開発に必要不可欠なテクニックの一つにCSSスプライトがあります。このテクニックはA List Apartの記事「CSS Sprites」によって普及されたものです。 CSSスプライトは一度理解したら本当にシンプルなテクニックで、あらゆる方法に応用することができます。一般的に利用されるのはナビゲーションで、他にもボタンや見出しにも使用されています。スプライトは複数のイメージを一つのファイルにマージして使用します

kasshin 2010/11/05

リンク

[JS]CSSスプライトにアニメーション効果を加えるスクリプト -AutoSprites

ナビゲーションなどによく使用されるCSSスプライトにアニメーション効果を加えて簡単にセットアップできるスクリプトをNew Media Campaignsから紹介します。 AutoSprites - A jQuery Menu Plugin demo デモでは、リスト要素で実装されたナビゲーションに一枚の画像を使用して各ラベルのマウスオーバーのアニメーション効果をつけています。アニメーションは不透明度をコントロールしたもので、スクリプトのオプションでスピードなどを調整することができます。 AutoSpritesはjQueryのプラグインのため、実装にはjquery.jsが必要です。

kasshin 2009/11/07

リンク

[Boolmarklet]スプライト画像のチェックやアドバイスをしてくれるブックマークレット

ページで使用している背景画像を元に、スプライト画像のチェックやアドバイスをしてくれるブックマークレット「Sprit eMe!」を紹介します。 Sprit eMe! 上のキャプチャは、当サイトで「Sprit eMe!」を実行したものです。右：画像リスト、左：スプライト画像使い方は簡単でブックマークレット（Sprit eMe）をブックマークに登録し、スプライト画像のチェックをしたいページを開いている時に、「Sprit eMe!」を選択します。

kasshin 2009/06/27

CSSSprite

リンク

[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu

一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「Sprit eMenu」を紹介します。 Sprit eMenu demo Sprit eMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大）ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 Sprit eMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。

kasshin 2009/06/18

リンク

独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社

今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト⁠）⁠」についてのお話をさせていただきます。サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま