Картинка с тенью CSS

Потратив "кучу времени" на украшение текста - переходим к оформлению картинок ( или фото ). Особенно украшать то, грубо говоря, и нечем... Займёмся тенями. Вид в любом случае результат будет особенным и неповторимым!Для реализации такой забавной штуки как тень от картинки нам понадобиться немножко познакомиться со свойствами CSS. Другими методами и способами подобную задумку, к сожалению, не решить. Опытные веб-мастера об этом конечно же знают, но мне хотелось бы с этим познакомить всех интересующихся. Итак, рассмотрим одно из свойств тега box-shadow. Для наглядности приведу небольшой рисунок:

image-shadow

Особенно и коментировать то нечего, всё и так понятно. Включив даное свойство в <style> и изменяя в разумных пределах необходимые данные можно изменить "дизайн" любой картинки. Выглядит это примерно так:

image-shadow1

<style> .boxShadow { box-shadow: 6px 6px #989898, 12px 12px #6c6666; } </style>

image-shadow2

<style> .boxShadow { box-shadow: 0 0 0 7px #60B88D, 0 0 0 14px #90CDAF, 0 0 0 21px #BFE3D1; } </style>

Добавив к этому свойства фона, цвета и радиуса можно получить самые разнообразные и красивые эффекты практически любых изображений. В конечном итоге всё зависит от полёта вашей фантазии.

Желаю удачи !