Tło szachownicy CSS… Ale z zaokrąglonymi narożnikami i stylami najechania kursorem

Z jednej strony tworzenie prostych teł w kratkę za pomocą CSS jest łatwe. Z drugiej strony, o ile nie jesteśmy jednym z ninja gradientów CSS, utknęliśmy w podstawowych wzorcach.

Przynajmniej tak myślałem, patrząc na tło w kratkę na ekranie i próbując zaokrąglić nieco te rogi kwadratów… dopóki nie przypomniałem sobie mojego ulubionego glifu punktora — ✦ — i doszedłem do wniosku, że gdybym tylko mógł umieścić go na każdym przecięciu wzoru, na pewno dostanę projekt, którego chcę.

Okazuje się, że to możliwe! Oto dowód.

Zacznijmy od podstawowego wzoru:

<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 */
}

To, co nam daje, to powtarzające się tło kwadratów, które przechodzą od różowego do niebieskiego z 5px białe przerwy między nimi. Każdy kwadrat ma pięćdziesiąt pikseli szerokości i jest przezroczysty. To jest tworzone za pomocą repeating-linear-gradient, który tworzy liniowy obraz gradientu, w którym gradient powtarza się w całym obszarze zawierającym.

Innymi słowy, pierwszy gradient w tej sekwencji tworzy białe poziome paski, a drugi gradient tworzy białe pionowe paski. Ułożone razem tworzą szachownicę, a trzeci gradient wypełnia resztę przestrzeni.

Teraz dodamy wspomniany wcześniej glif gwiazdy na wzór tła. Możemy to zrobić, umieszczając go na tym samym background właściwość jako gradienty podczas używania zakodowanego pliku SVG dla kształtu:

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 */
}

Rozłóżmy to. Pierwsze słowo kluczowe, repeat, oznacza, że ​​jest to powtarzający się obraz tła. Następnie następuje odpowiednio pozycja i rozmiar każdej powtarzającej się jednostki (left -17px top -22px/55px 55px). Ta pozycja przesunięcia jest oparta na rozmiarze glifu i wzoru. Zobaczysz poniżej, jak podawany jest rozmiar glifu. Przesunięcie jest dodawane w celu zmiany położenia powtarzającego się glifu dokładnie nad każdym przecięciem we wzorze szachownicy.

SVG ma HTML <div> niosąc glif. Zauważ, że zadeklarowałem a font-size na tym. To ostatecznie określa promień obramowania kwadratów we wzorze szachownicy — im większy glif, tym bardziej zaokrąglone kwadraty. Rozwinięty plik SVG z adresu URL danych wygląda tak:

<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>

Teraz, gdy ustanowiono wzorzec CSS, dodajmy a :hover efekt, w którym glif jest usuwany, a białe linie są lekko półprzezroczyste za pomocą rgb() wartości kolorów z przezroczystością alfa.

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;
}

No to jedziemy! Teraz nie tylko mamy nasze zaokrąglone rogi, ale także mamy większą kontrolę nad wzorem dla efektów takich jak ten:

Ponownie, całe to ćwiczenie było próbą uzyskania siatki kwadratów we wzorze szachownicy, który obsługuje zaokrąglone rogi, gradientu tła, który służy jako nakładka na wzór, oraz interaktywnych stylów. Myślę, że to całkiem dobrze spełnia zadanie, ale interesuje mnie również, jak mogłeś do tego podejść. Dajcie znać w komentarzach!