Bir yandan, CSS ile basit kareli arka planlar oluşturmak kolaydır. Öte yandan, CSS-gradyan-ninjalarından biri olmadığımız sürece, temel kalıplara takılıp kalırız.

En azından ekranımdaki damalı arka plana bakarken ve karelerin köşelerini biraz yuvarlamaya çalışırken böyle düşündüm… ta ki en sevdiğim kurşun nokta işaretini hatırlayana kadar — ✦ - ve eğer onu desendeki her kesişme noktasına yerleştirebilirsem, kesinlikle istediğim tasarımı elde edeceğimi düşündüm.

Mümkün olduğu ortaya çıktı! İşte kanıt.

Temel modelle başlayalım:

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

Bu bize pembeden maviye giden karelerin tekrar eden bir arka planını veriyor. 5px aralarında beyaz boşluklar. Her kare elli piksel genişliğinde ve şeffaftır. Bu kullanılarak oluşturulur repeating-linear-gradient, degradenin içerdiği alan boyunca tekrarlandığı doğrusal bir degrade görüntüsü oluşturur.

Başka bir deyişle, bu dizideki ilk gradyan beyaz yatay çizgiler oluşturur ve ikinci gradyan beyaz dikey şeritler oluşturur. Birlikte katmanlar halinde damalı deseni oluştururlar ve üçüncü gradyan boşluğun geri kalanını doldurur.

Şimdi arka plan deseninin üstüne daha önce bahsettiğim yıldız glifi ekliyoruz. Bunu aynı yere dahil ederek yapabiliriz background özellik, şekil için kodlanmış bir SVG kullanırken degradeler olarak:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    
      
        
✦
      
    "
    ), 
    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 */
}

Bunu parçalayalım. İlk anahtar kelime, repeat, bunun tekrar eden bir arka plan görüntüsü olduğunu belirtir. Bunu sırasıyla her yinelenen birimin konumu ve boyutu izler (left -17px top -22px/55px 55px). Bu ofset konumu, glifi ve desenin boyutunu temel alır. Aşağıda glif boyutunun nasıl verildiğini göreceksiniz. Ofset, yinelenen glifi damalı desendeki her kesişim üzerinde tam olarak yeniden konumlandırmak için eklenir.

SVG'nin bir HTML'si var

glifi taşıyor. Bir ilan ettiğime dikkat edin font-size üstünde. Bu sonuçta dama tahtası desenindeki karelerin kenarlık yarıçapını belirler - glif ne kadar büyükse kareler o kadar yuvarlak olur. Veri URL'sinden kaldırılan SVG şöyle görünür:

  
    
✦
  

Artık bir CSS kalıbı oluşturulduğuna göre, bir :hover kullanılarak glifin kaldırıldığı ve beyaz çizgilerin hafifçe yarı saydam hale getirildiği efekt rgb() alfa şeffaflığı ile renk değerleri.

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

Oraya gidiyoruz! Şimdi, yalnızca köşelerimizi yuvarlamakla kalmıyoruz, aynı zamanda bunun gibi efektler için kalıp üzerinde daha fazla kontrole sahibiz:

Yine, bu alıştırmanın tamamı yuvarlatılmış köşeleri destekleyen bir dama tahtası deseninde bir kareler ızgarası, desen boyunca bir kaplama görevi gören bir arka plan gradyanı ve etkileşimli stiller elde etme girişimiydi. Bunun görevi oldukça iyi başardığını düşünüyorum, ancak buna nasıl yaklaşmış olabileceğinizle de ilgileniyorum. Yorumlarda bana bildirin!