CSS Sprites w/out Using Background Images | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » CSS Sprites w/out Using Background Images Jun.3.2010 CSS Sprites w/out Using Background Images Tags: Beginner Recently I was working on a client site and he wanted a hover effect on some of the affiliate banner ads. The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the acce
css spriteなど画像spriteの具体的な実装方法
スタイルシートで利用する背景画像を一つにまとめるcss spriteとか、 <img>タグに利用する画像を一つにまとめるimg spriteとかを利用する方法の紹介。 併設の別館ブログにimg spriteを導入したのでその覚書き。 （このブログ（バックステージ）には導入していません） 注意点：背景のリピート画像には使えない はじめに注意事項。というか出来ないこと background: url("../hogr.png") repeat-y とかやっている画像は一つにまとめる事は出来ません まず画像の用意 サイト内で使いたい画像を一つにまとめます。 この時、画像をなるべく整頓しておくと後で楽。 ▲（クリックで拡大） 上記みたいな画像をベースにする。そしてレイヤーを扱える画像編集ソフトを用意して、 画像一つ一つをレイヤーで配置し、目的の画像の開始部分（左上）をグリッドに併せて利用すると後で
CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター
本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見
便利！CSS Spriteを作成するAIRアプリ·Tonttu MOONGIFT
CSS Spriteとは小さなアイコンなどの画像をくっつけて一つの画像として保存し、表示する際にはCSSで位置を指定して表示するという手法だ。Googleをはじめ、膨大なアクセスのあるWebサービスで活用されている手法であり、画像を読み込むコネクション数を減らすことができる。 CSS Spriteを作るならぜひ使いたい CSS Spriteを作成するWebサービスも存在するが、画像が追加されるたびにアップロードし直すのが面倒だった。そこでTonttuを使ってみよう。 今回紹介するフリーウェアはTonttu、Adobe AIR製のCSS Sprite作成ソフトウェアだ。 Tonttuの使い方は簡単だ。起動したらひとまとめにした画像ファイルをドロップして登録する。並べ方は縦または横と自由に選択できる。画像の隙間を空けたり、ドラッグして位置を入れ替えることも可能だ。自動で並べると隙間が空くので、
CSS Sprites: Useful Technique, or Potential Nuisance? — Smashing Magazine
Ah, the ubiquitous CSS sprites — one of the few web design techniques that was able to bypass “trend” status almost instantly, planting itself firmly into the category of best practice CSS. Although it didn’t really take off until well after A List Apart explained and endorsed it, it was discussed as a CSS solution as early as July, 2003 by Petr Stanícek. Most web developers today have a fairly st
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials — Smashing Magazine
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time t
CSS Spriteを使って角丸を実装する方法 – creamu
クールでクリーンに角丸を作りたい。 そんなあなたにおすすめなのが、『CSS Sprites + Rounded corners』。CSS Spriteを使って角丸を実装する方法だ。 このエントリーでは、↓のような画像を使って角丸を実装する方法が紹介されている。 デモは以下から。 » Take a look at the demo サンプルがダウンロードできるので見てみてほしい。 CSS Spriteを使って角丸を実装する方法、チェックしてぜひ実装してみてはいかがだろうか。 » CSS Sprites + Rounded corners 実家に帰省中っと。予定通り京都に寄ってイノダコーヒーでブロギング中だ。まったりまったり。
[XHTML+CSS]CSS Spriteで表現する角丸2 | Commit Lab
今回の記事は2008-12-07[XHTML+CSS]CSS Spriteで表現する角丸 | Commit Labの続きです。 これはCSS Spriteというテクニックを利用して作った角丸boxです。シンプルな記述のhtml+CSSと一枚の画像で角丸を表現しています。 文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。 今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。 またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。 それに伴いCSS Spriteの画像
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
画像結合/CSS切出で転送量&HTTPリクエスト削減 - CSS Sprite Generator 2 | エンタープライズ | マイコミジャーナル
CSS Sprite Generator Ed Eliot氏およびStuart Colville氏は23日(米国時間)、CSS Sprite Generatorの最新版となるCSS Sprite Generator 2を公開した。CSS Sprite Generator 2はオーバーホールが実施されたメジャーアップグレードバージョン。以前のバージョンでは画像の結合にGDを採用していたが、新しいバージョンではImageMagicが採用されている。この変更で従来のバージョンよりも高品質な画像が生成されるようになったほか、発見されていたバグが修正されている。 またCSS Sprite Generator 2では追加機能として、PNGまたはGIF画像で利用する色数を指定できるようになったほか、JPEGに対する画動品質が指定できるようになっている。またPNGを使っている場合に出力を圧縮する目的でOp
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance - WebSiteOptimization.com
Summary: Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages. CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects. CSS sprites group multiple images into one composite image and display them using CSS backgr
CSS Sprites: Image Slicing’s Kiss of Death
Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. As game complexity
CSS Sprites: What They Are, Why They're Cool, And How To Use Them | CSS-Tricks
That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spritebox - Create CSS from Sprite Images
ゼロから学ぶ「CSS Sprite」
CSS Background Image Sprites - AskApache
Blogger
CSS Spriteを活用しよう - DesignWalker