
ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応
エ・ビスコム・テック・ラボ
2008-04-25 17:45:01
CSS 3のbox-shadowプロパティを利用すると、ボックスに影をつけて表示することができる。ドロップシャドウと呼ばれる効果で、これまでは画像を使って表現する必要があった。今回は、box-shadowプロパティに対応したSafari 3を利用して、ドロップシャドウの効果を見ていきたい。
ボックスに影をつけて表示する
box-shadowプロパティはCSS 3の草案「CSS3 Backgrounds and Borders Module」で提案されており、Safari 3では「-webkit-box-shadow」というプロパティ名で利用することができる。
box-shadowを使ってボックスに影をつけるには、次のような形で4つの値を指定する。指定する値を省略したり、記述順序を変更したりすることは認められていない。
box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色]
たとえば、オレンジ色のボックスにグレーの影をつけると次のように表示される。ここでは、縦横のオフセットやぼかしの半径を10ピクセルに設定した。

div{ background-color: #ffaa00; -webkit-box-shadow: 10px 10px 10px gray; }
こんにちは
※ブラウザで表示を確認する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
AWSセミナー講演レポート
-
vFORUMレポ!次世代の構築・運用へ
-
デジ変した世界の勝ちパターン探る
-
すぐに使えるデータは3割以下
-
SBI証券の挑戦!!
-
急げ!新たなネットインフラの革新
-
必須の時代!AIチャットボットの力
-
転換期を戦える組織やチームを作れ
-
AWSセミナー講演レポート
-
AWSセミナー講演レポート
-
結局ここで手を抜いたら終わり…!
-
特集:ブロック至上主義からの脱却
-
AWSセミナー講演レポート
-
AWSセミナー講演レポート
-
DX時代に競争力の源泉となるHCI
-
働き方改革のカギはズバリこれ!
-
悩ましい!生産性と管理強化の天秤
-
NWに悩まない次世代クラウド基盤!
-
CIOは部分最適ではいけない
-
複雑なセキュリティ運用と決別を!
-
「カジュアルなIoT」を実践!
-
熱視線!「次世代メガクラウド」
-
どのクラウドかは重要ではない
-
特集:AWS活用はここまできた
-
衝撃!サイバー攻撃の9割はメール
-
ビジネス視点で評価せよ!
-
ITガバナンス協会副理事に聞く!
-
まさにインフラ担当者の希望の星!
-
兼任情シスでも、手は緩められない
-
事例で知るAWS徹底活用!
-
「ためられない」と分析もできない
-
IoT時代の新たなモノづくり
-
最近、Office 365が重い…!?
-
コンタクトセンターが変わる!
-
「ゼロ情シス」企業こそ攻めのITへ
-
真の生産性向上を成す働き方とは
-
AWSセミナー講演レポート
-
漫画:輸出管理の困ったに
-
対談:大谷イビサ氏×ZDNet編集長
-
5G時代のネットワーク運用最前線
-
Windows 10 移行の課題に切り込む
-
AWSセミナー講演レポート
-
クラウドがもたらすITの価値
-
いまどきのクラウド用語12選
-
加速する基幹システムのオープン化
-
コネクテッド・エンタープライズへ
-
IoTは次のフェーズへ
-
機械学習は敷居が高い?
