[B! css][image] keijixのブックマーク

[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート

画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモサイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。

keijix 2010/04/13

リンク

Creating Beveled Images with CSS

method for adding a beveled effect to images. It’s easy enough to create a sense of depth with normal outset borders (below left), but I was after an effect that would actually look like part of the image, as though it were a bevel on the image itself (below right). In the end I found four different ways of doing it, each with different levels of support: from the cleanest approach that only worke

keijix 2010/03/16

Image
CSS

リンク

画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ） - くらげだらけ

よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。要は、CSSで画像のWidthとHeightを制御してやるわけですが、今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。こんな感じ <style type="text/css"> .image-resize { max-width: 200px; max-height: 200px; } </style> <img src="images/test-image.jpg" class="image-resize" />これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエント

keijix 2009/10/01

リンク

syboos.jp

keijix 2009/09/11

リンク

Spice up Your Images with CSS

Here are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain! If you have some of your own techniques, please share them! Drop Shadow Effect Add a drop shadow by using a background image with some padding. View Demo HTML <img cla

keijix 2009/08/03

リンク

dg-img2

keijix 2009/04/09

リンク

複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT

Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ