Думаю многие из вас сталкивались с задачей создания двойной/нестандартной рамки для изображений на сайте. Частично я описал технику создания таких рамок здесь. Но я не упомянул (а если честно, то и сам тогда не подумал об этом) в той статье один интересный нюанс.
С помощью этой техники, можно создавать эффект тени для картинки, буквально в пару строк. Что нужно сделать?
Для начала напомню, что для создания двойной/нестандартной рамки для изображений нужно задать отступ шириной в 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, то это ваши проблемы :)
Вот когда наталкиваешься на такие уроки, вроде все хорошо, записал – потом применю. А когода и куда, вот вопрос! Время, где взять его?
по-моему назвать это тенью можно довольно условно, тень так не падает при свете сверху-слева
мне кажется без четырех дополнительных блоков тут не обойдешься, дабы не создавать огромных картинок
Совсем не похоже на тень.
Максим, а ты попробуй на нормальной картинке такой эффект сделать. Я просто неудачный пример подобрал, с белым фоном.
Спасибо большое. Как раз искал как сделать тень.
Что то не очень у тебя вышла тень
Во многом похожий эффект можно сделать при помощи следующего стиля:
.shadow {
border-style: groove;
border-width: 0px 4px 4px 0px;
border-color: #cccccc;
}
Отличие и недостаток: варьировать можно только внешним цветом тени, внутренняя часть всегда черная. Но в большинстве случаев этого вполне достаточно.
да это не тень а фуфло. Тень должна находиться чуть ниже и левее самой картинки, иначе она не пропорциональна… Блин жалко что не все сраные браузеры адекватно реагируют на отрицательные отступы, с ними все ТАК ПРОСТО бы было =(
1) можно есчо вот так: береш див
.shadow{background-color: #CCCCCC;}
2) в него кладеш другои див =) и ваяеш стиль
.shadow div {
background-color: #FFFFFF;
border: 1px solid #999999;
position: relative;
left: -5px;
top: -5px;}
вприцпе ниче так получаецо
так можно налепить дивов в несколько слоев и добиться эффекта градиента для тени, все нужно так это написать стили .shadow div [...div]
вот пример на css3
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}