Khi bạn đặt một thứ gì đó - chẳng hạn như một tờ giấy thông thường - trong một thư mục manilla, một phần của thứ đó có thể ló ra khỏi thư mục một chút. Điều tương tự với ví và thẻ tín dụng. Các thẻ chỉ là một nét nhỏ để bạn có thể nhanh chóng biết được mình đang mang thẻ nào.
Tôi gọi loại thứ này là "khe hở". Một cái khe là nơi chúng ta tạo ra ảo giác về một lỗ hổng mà qua đó chúng ta có thể trêu chọc một yếu tố hình ảnh ló ra khỏi nó. Và chúng ta có thể làm điều đó trong CSS!
Phần quan trọng của thiết kế là bóng đổ, đó là thứ mang lại dấu hiệu trực quan về việc có một khe hở. Sau đó, có nắp cho khe cung cấp không gian cho phần tử được trưng bày có thể nhìn qua từ bên dưới.
Đây là những gì chúng ta sẽ làm cùng nhau:
Hãy bắt đầu với việc tạo bóng đổ
Bạn có thể ngạc nhiên rằng bóng đổ trong ví dụ này không được tạo bằng bóng CSS thực tế, như box-shadow hoặc một drop-shadow() lọc. Thay vào đó, bóng tối là một yếu tố riêng biệt, tối và mờ đi. Điều này rất quan trọng để làm cho thiết kế dễ thích ứng hơn, cả ở trạng thái mặc định và trạng thái động.
Bìa là yếu tố khác trong thiết kế. Lớp phủ là cái mà tôi gọi là phần tử phủ lên phần bóng tối. Đây là hình mô tả cách bóng tối và lớp phủ kết hợp với nhau.
Bóng đổ được tạo ra từ một hình chữ nhật thẳng đứng nhỏ có nền gradient. Gradient tối hơn ở giữa. Vì vậy, khi phần tử bị mờ, nó sẽ tạo ra bóng tối ở giữa; do đó nhiều chiều hơn.
Bây giờ, nửa bên trái của bóng được tạo lại được bao phủ bởi một hình chữ nhật ở trên, được tô màu giống hệt như nền của vùng chứa của nó.
Cả bìa và bóng sau đó được di chuyển sang trái một chút để nó có vẻ được phân lớp
Làm việc trên trang bìa
Để trang bìa hòa hợp với nền của thiết kế, màu nền của nó được kế thừa từ phần tử chứa của nó. Ngoài ra, bạn cũng có thể thử trộn bìa với nền của nó bằng cách sử dụng các tiêu chuẩn như Mặt nạ CSS và chế độ pha trộn, tùy thuộc vào sự lựa chọn thiết kế và yêu cầu của bạn.
Để tìm hiểu một số điều cơ bản về cách các tiêu chuẩn này có thể được áp dụng, bạn có thể tham khảo các bài viết sau: “Đắp mặt nạ so với Cắt: Khi nào thì sử dụng từng cái” cung cấp một lớp lót tuyệt vời trên mặt nạ. Tôi cũng đã viết về các chế độ pha trộn CSS trong bài báo này nơi bạn có thể tìm hiểu về chủ đề này.
Trong mã nguồn của ví dụ của tôi, bạn sẽ nhận thấy rằng tôi đã căn chỉnh và xếp chồng các phần tử bên trong
Những gì CSS Grid cũng cho phép tôi làm là đặt cả ba divVì vậy, tất cả chúng đều có chiều rộng đầy đủ trong
main > div {
grid-area: 1 / 1;
}Điều này giúp mọi thứ xếp chồng lên nhau. Thông thường, chúng tôi làm việc chăm chỉ để tránh che các phần tử với các phần tử khác trong lưới. Nhưng ví dụ này dựa vào nó. Tôi đã đưa .slit-cover ở chiều rộng 50%, tự nhiên hiển thị hình ảnh bên dưới nó. Từ đó, tôi thiết lập một transform trên đó di chuyển nó 50% theo hướng tiêu cực, thêm số lượng nhỏ tôi đã dịch chuyển bóng trước đó (25px) để đảm bảo rằng điều đó cũng được tiết lộ.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Và chúng tôi đã có nó! Một đường rạch trông khá tự nhiên bắt chước thứ gì đó ló ra từ thư mục, ví hoặc bất cứ thứ gì.
Có nhiều cách để làm điều này! Đối với một, Flexbox có thể đưa các phần tử xếp thành một hàng và căn chỉnh ở trung tâm như thế này. Có rất nhiều cách để có được mọi thứ song song với nhau. Và có thể bạn có một cách để sử dụng box-shadow bất động sản, drop-shadow() bộ lọc, hoặc thậm chí Bộ lọc SVG để có được cùng một loại hiệu ứng đổ bóng thực sự bán ảo giác.
Và bạn hoàn toàn có thể riff về điều này để có được cái nhìn và cảm nhận của riêng mình. Ví dụ: hãy thử hoán đổi vị trí của bóng và hình ảnh. Hoặc chơi với các kết hợp màu sắc và thay đổi blur() lọc giá trị. Hình dạng của bìa và bóng cũng có thể được điều chỉnh - Tôi cá là bạn có thể tạo bóng cong thay vì bóng thẳng và chia sẻ nó với chúng tôi trong phần bình luận!
