ポートフォリオの作り方をゼロから徹底解説

CSSのdrop-shadow(ドロップシャドウ)で影を付ける方法

この記事を読むのに必要な時間は約 3 分です。

デモ

まずはドロップシャドウのデモです。
背景透過のPNG画像にdrop-shadow(ドロップシャドウ)を適用しました。

ドロップシャドウの使い方

.drop_shadow_demo{
  filter: drop-shadow(10px 10px 4px #37beb0);
}

左から順に
X軸のオフセット、Y軸のオフセット、ぼかす値、色
を設定できます。

ボックスシャドウとの違い

box-shadow(ボックスシャドウ)を使うと背景透過のPNG画像でも四角い形で影が付いてしまいます。
矩形に対して影を落とす場合は問題ありませんが、複雑な形状に影を付けるのには不向きです。

迷ったら便利な「drop-shadow」を使いましょう。

便利なCSSジェネレーター

サイト制作に超便利なCSSジェネレーターです。
ボックスシャドウだけでなく、フキダシやストライプ、グラデーションなど。
面倒なCSSを簡単に生成してくれます!

【2021年度版】おすすめCSSジェネレーターサイト17選 シャドウ、フキダシ、グラデーション等をコピペで作成

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。

おわりに

以上、CSSのdrop-shadow(ドロップシャドウ)の使い方とbox-shadow(ボックスシャドウ)との違いについてでした。
ボックスシャドウよりも何かと便利なドロップシャドウがオススメです。

ではまた!