Nền CSS Checkerboard… Nhưng Với Góc tròn và Kiểu Di chuột

Một mặt, việc tạo hình nền ca rô đơn giản với CSS rất dễ dàng. Mặt khác, mặc dù vậy, trừ khi chúng ta là một trong những ninja CSS-gradient, chúng ta sẽ gặp khó khăn với các mẫu cơ bản.

Ít nhất thì đó là những gì tôi đã nghĩ khi nhìn chằm chằm vào nền ca rô trên màn hình của mình và cố gắng làm tròn các góc của các ô vuông đó một chút… cho đến khi tôi nhớ ra ký hiệu dấu đầu dòng yêu thích của mình - ✦ - và nhận ra rằng chỉ cần tôi có thể đặt nó trên mọi giao điểm trong khuôn mẫu, tôi chắc chắn sẽ có được thiết kế mà tôi muốn.

Hóa ra nó có thể! Đây là bằng chứng.

Hãy bắt đầu với mẫu cơ bản:

<div></div>

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

Những gì mang lại cho chúng ta là một nền lặp lại của các hình vuông chuyển từ màu hồng sang màu xanh lam với 5px khoảng cách trắng giữa chúng. Mỗi hình vuông rộng XNUMX pixel và trong suốt. Điều này được tạo bằng cách sử dụng repeating-linear-gradient, tạo ra một hình ảnh gradient tuyến tính trong đó gradient lặp lại khắp vùng chứa.

Nói cách khác, gradient đầu tiên trong chuỗi đó tạo ra các sọc ngang màu trắng và gradient thứ hai tạo ra các sọc dọc màu trắng. Xếp lớp với nhau, chúng tạo thành mô hình ca rô và gradient thứ ba lấp đầy phần còn lại của không gian.

Bây giờ chúng ta thêm glyph ngôi sao mà tôi đã đề cập trước đó, trên đầu mẫu nền. Chúng tôi có thể làm điều đó bằng cách đưa nó vào cùng background thuộc tính dưới dạng gradient trong khi sử dụng SVG được mã hóa cho hình dạng:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

Hãy phá vỡ điều đó. Từ khóa đầu tiên, repeat, biểu thị rằng đây là hình nền lặp lại. Theo sau đó là vị trí và kích thước của từng đơn vị lặp lại tương ứng (left -17px top -22px/55px 55px). Vị trí bù đắp này dựa trên kích thước của glyph và mẫu. Bạn sẽ thấy bên dưới kích thước glyph được cung cấp như thế nào. Phần bù được thêm vào để định vị lại chính xác vị trí của glyph lặp lại trên mỗi giao điểm trong mẫu hình ca rô.

SVG có HTML <div> mang glyph. Lưu ý rằng tôi đã khai báo một font-size trên đó. Điều đó cuối cùng xác định bán kính đường viền của các hình vuông trong mô hình bàn cờ - glyph càng lớn, các hình vuông càng tròn. SVG chưa được cuộn từ URL dữ liệu trông giống như sau:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

Bây giờ một mẫu CSS đã được thiết lập, hãy thêm một :hover hiệu ứng trong đó glyph bị loại bỏ và các đường trắng được làm hơi mờ bằng cách sử dụng rgb() giá trị màu với độ trong suốt alpha.

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

Chúng ta bắt đầu! Giờ đây, chúng ta không chỉ có các góc tròn mà còn có nhiều quyền kiểm soát hơn đối với mẫu cho các hiệu ứng như thế này:

Một lần nữa, toàn bộ bài tập này là một nỗ lực để có được một lưới các ô vuông trong một mẫu bàn cờ hỗ trợ các góc tròn, một gradient nền đóng vai trò như một lớp phủ trên mẫu và các kiểu tương tác. Tôi nghĩ điều này hoàn thành nhiệm vụ khá tốt, nhưng tôi cũng quan tâm đến cách bạn có thể đã tiếp cận nó. Hãy cho tôi biết ở phần bình luận!