複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
※ 下記の記事に誤りがありました。謝罪＆修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
