2008年9月17日水曜日

CSSでdivの両側に画像を使うとか

CSS3にはimage-borderというのがある。これがめっさ便利なんですが、まだCSS3のどのモジュールも勧告に至っていないのが現状で、さっさとしろW3C!という感じです。

W3Cの今の感じだと、Fireworksのナインスライス的なものをCSSで簡単に再現できる。 すでにSafariが実験的に-webkit-border-imageとして実装している。ちょっと違うけど、でもこれマジで便利です。

例えば、右、左下、下に影をつけるドロップシャドウの画像をborderに使いたい場合はこんな感じ。(よく理解できてないので勉強中)

ソース

こんな画像を用意して


こんな風に書いてみる

#CSS
#container{
  -webkit-border-image: url(img/box_shadow.gif)  8 15 15 10 / 12px round round;
}
<div id="container">
  <p>バルト(力士)の日本語は聞き取りにくい</p>
</div>

実行例(Safari3 on Macで確認済み)

バルト(力士)の日本語は聞き取りにくい

補足

-moz-border-imageというのもあるらしいけど、Firefox3.1からの実装らしいです。まだリリースされてません。でも書き方はwebkitと同じなようです。

これでwidthやheightを指定したり、可変なリキッドデザインにしても綺麗に表示されます。

残念ながら、同じWebkitのChromeでSafariできちんと表示されるページを見てみたんですが、ちょっと崩れるみたいですねぇ。んー

全てのブラウザがborder-imageを早く実装する日を夢見て。
ちなみに角丸を施すには、-webkit-border-radius-moz-border-radiusが使えます☆

0 件のコメント: