【cssコピペ】png画像に影を付ける方法【drop-shadowフィルター解説】

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

画像に影を落とす方法

サイトにアップした画像に影をつけたいことはよくあります。

こちらでは、PNG画像の透過性やSVG図形にも対応している万能css「filter: drop-shadow()関数」紹介します。

drop-shadow()関数のサンプルcss

filter: drop-shadow(10px 10px 10px #000000);

drop-shadow()コードの解説

drop-shadow(offset-x offset-y blur-radius color)

つまり、横の距離、縦の距離、ぼかす半径、色

の順番に記述するということです。

コピペして使ってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。