Я хотел бы иметь возможность добавлять класс к изображениям, которые добавляют границу, которая делает их похожими на стек фотографий. Кто-нибудь знает, как это сделать?Как добиться эффекта «стека» с помощью CSS?
Уточнения: в идеале что-то вроде стека показано here, но оно не обязательно должно быть интерактивным и должно работать только для одной фотографии. Я также не против использования javascript, если это необходимо (jQuery будет предпочтительнее).
«Глубина» влияет, вероятно, на какой-то тип drop shadow. Вам нужно также поворачивать фотографии для эффекта «грязной фотосъемки» или вы ищете «аккуратно сложный» вид?
Эффект «грязное фото кучи», мне кажется, разбить на три составляющие:
Поместите свой тег IMG внутри вложенного набора элементов DIV (количество divs определит количество фотографий в стеке). Затем используйте CSS, чтобы установить границу и дополнение, чтобы элементы DIV постепенно становились больше, чем фотография. Как правило, вы добавите больше дополнений в нижнюю и правую.
CSS3 он поддерживается всеми, но вы можете посмотреть в border-image.
Поместите div вокруг изображения, а затем укажите 2 стиля.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
в .img-теневой классе, определить изображения для фона, который достаточно велик для ваших изображений, и выглядит как стопка фотографий. Вышеприведенное выглядит так, будто фотография бросает тень.
Ниже приведена моя рекомендация, которая имеет простой и простой CSS, который обеспечивает идеальный стек фотографий.
«беспорядочная куча фото» была бы идеальной! – 2008-10-03 16:54:48