Home > 技術 > Safariを使って-webkit-box-shadowでシャドウを付ける

Safariを使って-webkit-box-shadowでシャドウを付ける

CSS3のbox-shadowプロパティを使うと簡単にドロップシャドウを付けれるみたい。
画像とかに付けると見栄えもかっこいい感じになるから早く全ブラウザで対応してほしいところです。
これが導入されればわざわざPhotoshopでドロップシャドウを付ける必要もなくなる?のにね。

Safari3では-webkit-box-shadowという名前になっているのでちょっと使ってみました。
以下が簡単なサンプルです。

<style>
<!--
.shadow {
     -webkit-box-shadow : rgba(0, 0, 0, 0.498039)0px5px10px;
    background - color : rgb(255, 240, 70);
    height : 250px;
    width : 250px;
}
-->  </style>
<div class="shadow"></div >

これをSafari3で表示させると上の画像のようにドロップシャドウがついた状態になります。
う~ん、かっこいい!

■参考リンク
WebKit HTML 5 SQL Storage Notes Demo
ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応 - builder by ZDNet Japan

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1055
Listed below are links to weblogs that reference
Safariを使って-webkit-box-shadowでシャドウを付ける from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > Safariを使って-webkit-box-shadowでシャドウを付ける

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top