Khám phá thú vị về các cách tạo lại ảo ảnh thị giác bằng CSS.
Trong bài đăng này, chúng ta sẽ cùng nhau giải trí một chút! Chắc chắn phải có 100 cách để tạo hiệu ứng ảo ảnh này và tôi chỉ chia sẻ với bạn suy nghĩ của mình, nhưng khuyến khích bạn thử phong cách của riêng mình. Dùng thử bản minh hoạ và xem mã nguồn.
Nếu bạn thích xem video, hãy xem phiên bản video của bài đăng này trên YouTube:
Tổng quan
Tên của ảo ảnh này là Ảo ảnh tường quán cà phê. Không có đường cong nào ở bất kỳ đâu, nhưng mắt chúng ta vẫn nhận thấy các đường chéo. Có thể bạn khó tin, nhưng việc xây dựng lại chắc chắn sẽ giúp bạn nhận ra ảo ảnh.
Markup (note: đây là tên ứng dụng)
HTML cho phần này là các hàng và cột đơn giản. <body>
là vùng chứa có <div class="row">
cho phần tử con. Mỗi hàng chứa 5 phần tử <div
class="square">
.
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
Kiểu
Tôi chọn lưới CSS vì lưới này có vẻ phù hợp với kiểu trình bày của các hàng, đồng thời cũng có justify-content
, đây có vẻ là một cách hay để bù trừ các hàng con.
Kiểu thân xe
Bắt đầu với kiểu thân xe, tôi đã sử dụng display: grid
và grid-auto-rows
để cung cấp bố cục hàng. calc()
mà bạn thấy cho kích thước hàng sẽ tính đến đường viền trên mỗi hàng và giúp hiệu ứng vừa với toàn bộ khung nhìn.
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
Kiểu hàng
Ở đây, tôi chọn lại lưới, nhưng thay vì tạo hàng bằng lưới, tôi đã sử dụng grid-auto-flow: column
để thay đổi hướng thành cột. Sau đó, tôi xác định kích thước cột và thêm một khoảng đệm nội tuyến nhỏ vào hàng để các hộp không chạy vào cạnh khung nhìn. Sau đó, tôi nhắm đến một số hàng nhất định và căn chỉnh nội dung thành center
hoặc end
, tạo ra độ lệch đó để tạo hiệu ứng ảo ảnh.
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 9vw;
padding-inline: 4vw;
gap: 10vw;
background: white;
}
.row:nth-child(even) {
justify-content: center;
}
.row:nth-child(3n) {
justify-content: end;
}
Kiểu vuông
Giờ đây, bạn chỉ cần thay đổi màu hình vuông và thêm đường viền:
.square {
border-inline: 4px solid gray;
background: black;
}
Kết luận
Giờ thì bạn đã biết cách tôi làm, còn bạn thì sao?! 🙂 Bồng bềnh? Hộp linh hoạt? Chuyển màu?!
Hãy đa dạng hoá các phương pháp và tìm hiểu tất cả các cách xây dựng trên web.
Hãy tạo bản minh hoạ, gửi đường liên kết cho tôi trên Twitter và tôi sẽ thêm bản minh hoạ đó vào phần phối lại của cộng đồng ở bên dưới!
Bản phối lại của cộng đồng
- Đánh dấu Boots bằng hiệu ứng chuyển màu: mã và bản minh hoạ