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

Khám phá thú vị về cách tạo lại ảo ảnh thị giác bằng CSS.

Adam Argyle

Trong bài đăng này, chúng ta sẽ có một chút thú vị! Có 100 cách để đạt được ảo ảnh quang học này, và tôi sẽ chỉ chia sẻ với bạn suy nghĩ của tôi, nhưng hãy khuyến khích bạn thử kiểu của mình. Thử bản minh hoạ và xem nguồn.

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

Tổng quan

Tên của ảo ảnh này là Ảo ảnh quán cà phê tường. Không có đường cong cong ở bất cứ đâu, nhưng mắt chúng ta nhận biết đường chéo. Nghe có vẻ khó tin, nhưng việc xây dựng lại chắc chắn sẽ giúp bạn nhìn thấy những ảo tưởng đó.

Markup (note: đây là tên ứng dụng)

HTML cho trường này là các hàng và cột đơn giản. <body> là vùng chứa có <div class="row"> dành cho thành phần 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 CSS có vẻ phù hợp với kiểu trình bày của các hàng và cũng có tính năng justify-content. Đây có vẻ là một cách hiệu quả để bù trừ cho các phần tử con của hàng.

Kiểu thân xe

Bắt đầu với các 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() 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 khung nhìn đầy đủ.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

Kiểu hàng

Ở đây, tôi lại chọn 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ác cột. Sau đó, tôi xác định kích thước cột và thêm một khoảng đệm cùng dòng 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 độ bù trừ để tạo ả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 hình vuông

Bây giờ, bạn chỉ cần thay đổi màu của các hình 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 tôi làm việc đó như thế nào, bạn sẽ làm thế nào?! 🙂 Nổi? Hộp linh hoạt? Chuyển màu?!

Hãy đa dạng hoá phương pháp tiếp cận của chúng ta 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ạ, đường liên kết tweet me và tôi sẽ thêm bản phối lại đó 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