Uma técnica de design popular é criar um contêiner de conteúdo que se pareça com uma folha de papel e empilhar outras folhas de papel abaixo dele, adicionando um estilo em camadas ou tridimensional. Podemos criar esse efeito usando CSS direto, mas existem vários tipos de designs de papel empilhado que podemos considerar. Forneceremos trechos para quatro em particular.
Pilha vertical de papel na parte inferior
A ideia aqui é que nosso contêiner de conteúdo seja a folha de papel superior e mais folhas sejam empilhadas abaixo dela, com suas bordas exibidas na parte inferior da folha superior.
Veja o Efeito Pen Stacked Paper - Vertical por CSS-Tricks (@ css-tricks) no CodePen.
.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; )Pilha vertical de papel no topo
Este é o mesmo conceito do último, mas com a pilha de papéis revelada na parte superior do contêiner em vez de na parte inferior. A única diferença aqui é que reposicionamos a box-shadowpropriedade the no .paperelemento usando números negativos.
Veja o Efeito Pen Stacked Paper - Vertical Top por CSS-Tricks (@ css-tricks) em CodePen.
.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; )Pilha diagonal de papel
Este é um método ligeiramente diferente, onde usamos os ::beforee ::afterpseudo-elementos para criar as folhas de papel adicionais, em vez da box-shadowtécnica utilizada nos exemplos anteriores.
Veja o Efeito Pen Stacked Paper - Diagonal por CSS-Tricks (@ css-tricks) em CodePen.
/* 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; )Pilha de papel desorganizada
Podemos escalonar as folhas de papel para criar uma aparência intencionalmente bagunçada usando o mesmo tipo de técnica com pseudoelementos do último exemplo, embora usando a transformpropriedade para girar as folhas de papel subjacentes. Este exemplo assume o uso de Autoprefixer ou que os prefixos são usados para a transformpropriedade onde o suporte do navegador pode diminuir.
Veja o Efeito Pen Stacked Paper - Messy por CSS-Tricks (@ css-tricks) no CodePen.
.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; )