An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Technology Review
- Smashing Apps
- You The Designer
- Fuel Your Creativity
- FanExtra - PSD
- Crazy Leaf Design
- Reencoded
- CSS Globe
- Line 25
- Hashedout
Help Webnuz
Referal links:
box-shadow vs drop-shadow() in CSS
In this article, we will see the difference between the box-shadow and drop-shadow(). The box-shadow is a CSS property but drop-shadow() is a function. Both box-shadow and drop-shadow() are used to cast a shadow. The difference between them is, the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
In simple words, while working with the transparent images if you use the drop-shadow()filter function it will create a shadow on the image's content and if you use the box-shadow property it will create a rectangular shadow behind an element's entire box.
In case of text content,drop-shadow()works similar to the text-shadow property.
Their syntax is,
filter: drop-shadow(offset-x offset-y blur-radius color);
box-shadow: offset-x offset-y blur-radius color ;
Demo Code is,
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>box-shadow vs drop-shadow</title> <style> .img-1 { filter: drop-shadow(0 0 5px black); } .img-2 { box-shadow: 0 0 5px black; } </style> </head> <body> <img class="img-1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google.logo" /> <img class="img-2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google.logo" /> </body></html>Also Read:
Original Link: https://dev.to/keshavs759/box-shadow-vs-drop-shadow-in-css-cep
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To