Một kỹ thuật thiết kế phổ biến là tạo một hộp chứa nội dung trông giống như một tờ giấy và xếp các tờ giấy khác bên dưới nó, thêm kiểu nhiều lớp hoặc ba chiều. Chúng ta có thể tạo hiệu ứng này bằng cách sử dụng CSS thẳng, nhưng có nhiều kiểu thiết kế giấy xếp chồng lên nhau mà chúng ta có thể xem xét. Chúng tôi sẽ cung cấp các đoạn trích cụ thể cho bốn.
Chồng giấy dọc ở dưới cùng
Ý tưởng ở đây là vùng chứa nội dung của chúng ta là tờ giấy trên cùng và nhiều tờ hơn được xếp bên dưới nó với các cạnh của chúng được hiển thị ở dưới cùng của tờ trên cùng.
Xem Hiệu ứng giấy xếp chồng lên nhau bằng bút - Dọc theo CSS-Tricks (@ css-trick) trên 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; )Chồng giấy dọc trên đầu
Đây là khái niệm giống với khái niệm cuối cùng, nhưng với chồng giấy được tiết lộ trên đỉnh của hộp đựng thay vì ở dưới cùng. Sự khác biệt duy nhất ở đây là chúng tôi đã định vị lại vị trí của thuộc box-shadowtính trên .paperphần tử bằng cách sử dụng số âm.
Xem Hiệu ứng giấy xếp chồng lên nhau bằng bút - Trên cùng theo chiều dọc của CSS-Tricks (@ css-trick) trên 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; )Chồng giấy theo đường chéo
Đây là một phương pháp hơi khác, trong đó chúng tôi sử dụng các yếu tố ::beforevà ::aftergiả để tạo ra các trang giấy bổ sung, thay vì box-shadowkỹ thuật được sử dụng trong các ví dụ trước.
Xem Hiệu ứng giấy xếp chồng lên nhau bằng bút - Đường chéo theo CSS-Tricks (@ css-trick) trên 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; )Ngăn xếp giấy vô tổ chức
Chúng ta có thể làm xáo trộn các tờ giấy để tạo ra một cái nhìn lộn xộn có chủ ý bằng cách sử dụng cùng một loại kỹ thuật với các phần tử giả như ví dụ cuối cùng, mặc dù sử dụng thuộc transformtính để xoay các tờ giấy bên dưới. Ví dụ này giả định việc sử dụng Autoprefixer hoặc các tiền tố được sử dụng cho thuộc transformtính mà hỗ trợ trình duyệt có thể bị suy yếu.
Xem Hiệu ứng giấy xếp chồng lên nhau bằng bút - Lộn xộn bởi CSS-Tricks (@ css-trick) trên 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; )