Popüler bir tasarım tekniği, bir kağıt yaprağına benzeyen bir içerik kabı oluşturmak ve diğer kağıtları onun altına istifleyerek katmanlı veya üç boyutlu bir stil eklemektir. Bu efekti doğrudan CSS kullanarak oluşturabiliriz, ancak dikkate alabileceğimiz çok sayıda yığılmış kağıt tasarımı vardır. Özellikle dört için pasajlar sağlayacağız.
Altta Dikey Kağıt Yığını
Buradaki fikir, içerik konteynırımızın kağıdın en üst sayfası olması ve daha fazla sayfanın kenarları üst yaprağın altında gösterilecek şekilde onun altına yığılmasıdır.
CodePen'de Kalem Yığınlı Kağıt Efekti - Dikey by CSS-Tricks (@ css-tricks) bölümüne bakın.
.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; )Üstte Dikey Kağıt Yığını
Bu, sonuncusuyla aynı kavramdır, ancak kağıt yığını alt yerine kabın üstünde ortaya çıkar. Buradaki tek fark, negatif sayılar kullanarak öğe box-shadowüzerindeki özelliği yeniden konumlandırmış olmamızdır .paper.
CodePen'de Kalem Yığınlı Kağıt Etkisi - Dikey Üst by CSS-Tricks (@ css-tricks) bölümüne bakın.
.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; )Çapraz Kağıt Yığını
Bu, önceki örneklerde kullanılan teknikten ziyade ek kağıt yapraklarını oluşturmak için ::beforeve ::aftersözde unsurları kullandığımız biraz farklı bir yöntemdir box-shadow.
CodePen'de Kalem Yığınlı Kağıt Efekti - Çapraz CSS-Hileli (@ css-tricks) bölümüne bakın.
/* 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; )Düzensiz Kağıt Yığını
transformAltta yatan kağıt sayfalarını döndürmek için özelliği kullanarak, son örnekte olduğu gibi sözde elemanlarla aynı tür tekniği kullanarak kasıtlı olarak dağınık bir görünüm yaratmak için kağıt sayfalarını kademelendirebiliriz . Bu örnek, Autoprefixer'ın kullanıldığını veya transformtarayıcı desteğinin azalabileceği özellik için öneklerin kullanıldığını varsayar .
CodePen'de Kalem Yığınlı Kağıt Efekti - Messy by CSS-Tricks'e (@ css-tricks) bakın.
.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; )