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

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ạ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ì nó có vẻ phù hợp với kiểu trình bày của các hàng và nó cũng có justify-content, có vẻ là một cách tốt để bù trừ phần tử con của hàng.

Kiểu thân xe

Bắt đầu với kiểu thân xe, tôi đã sử dụng display: gridgrid-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 cùng dòng 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 giác.

.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

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