CSSで影をつける

css

2020-05-27

box-shadow

box-shadow:左右の距離 上下の距離 ぼかし 広がり 色 inset; で設定します。

insetを付けると、ボックスの内側に影がつきます。

{.box-shadow{box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-moz-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-webkit-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-o-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);
-ms-box-shadow: 0 0 20px rgba(136, 133, 133, 0.3);}

 

※透過画像のpngにも、その形状ではなく四角く影を落とします。

filter

「filter」はphotoshop等の画像編集ソフトを使わずに、画像をぼかしたり、明度や彩度を変えたり、その他様々な機能を持ちます。そのうちの一つがドロップシャドウです。

セレクタ {    filter: drop-shadow(0 0 4px rgba(136, 133, 133, 0.9));}

 

「box-shadow」で設定できるinsetは使えません。
こちらもpngやsvgにも使用できます。また、IEでは対応していません。

-css

関連記事

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。