ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応

エ・ビスコム・テック・ラボ
2008-04-25 17:45:01
  • このエントリーをはてなブックマークに追加

最初の1文字に影をつけた場合

 セレクタで「:first-letter」や「:first-line」を指定すると、最初の1文字や1行がボックスとして扱われるようになるが、これらのボックスにも影をつけることが可能だ。たとえば、

の最初の1文字に-webkit-border-shadowで影をつけると、次のように表示することができる。

最初の一文字に影をつけた場合 最初の一文字に影をつけた場合
div{
line-height: 2;
}

div:first-letter{
font-size: 2em;
padding: 0 15px;
margin: 0 10px 0 0;
float: left;
background-color: #ffaa00;
-webkit-box-shadow: 5px 5px 5px gray;
}
ブラウザで表示を確認する

テーブルのセルに影をつけた場合

 テーブルや、テーブルの各セルにも影をつけることができる。たとえば、テーブルを構成する

と、セルを構成する
に-webkit-box-shadowを指定すると次のような表示になる。

テーブルと各セルに影をつけたもの テーブルと各セルに影をつけたもの
table{
border-spacing: 10px;
-webkit-box-shadow: 5px 5px 20px gray;
}

td{
background-color: #ffaa00;
-webkit-box-shadow: 5px 5px 5px gray;
padding: 10px;
}
ブラウザで表示を確認する
  • コメント(1件)
#1 Cee   2008-05-01 17:34:23
重ねた時のSample良いですね。ゆくゆくは下の色を考慮してくれたらいいなぁ。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]