Эффект стопкой бумаги онлайн урок.


Популярная технология дизайна заключается в создании контейнера содержимого, который выглядит как лист бумаги и складывает другие листы бумаги под ним, добавляя многослойный или трехмерный стиль. Мы можем создать этот эффект, используя CSS, но есть несколько типов штабелированных бумажных конструкций, которые мы можем рассмотреть. Мы предоставим фрагменты для четырех, в частности.

# Вертикальный стек бумаги внизу

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

<div class="paper"></div>

.paper {
background: #fff;
box-shadow:
/* The top layer shadow */
0 1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 10px 0 -5px #eee,
/* The second layer shadow */
0 10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 20px 0 -10px #eee,
/* The third layer shadow */
0 20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}

# Вертикальный стек бумаги сверху

Это та же концепция, что и последняя, но с стопкой бумаг, отображаемой на верхней части контейнера, а не снизу. Единственное отличие здесь в том, что мы переместили свойствоbox-shadoowна элемент.paper, используя отрицательные числа.

<div class="paper"></div>

.paper {
background: #fff;
box-shadow:
/* The top layer shadow */
0 -1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 -10px 0 -5px #eee,
/* The second layer shadow */
0 -10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 -20px 0 -10px #eee,
/* The third layer shadow */
0 -20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}

# Диагональный стек бумаги

Это немного другой метод, в котором мы используем псевдонимы:: beforeи:: последля создания дополнительных листов бумаги, а неbox-shadowтехника, используемая в предыдущих примерах.

<div class="paper"></div>

/* Diagonal stacked paper effect */
.paper {
background-color: #fff;
/* Need position to allow stacking of pseudo-elements */
position: relative;
/* Padding for demo purposes */
padding: 30px;
}

.paper,
.paper::before,
.paper::after
{
/* Add shadow to distinguish sheets from one another */
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}

.paper::before,
.paper::after
{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
}

/* Second sheet of paper */
.paper::before {
left: 7px;
top: 5px;
z-index: -1;
}

/* Third sheet of paper */
.paper::after {
left: 12px;
top: 10px;
z-index: -2;
}

# Неорганизованный бумажный стек

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

<div class="paper"></div>

.paper {
background: #fff;
padding: 30px;
position: relative;
}

.paper,
.paper::before,
.paper::after
{
/* Styles to distinguish sheets from one another */
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border: 1px solid #bbb;
}

.paper::before,
.paper::after
{
content: "";
position: absolute;
height: 95%;
width: 99%;
background-color: #eee;
}

.paper::before {
right: 15px;
top: 0;
transform: rotate(-1deg);
z-index: -1;
}

.paper::after {
top: 5px;
right: -5px;
transform: rotate(1deg);
z-index: -2;
}