Tạo ảo ảnh lưới cong

Một khám phá thú vị về các cách tạo lại ảo ảnh quang học bằng CSS.

Adam Argyle

Trong bài đăng này, chúng ta sẽ giải trí một chút! Chắc chắn có 100 cách để tạo ra ảo ảnh quang học 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. Hãy dùng thử bản minh hoạ và xem nguồn.

Nếu bạn thích xem video, thì đây là phiên bản video của bài đăng này trên YouTube:

Tổng quan

Ảo ảnh này có tên là Ảo ảnh tường quán cà phê. Không có đường thẳng nào bị bẻ cong, nhưng mắt chúng ta lại cảm nhận được độ nghiêng. Có thể bạn sẽ khó tin, nhưng việc xây dựng lại sẽ chắc chắn giúp bạn nhận ra ảo ảnh này.

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 trẻ em. 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ì thấy phù hợp với kiểu trình bày theo hàng, đồng thời lưới này cũng có justify-content. Đây có vẻ là một cách hay để bù đắp cho các phần tử con của hàng.

Kiểu thân xe

Bắt đầu với kiểu nội dung, 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 hiển thị.

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 các hàng bằng lưới, tôi đã sử dụng grid-auto-flow: column để thay đổi hướng thành các cột. Sau đó, tôi xác định kích thước cột và thêm một chút khoảng đệm nội tuyến vào hàng để các hộp không chạy vào cạnh của khung hiển thị. Sau đó, tôi nhắm đến một số hàng nhất định và căn chỉnh nội dung sang center hoặc end, tạo ra độ lệch giúp tăng thêm cảm giác ảo.

.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 của các ô vuông và thêm đường viền:

.square {
  border-inline: 4px solid gray;
  background: black;
}

Kết luận

Giờ bạn đã biết cách tôi làm, vậy bạn sẽ làm như thế nào?! 🙂 Nổi? Flexbox? 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 một bản minh hoạ, gửi đường liên kết cho tôi qua Twitter và tôi sẽ thêm bản minh hoạ đó vào phần bả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