- 2008-06-27 (金)
- 技術
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
【関連する記事】
Comments:0
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, JavaScripter Blog
