خلفية CSS Checkerboard ... ولكن مع الزوايا الدائرية وأنماط التحويم

من ناحية ، يعد إنشاء خلفيات بسيطة متقلب باستخدام 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> تحمل الصورة الرمزية. لاحظ أنني أعلنت عن ملف 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;
}

هناك نذهب! الآن ، ليس لدينا فقط زوايانا المستديرة ، ولكن لدينا أيضًا المزيد من التحكم في النمط لتأثيرات مثل هذا:

مرة أخرى ، كان هذا التمرين بأكمله محاولة للحصول على شبكة من المربعات في نمط رقعة الشطرنج التي تدعم الزوايا الدائرية ، وتدرج الخلفية الذي يعمل بمثابة تراكب عبر النمط ، والأنماط التفاعلية. أعتقد أن هذا ينجز المهمة جيدًا ، لكنني مهتم أيضًا بكيفية التعامل معها. اسمحوا لي أن نعرف في التعليقات!