2009年10月12日

CSS : -webkit-border-imageを試してみた @ ウェブ

img1 img2

-webkit-border-imageが実際にどの様な指定になるのか試してみました。ウェブブラウザとしてはSafariを使いましたがGoogle ChromeとかiPhoneのMobile Safariでも大丈夫だと思います。

書き方としてはSafariのCSSリファレンスを見るとこの様に書かれてあります。

-webkit-border-image: uri top right bottom left x_repeat y_repeat

-webkit-border-image: uri top right bottom left / border x_repeat y_repeat

-webkit-border-image: uri top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

-webkit-border-image: function top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

説明部分を訳してみるとこんな感じかな。

uri
画像の場所

top
画像の上辺からの距離

right
画像の右辺からの距離

bottom
画像の底辺からの距離

left
画像の左辺からの距離

x_repeat
水平方向の繰り返しスタイル(ここに入るのはrepeat/round/stretchかな)

y_repeat
垂直方向の繰り返しのスタイル

border
全ての枠線の幅

top_border
上辺の枠線の幅

right_border
右辺の枠線の幅

bottom_border
底辺の枠線の幅

left_border
左辺の枠線の幅

function
グラデーションなどの画像を生成するファンクション

最後のfunctionがまだよく分かってないのですが、使い方としてはこんな感じ。

-webkit-border-image: url("dropshadow.gif ") 20 20 20 20 / 20px;

(ドロップシャドウだったら他のCSSで出来るとかって突っ込みは無し)

画像の周辺から必要な幅だけを指定して使用出来るので画像自体の大きさが変わっても、周りからの距離が変化無い場合は、指定を変更しなくても大丈夫です。

参考にしたサイトも書いておきます。

Google ChromeのCSS 3対応状況 - builder by ZDNet Japan
>>関連リンク

ぷちもり作成メモ
>>関連リンク

Mac Dev Center: Safari CSS Reference: Introduction to Safari CSS Reference
>>関連リンク

CSS3も含めてブラウザの対応状況が違ったりして、使い辛いモノもありますが、iPhone用のサイトを作るとか、特定の環境向けにHTMLを書く場合は、-webkit-border-imageなども含めて、積極的に使った方が、画像の手間が省けたりして、生産性は向上するかなと言う気がします。

閲覧数: 7418 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト