Как добиться эффекта "стека" с помощью CSS?

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

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

5 ответов

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

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

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


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


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


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

http://dabblet.com/gist/2023431


Поместите div вокруг изображения, а затем определите 2 стиля.

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

licensed under cc by-sa 3.0 with attribution.