Latar Belakang Kotak-kotak CSS… Tetapi Dengan Sudut Membulatkan dan Gaya Arahkan Arah

Di satu sisi, membuat latar belakang kotak-kotak sederhana dengan CSS itu mudah. Di sisi lain, kecuali kita adalah salah satu dari CSS-gradient-ninja, kita terjebak dengan pola dasar.

Setidaknya itulah yang saya pikirkan sambil menatap latar belakang kotak-kotak di layar saya dan mencoba sedikit membulatkan sudut-sudut kotak itu…sampai saya ingat mesin terbang titik-titik favorit saya — ✦ — dan membayangkan bahwa jika saja saya dapat menempatkannya di setiap persimpangan dalam pola, saya pasti akan mendapatkan desain yang saya inginkan.

Ternyata itu mungkin! Berikut buktinya.

Mari kita mulai dengan pola dasar:

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

Apa yang memberi kita adalah latar belakang kotak yang berulang dari merah muda menjadi biru dengan 5px celah putih di antara mereka. Setiap kotak memiliki lebar lima puluh piksel dan transparan. Ini dibuat menggunakan repeating-linear-gradient, yang membuat gambar gradien linier di mana gradien berulang di seluruh area yang berisi.

Dengan kata lain, gradien pertama dalam urutan itu menciptakan garis-garis horizontal putih dan gradien kedua menciptakan garis-garis vertikal putih. Berlapis bersama, mereka membentuk pola kotak-kotak, dan gradien ketiga mengisi sisa ruang.

Sekarang kita menambahkan mesin terbang bintang yang saya sebutkan sebelumnya, di atas pola latar belakang. Kita bisa melakukannya dengan memasukkannya pada hal yang sama background properti sebagai gradien saat menggunakan SVG yang disandikan untuk bentuknya:

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

Mari kita hancurkan itu. Kata kunci pertama, repeat, menunjukkan bahwa ini adalah gambar latar yang berulang. Diikuti dengan itu adalah posisi dan ukuran setiap unit berulang, masing-masing (left -17px top -22px/55px 55px). Posisi offset ini didasarkan pada ukuran mesin terbang dan pola. Anda akan melihat di bawah bagaimana ukuran mesin terbang diberikan. Offset ditambahkan untuk memposisikan ulang mesin terbang yang berulang tepat di atas setiap persimpangan dalam pola kotak-kotak.

SVG memiliki HTML <div> membawa mesin terbang. Perhatikan bahwa saya menyatakan font-size di atasnya. Itu pada akhirnya menentukan radius perbatasan kotak dalam pola kotak-kotak — semakin besar mesin terbang, semakin bulat kotaknya. SVG yang tidak digulung dari URL data terlihat seperti ini:

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

Sekarang setelah pola CSS dibuat, mari tambahkan a :hover efek di mana mesin terbang dihapus dan garis putih dibuat sedikit tembus pandang dengan menggunakan rgb() nilai warna dengan transparansi 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;
}

Ini dia! Sekarang, kita tidak hanya memiliki sudut membulat, tetapi kita juga memiliki kontrol lebih besar atas pola untuk efek seperti ini:

Sekali lagi, seluruh latihan ini adalah upaya untuk mendapatkan kisi kotak dalam pola kotak-kotak yang mendukung sudut membulat, gradien latar belakang yang berfungsi sebagai hamparan di seluruh pola, dan gaya interaktif. Saya pikir ini menyelesaikan tugas dengan cukup baik, tetapi saya juga tertarik dengan cara Anda mendekatinya. Beri tahu saya di komentar!