Hướng Dẫn Vẽ Hình Xoắn Ốc Theo Tỷ Lệ Vàng Trong CSS

Bài viết này sẽ hướng dẫn bạn cách tạo ra hình xoắn ốc dựa trên tỷ lệ vàng bằng CSS, một khái niệm thú vị trong toán học và thiết kế. Tỷ lệ vàng, hay còn gọi là số vàng, là một tỷ lệ đặc biệt giữa hai con số, có giá trị khoảng 1,618. Tỷ lệ này thường được tìm thấy trong tự nhiên, nghệ thuật và kiến trúc, mang lại vẻ đẹp hài hòa và cân đối cho các tác phẩm.

Khái Niệm Tỷ Lệ Vàng Và Dãy Số Fibonacci

Tỷ lệ vàng có sự liên kết mật thiết với dãy số Fibonacci, nơi mỗi số là tổng của hai số trước đó. Dãy số này bắt đầu với các số sau: 0, 1, 1, 2, 3, 5, 8, 13, 21, v.v. Khi tiến xa trong dãy, tỷ lệ giữa mỗi số và số trước nó dần dần tiệm cận giá trị 1,618. Để bắt đầu, chúng ta sẽ sử dụng phần sau của dãy số Fibonacci:

1, 1, 2, 3, 5, 8, 13, 21

Tạo Layout Bằng CSS Grid

Chúng ta sẽ tạo một layout CSS với 8 phần tử danh sách <li>. Sử dụng CSS Grid, chúng ta sẽ định nghĩa kích thước cho canvas bao gồm chiều rộng là tổng của hai số cuối cùng (13 + 21 = 34) và chiều cao là số lớn nhất (21):

ol {
  all: unset;
  display: grid;
  grid-template-columns: repeat(34, 1fr);
  grid-template-rows: repeat(21, 1fr);
  list-style: none;
}

Thêm Kiểu Dáng Cho Các Phần Tử

Tiếp theo, chúng ta sẽ thêm kiểu dáng cho các phần tử <li>:

li {
  aspect-ratio: 1 / 1;
  background: var(--bg);
  grid-area: var(--ga);
}

Sau đó, hãy định nghĩa biến --bg (màu nền) và --ga (khu vực lưới) cho từng phần tử:

&:nth-of-type(1) {
  --bg: #e47a2c;
  --ga: 1 / 1 / 22 / 22;
}
&:nth-of-type(2) {
  --bg: #baccc0;
  --ga: 1 / 22 / 23 / 35;
}
&:nth-of-type(3) {
  --bg: #6c958f;
  --ga: 14 / 27 / 22 / 35;
}
// và tiếp tục cho các phần tử còn lại...

Tạo Hiệu Ứng Xoắn Ốc

Để tạo hiệu ứng hình xoắn ốc, chúng ta sẽ thêm một vòng tròn vào mỗi phần tử <li> như một phần tử giả ::after:

li {
  /* như trước đó */
  overflow: hidden;
  position: relative;
  &::after {
    aspect-ratio: 1 / 1;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50%;
    content: '';
    display: block;
    inset: 0;
    position: absolute;
  }
}

Chúng ta cũng có thể nhân đôi kích thước của các vòng tròn và dịch chuyển chúng để đạt được hình dạng mong muốn:

&::after {
  /* như trước đó */
  scale: 2;
  translate: var(--tl);
}

Cuối cùng, hãy cập nhật biến --tl cho mỗi phần tử để tạo ra mô hình xoắn ốc:

&:nth-of-type(1) {
  --tl: 50% 50%;
}
&:nth-of-type(2) {
  --tl: -50% 50%;
}
// và tiếp tục cho các phần tử còn lại...

Kết Luận

Bằng cách này, chúng ta có thể sử dụng CSS để tạo ra hình xoắn ốc theo tỷ lệ vàng, mang lại vẻ đẹp và sự thu hút cho thiết kế của bạn. Bạn có thể thử nghiệm với các màu sắc và kích thước khác nhau để tạo ra tác phẩm riêng của mình. Hãy cùng nhau khám phá sự kết hợp tuyệt vời giữa toán học và nghệ thuật qua CSS!

Tìm hiểu thêm về cách ứng dụng tỷ lệ vàng trong thiết kế và phát triển web trên CodePen để thấy những kết quả hoàn thiện.

source: viblo