พื้นหลังกระดานหมากรุก CSS… แต่มีมุมโค้งมนและสไตล์โฮเวอร์

ในแง่หนึ่ง การสร้างพื้นหลังตาหมากรุกอย่างง่ายด้วย CSS นั้นเป็นเรื่องง่าย ในทางกลับกัน แม้ว่าเราจะเป็นหนึ่งใน CSS-gradient-ninjas เราก็ติดอยู่กับรูปแบบพื้นฐาน

อย่างน้อยนั่นคือสิ่งที่ฉันคิดขณะจ้องไปที่พื้นหลังตาหมากรุกบนหน้าจอและพยายามปัดเศษมุมสี่เหลี่ยมเหล่านั้นเพียงเล็กน้อย…จนกระทั่งฉันจำสัญลักษณ์สัญลักษณ์แสดงหัวข้อย่อยที่ฉันชอบได้ — ✦ — และคิดว่าถ้าฉันวางมันทับทุกสี่แยกของลวดลายได้ ฉันจะได้แบบที่ต้องการอย่างแน่นอน

ปรากฎว่าเป็นไปได้! นี่คือหลักฐาน

เริ่มจากรูปแบบพื้นฐานกันก่อน:

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

เราจะไปที่นั่น! ตอนนี้ ไม่เพียงแต่เราจะมีมุมที่โค้งมนเท่านั้น แต่เรายังสามารถควบคุมรูปแบบเอฟเฟกต์เช่นนี้ได้มากขึ้น:

อีกครั้ง แบบฝึกหัดทั้งหมดนี้เป็นความพยายามเพื่อให้ได้ตารางของสี่เหลี่ยมจัตุรัสในรูปแบบกระดานหมากรุกที่รองรับมุมโค้งมน การไล่ระดับสีพื้นหลังที่ทำหน้าที่เป็นการซ้อนทับข้ามรูปแบบ และสไตล์แบบโต้ตอบ ฉันคิดว่าสิ่งนี้ทำสำเร็จได้ค่อนข้างดี แต่ฉันก็ยังสนใจว่าคุณจะเข้าหามันได้อย่างไร แจ้งให้เราทราบในความคิดเห็น!