सीएसएस चेकरबोर्ड पृष्ठभूमि... लेकिन गोल कोनों और होवर शैलियों के साथ

एक ओर, सीएसएस के साथ सरल चेकर्ड पृष्ठभूमि बनाना आसान है। दूसरी ओर, हालांकि, जब तक कि हम CSS-ग्रेडिएंट-निंजा में से एक नहीं हैं, हम बुनियादी पैटर्न के साथ फंस गए हैं।

कम से कम मैंने स्क्रीन पर चेकर बैकग्राउंड को घूरते हुए और चौकों के उन कोनों को थोड़ा सा गोल करने की कोशिश करते हुए तो यही सोचा था ... जब तक मुझे अपना पसंदीदा बुलेट पॉइंट ग्लिफ़ याद नहीं आया - ✦ - और लगा कि अगर मैं इसे पैटर्न में हर चौराहे पर रख सकता हूं, तो मुझे निश्चित रूप से वह डिज़ाइन मिलेगा जो मुझे चाहिए।

पता चला यह संभव है! यहाँ सबूत है।

आइए मूल पैटर्न से शुरू करें:

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

हम वहाँ चलें! अब, हमारे पास न केवल हमारे गोल कोने हैं, बल्कि इस तरह के प्रभावों के लिए पैटर्न पर हमारा अधिक नियंत्रण नियंत्रण भी है:

फिर से, यह पूरा अभ्यास गोल कोनों का समर्थन करने वाले बिसात पैटर्न में वर्गों का एक ग्रिड प्राप्त करने का एक प्रयास था, एक पृष्ठभूमि ढाल जो पूरे पैटर्न में एक ओवरले के रूप में कार्य करता है, और इंटरैक्टिव शैली। मुझे लगता है कि यह कार्य को काफी अच्छी तरह से पूरा करता है, लेकिन मुझे इस बात में भी दिलचस्पी है कि आप इसे कैसे प्राप्त कर सकते हैं। टिप्पणियों में क्या है मुझे जानने दें!