Как добиться эффекта «стека» границы фото с помощью CSS?

Question

Я хотел бы иметь возможность добавить класс к изображениям, который добавляет рамку, которая делает их похожими на стопку фотографий. Кто-нибудь знает, как это сделать?

Пояснения: в идеале что-то вроде стека, показанного здесь , но оно не обязательно должно быть интерактивным и должно работать только для одной фотографии. Я также не против использовать javascript при необходимости (хотя предпочтительнее jQuery).

Answer 1

Эффект «глубины», вероятно, будет иметь вид тень . Вам нужно поворачивать фотографии, чтобы получить эффект «грязного набора фотографий», или вы ищете «аккуратно сложенный» вид?

Мне кажется, что эффект "грязной стопки фотографий" разбивается на три составляющие:

1. Поместите фон позади изображения для "поляроидного" вида (объяснено в других комментариях
2. Поместите тень позади изображения для эффекта "глубина" (объяснено выше и в других комментариях
3. Поворот изображения. Я никогда не делал этого сам, но похоже, что кто-то закодировал плагин Jquery , который вы ищете.

Answer 2

Поместите свой IMG-тег во вложенный набор элементов DIV (количество делений будет определять количество фотографий в стопке). Затем используйте CSS, чтобы установить границы и отступы, чтобы элементы DIV постепенно увеличивались по сравнению с фотографией. Обычно вы добавляете больше отступов внизу и справа.

Answer 3

Ниже приведена моя рекомендация, в которой есть простой и понятный CSS, который приводит к идеальной пачке фотографий.

http://dabblet.com/gist/2023431

Answer 4

Поместите 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-shadow, определите графику для фона, которая достаточно велика для ваших изображений и выглядит как стопка фотографий. Приведенное выше выглядит так, как будто фото отбрасывает тень.

Answer 5

CSS3 пока поддерживается всеми, но вы можете посмотреть border-image .