The shadow for the image using CSS. Revamped.

Inspired by this: habrahabr.ru/blog/css/36860.html

To begin, let me remind you that to create a double / non-standard frame for images, you need {... cut ...}, or you need to put a picture in a container and set the indent and background image for the container .

And so on. There is a better way!





No, there will be no containers, no borders and no javascript, but just one line of CSS:



img { background: url(shadow.jpg) right bottom no-repeat; padding: 0 12px 14px 0; }



Yes Yes! Exactly. For img, you can also set the background as a picture, not just colors. And ... * drum roll * it works everywhere! (why wouldn't he work?)

Apparently, the majority of web developers had the opinion that img is a drawing, and that’s why he needs a background? :) And they started shoving shadows into containers ... We break stereotypes!

')

- I do not believe it!

- Trust me, it is!



Yes, our shadow is of a fixed size and must be drawn in advance either in Photoshop or somewhere else.