<CSS>ボックスや画像に影をつける方法

ボックスに影をつけるCSS

widthが90%でボックス内padding:20pxにしてあります。基本的には<h3>と<p>だけですが自由度が高いようです。また透過画像などにも使用でき、画像内容に合わせて影ができるのが特徴です。

今までの影の付け方といったらbox-shadowだったのではないでしょうか?
私もそうでした。最近ネットでいろいろ調べているとfilterたるものが!
早速素人気味の私が少しばかり解説させていただきます。
filterプロパティのdrop-shadow()は、一見するとbox-shadowプロパティに似ていますが、PNG画像の透過性やSVG図形にも対応しているので、オブジェクトの形に沿って影を付ける事ができるのが特徴です。
使い方は、filter: drop-shadow()の指定は基本的にはbox-shadowと同じように使ってあげればOKです。括弧の中に指定する値は、box-shadowと同じです。
下記のように指定していきます。

filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));

ただし、insetキーワードはこのフィルターでは指定できないことに留意しておく必要があります。
CSSフィルターは、影だけではなく、明度や彩度も気軽に変えられることのできる注目技術です。この機会にぜひマスターしてみてはいかがでしょうか。

 
 滋賀県ランキングにほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ

EVENT

9月
1
全日 秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
9月 1 – 12月 13 全日
秋季特別展MIHO MUSEUMコレクションの形成-日本絵画を中心に- @ MIHO MUSEUM
<期間> 9月1日(火)~12月13日(日)10:00~16:00(入館は15:00まで) 月曜休館 ※9月21日(祝・月)、11月23日(祝・月)は開館、9月23日(水)、11月24日(火)は休館 <場所> MIHO MUSEUM 入館には事前予約が必要です。 詳しくはこちら→http://www.miho.or.jp/

LOCAL LINK

にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP