Тень для картинки с помощью CSS. Revamped.

Навеяно этим: habrahabr.ru/blog/css/36860.html

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно {...cut...}, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

И так далее. There is a better way!


Нет, здесь не будет никаких контейнеров, никаких бордеров и никакого яваскрипта, а всего одна строчка CSS:

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

Да-да! Именно. Для img можно тоже задавать фон в виде рисунка, а не только цвета. И… *барабанная дробь* оно работает везде! ( а с чего бы ему не работать? )
Видимо, у большинства веб-разработчиков сложилось мнение, что img — рисунок, и всё, зачем ему бэкграунд? :) И начали совать тень в контейнеры… Ломаем стереотипы!

— Не верю!
— Trust me, it is!

Да, тень у нас фиксированного размера и должна быть заранее нарисована либо в Photoshop, либо где-то ещё.