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とか、 <img>タグに利用する画像を一つにまとめるimg spriteとかを利用する方法の紹介。 併設の別館ブログにimg spriteを導入したのでその覚書き。 （このブログ（バックステージ）には導入していません） 注意点：背景のリピート画像には使えない はじめに注意事項。というか出来ないこと background: url("../hogr.png") repeat-y とかやっている画像は一つにまとめる事は出来ません まず画像の用意 サイト内で使いたい画像を一つにまとめます。 この時、画像をなるべく整頓しておくと後で楽。 ▲（クリックで拡大） 上記みたいな画像をベースにする。そしてレイヤーを扱える画像編集ソフトを用意して、 画像一つ一つをレイヤーで配置し、目的の画像の開始部分（左上）をグリッドに併せて利用すると後で
Xoilac TV - Link Trực Tiếp Bóng Đá #1, Xem Bóng Đá Trực Tuyến tốc độ cao
本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見
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
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 Sprites + Rounded corners』。CSS Spriteを使って角丸を実装する方法だ。 このエントリーでは、↓のような画像を使って角丸を実装する方法が紹介されている。 デモは以下から。 » Take a look at the demo サンプルがダウンロードできるので見てみてほしい。 CSS Spriteを使って角丸を実装する方法、チェックしてぜひ実装してみてはいかがだろうか。 » CSS Sprites + Rounded corners 実家に帰省中っと。予定通り京都に寄ってイノダコーヒーでブロギング中だ。まったりまったり。
今回の記事は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の画像
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
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
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ページを開く
Blogger