透過PNGを使ったレイアウト

カテゴリ:CSSテクニック 2007年8月 9日 19:50

気づけばずいぶん日があいてしまってしまっていました・・。

▼サンプルはこちら
透過PNGを使ったレイアウトサンプル

今回は、調べ物をしていて気づいた透過PNGの使い方を書きたいと思います。
もともと、透過PNGをIE6で使っても、繰り返し処理ができない、という認識でいたので
最初から、透過PNGを除外してデザインなんかを考えていました。

が、今回見つけた(というか知らなかった・・(;´д`))記事によると、
繰り返しではないけれど、画像を要素にあわせて拡大・縮小する機能があるとのこと。

イラストなど、固定の画像にはもちろん使えませんが、
背景などに透明画像を使いたい場合なんかには使えるかも、と思ったのがきっかけです。

そもそも、背景に使うような画像は、繰り返し処理を想定しているため、
ある程度引き伸ばしても問題がない画像である場合が多いと思います。

なので、繰り返しの場所だけは引き伸ばし処理を、角丸なんかの引き延ばしができない部分については、個別に設定することで今回のサンプルのようなレイアウトを実現しました。

色々見ていても、こういった事例を載せているサイトがなかったので書いてみました。
(単純に気づいてないだけ・・?)

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/46