Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.

С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 1px для картинки и прописать для нее либо border с параметрами цвета и толщины, либо положить картинку в контейнер и задать для контейнера отступ и фоновое изображение.

В данном случае все проще. Нужно задать padding и border для картинки всего лишь с двух сторон, вместо четырех и фон. Например вот так:

.shadow{
border-bottom:2px solid #eee;
border-right:2px solid #eee;
padding-bottom:2px;
padding-right:2px;
background:#ccc;
}

Вот пример:

Не уверен что на картинке с белым фоном это выглядит так как надо, но все же

С неменьшим успехом можно проделывать подобное, задавая фоновое изображение и играя с его позиционированием.

Естественно, что можно и нужно эксперементировать чтобы добиться нужного эффекта, но суть ясна.

P.S. В Quircks Mode в Интернет Эксплорере 6 не будет работать padding для img, но если вы все же работаете в Quircks Mode, то это ваши проблемы