[ CSS3 ] 影 ( box-shadow ) のサンプル

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

ちょっと訳あって、CSS3 の影のサンプルを書いてみました。

https://codepen.io/darucub/pen/wBGvMEK

box-shadow プロパティは、CSS3 のプロパティなので IE8 で使う事ができませんが、Firefox, Safari, Google Chrome の各ブラウザは、独自拡張として実装されているので、すぐに使う事ができます。

書き方

書き方は次のようになります。

box-shadow: [横方向] [縦方向] [ぼかし具合] [色];

影を表示する CSS

CSS3 用の記述

box-shadow: 3px 3px 3px #ccc;

Safari, Google Chrome ( Webkit ) 用の記述

-webkit-box-shadow: 3px 3px 3px #ccc;

Firefox ( Mozilla ) 用の記述

-moz-box-shadow: 3px 3px 3px #ccc;

実際に使う時は、次のように上の三つをまとめて書いておきます。

box-shadow: 3px 3px 3px #ccc;         /* CSS3 */
-moz-box-shadow: 3px 3px 3px #ccc;    /* Mozilla */
-webkit-box-shadow: 3px 3px 3px #ccc; /* Webkit */

参考にさせてもらったページ

• CSS3 text-shadow box-shadow の使い方 | CSS Lecture

• CSS3メモ「box-shadow」の使い方 | Coder’s Note

ありがとうございます。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。