<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

5月
31
全日 しがのフォトコン!!2021
しがのフォトコン!!2021
5月 31 2021 – 2月 14 2022 全日
しがのフォトコン!!2021
びわこビジターズビューローが開催するフォトコンテストが始まりました。 滋賀ならではの絶景写真や心和む身近な風景写真など、滋賀を好きになる作品のご投稿を送って素敵なものをGETしましょう! テーマは「魅力ある滋賀」 身近な所で見つけたとっておきの風景や紹介したくなる滋賀の四季を収めた写真が随時UPされています。 ぜひ素敵な一枚を送ってみましょう。 募集期間:2021年05月31日~2022年02月14日 応募規約:こちらから確認いただけます 入賞賞品:フォトコンテストには、滋賀県内各地の市町・観光協会が協賛。 入賞者には地元スイーツや観光チケットなど、滋賀県各地からの逸品をプレゼント♪ しがのフォトコン詳細ページ

LOCAL LINK

PROMOTION VIDEO

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

Access

  • 484,650
PAGE TOP