Эффект тени для картинки с помощью CSS

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

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

Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 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, то это ваши проблемы :)

11 thoughts on “Эффект тени для картинки с помощью CSS

  1. Вот когда наталкиваешься на такие уроки, вроде все хорошо, записал – потом применю. А когода и куда, вот вопрос! Время, где взять его?

  2. по-моему назвать это тенью можно довольно условно, тень так не падает при свете сверху-слева

    мне кажется без четырех дополнительных блоков тут не обойдешься, дабы не создавать огромных картинок

  3. Максим, а ты попробуй на нормальной картинке такой эффект сделать. Я просто неудачный пример подобрал, с белым фоном.

  4. Во многом похожий эффект можно сделать при помощи следующего стиля:

    .shadow {
    border-style: groove;
    border-width: 0px 4px 4px 0px;
    border-color: #cccccc;
    }

    Отличие и недостаток: варьировать можно только внешним цветом тени, внутренняя часть всегда черная. Но в большинстве случаев этого вполне достаточно.

  5. да это не тень а фуфло. Тень должна находиться чуть ниже и левее самой картинки, иначе она не пропорциональна… Блин жалко что не все сраные браузеры адекватно реагируют на отрицательные отступы, с ними все ТАК ПРОСТО бы было =(

  6. 1) можно есчо вот так: береш див
    .shadow{background-color: #CCCCCC;}

    2) в него кладеш другои див =) и ваяеш стиль
    .shadow div {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    position: relative;
    left: -5px;
    top: -5px;}
    вприцпе ниче так получаецо

  7. так можно налепить дивов в несколько слоев и добиться эффекта градиента для тени, все нужно так это написать стили .shadow div […div]

  8. вот пример на css3
    .border_shadow {
    -webkit-box-shadow: 10px 10px 5px #888;
    padding: 5px 5px 5px 15px;
    width: 300px;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *