Фон шахової дошки CSS… Але із закругленими кутами та стилями наведення

З одного боку, створити простий картатий фон за допомогою CSS легко. З іншого боку, однак, якщо ми не один із ніндзя CSS-gradient, ми начебто застрягли в базових шаблонах.

Принаймні так я думав, дивлячись на картатий фон на моєму екрані та намагаючись трішки округлити ті кути квадратів… доки я не згадав свій улюблений гліф із маркером — ✦ — і вирішив, що якби я міг розмістити його над кожним перехрестям візерунка, я точно отримаю дизайн, який хочу.

Виявляється, це можливо! Ось доказ.

Почнемо з основного візерунка:

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

Це дає нам повторюваний фон квадратів, які переходять від рожевого до блакитного 5px білі проміжки між ними. Кожен квадрат має п’ятдесят пікселів у ширину та прозорий. Це створюється за допомогою repeating-linear-gradient, що створює зображення лінійного градієнта, де градієнт повторюється по всій області вмісту.

Іншими словами, перший градієнт у цій послідовності створює білі горизонтальні смуги, а другий градієнт створює білі вертикальні смуги. Поєднані разом, вони утворюють картатий візерунок, а третій градієнт заповнює решту простору.

Тепер ми додаємо зірковий гліф, про який я згадував раніше, поверх фонового візерунка. Ми можемо зробити це, включивши його до того самого background властивості як градієнти під час використання закодованого SVG для форми:

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

Давайте розберемо це. Перше ключове слово, repeat, означає, що це повторюване фонове зображення. Далі йде положення та розмір кожного повторюваного блоку відповідно (left -17px top -22px/55px 55px). Ця позиція зсуву залежить від розміру гліфа та візерунка. Нижче ви побачите, як задається розмір гліфа. Зсув додається, щоб повторно розташувати повторюваний гліф точно над кожним перетином у картатому візерунку.

SVG має HTML <div> несучи гліф. Зауважте, що я оголосив a font-size на ньому. Це остаточно визначає радіус межі квадратів у шаховому порядку — що більший гліф, то округліші квадрати. Розгорнутий SVG з URL-адреси даних виглядає так:

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

Тепер, коли шаблон CSS створено, давайте додамо a :hover ефект, коли гліф видаляється, а білі лінії стають злегка напівпрозорими за допомогою rgb() колірні значення з альфа-прозорістю.

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

Там ми йдемо! Тепер ми не тільки маємо закруглені кути, але й маємо більше контролю над візерунком для таких ефектів:

Знову ж таки, уся ця вправа була спробою отримати сітку квадратів у шаховому порядку, яка підтримує заокруглені кути, фоновий градієнт, який служить накладенням на візерунок, та інтерактивні стилі. Я думаю, що це досить добре вирішує завдання, але мені також цікаво, як ви могли б підійти до цього. Дайте мені знати в коментарях!