<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

11月
11
全日 しがらき森のクラフトフェスタ @ 滋賀県立陶芸の森 太陽の広場
しがらき森のクラフトフェスタ @ 滋賀県立陶芸の森 太陽の広場
11月 11 – 12月 13 全日
しがらき森のクラフトフェスタ @ 滋賀県立陶芸の森 太陽の広場
アクセス:新名神高速道路信楽ICから焼く5分 信楽高原鐵道信楽駅から徒歩約20分
12月
13
全日 信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
12月 13 – 12月 24 全日
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
期間:12月13日(金)~12月24日(火)※要予約 時間:信楽駅9:46発→貴生川駅10:09着 貴生川駅10:24発→信楽駅10:48着 信楽駅10:54発→貴生川駅11:17着 貴生川駅11:24発→信楽駅10:48着 料金:大人940円、小人480円(大人一人につき未就学児2名無料) サンタさんと遊んでプレゼントをもらおう! 予約先:信楽高原鐵道株式会社 TEL0748-82-4366
12月
21
全日 NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
12月 21 2019 – 3月 28 2020 全日
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
会期:12月21日(土)~令和2年3月28日(土)9:00~17:00 場所:信楽伝統産業会館(甲賀市信楽町長野1142) ※入場無料 焼き物の里・信楽を舞台に、女性陶芸家の波乱万丈な人生を描く「スカーレット」。 写真や収録に使用した小道具、衣装、フォトスポット等でその魅力をご紹介します。 問い合わせ:信楽伝統産業会館 TEL0748-82-2345

LOCAL LINK

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