ドロップシャドウVS

3821 ワード
css テキストリンク
先日PNGのドロップシャドウの超クールなツイートを作りました私はそれがPNGのものを支持したということを知りませんでした.

🔥 box-shadow doesn't work well with transparent images. filter: drop-shadow does what you'd expect, adding a shadow to the image's contents.

.my-img {
filter: drop-shadow(1px 2px 3px black);
}

CSS filters are so rad 🥰

Pen: https://t.co/rVKgSlijt1 pic.twitter.com/6rwc7gG1Ro

— Josh ✨ ( )

HTML構造


私の例では、私のお気に入りのポンチョモン「Eevee」を使っていて、3つのEevee PNGを容器に入れます.
<div class="container">
  <img src="https://i.imgur.com/q3SXJQf.png" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="box-shadow" />
  <img src="https://i.imgur.com/q3SXJQf.png" class="drop-shadow" />
</div>
あなたが見ることができるように、1つは生の例になるでしょう、1つは箱の影を持っています、そして、3番目は低下影を持ちます.

ボックスシャドウ


あなたはおそらく見て、箱の影を使用する前に、それはクールな機能だと私たちの“ボックス”に影を追加します.
次のように動作します.
.box-shadow {
  box-shadow: 0px 0px 10px #000;
}
それはイメージに影を置きます、しかし、箱の上で.

ドロップシャドウ


その後、それはPNGの輪郭になると驚くべきCSS Filterです!
.drop-shadow {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

これは、すべて次のcodepenになります.

ブラウザサポート


前に述べたように、CSSのフィルタはクールですが、まだ広くサポートされていません😩.
polyfillだけでなく、限られている.

読んでいただきありがとうございます、接続しましょう！


私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook
Macの初期設定 手順書
Form Input Label