Φόντο σκακιέρας CSS… Αλλά με στρογγυλεμένες γωνίες και στυλ αιώρησης

Από τη μία πλευρά, η δημιουργία απλών καρό φόντων με CSS είναι εύκολη. Από την άλλη πλευρά, όμως, αν δεν είμαστε ένας από τους CSS-gradient-ninja, είμαστε κάπως κολλημένοι με τα βασικά μοτίβα.

Τουλάχιστον αυτό σκέφτηκα κοιτώντας το καρό φόντο στην οθόνη μου και προσπαθούσα να στρογγυλοποιήσω αυτές τις γωνίες των τετραγώνων λίγο...μέχρι που θυμήθηκα το αγαπημένο μου γλυφό με κουκκίδες — ✦ — και κατάλαβα ότι αν μπορούσα να το τοποθετήσω πάνω από κάθε διασταύρωση του μοτίβου, σίγουρα θα έχω το σχέδιο που θέλω.

Αποδεικνύεται ότι είναι δυνατό! Εδώ είναι η απόδειξη.

Ας ξεκινήσουμε με το βασικό μοτίβο:

<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> κουβαλώντας τη γλυφή. Παρατηρήστε ότι δήλωσα α 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, ας προσθέσουμε ένα :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;
}

Ορίστε! Τώρα, όχι μόνο έχουμε τις στρογγυλεμένες γωνίες μας, αλλά έχουμε επίσης περισσότερο έλεγχο στο μοτίβο για εφέ όπως αυτό:

Και πάλι, όλη αυτή η άσκηση ήταν μια προσπάθεια να δημιουργηθεί ένα πλέγμα τετραγώνων σε ένα μοτίβο σκακιέρας που υποστηρίζει στρογγυλεμένες γωνίες, μια κλίση φόντου που χρησιμεύει ως επικάλυψη σε όλο το μοτίβο και διαδραστικά στυλ. Νομίζω ότι αυτό ολοκληρώνει το έργο αρκετά καλά, αλλά με ενδιαφέρει επίσης πώς μπορεί να το προσεγγίσατε. Επιτρέψτε μου να μάθω στα σχόλια!