‏دات‌های مربعی با CSS خالص

ساخت پس‌زمینه نقطه‌نقطه مربعی در CSS یه تکنیک جالبه که نیازی به تصویر یا SVG خارجی نداره. ایده اصلی اینه که به‌جای رسم همه نقطه‌ها، فقط یه ناحیه کوچیک طراحی می‌کنی و با background-repeat: repeat اون رو تکرار می‌دی. برای تعریف این ناحیه، از background-size استفاده می‌شه.

روش اول: سه لایه linear-gradient

یه راه اینه که با دو گرادیان خطی، اطراف رو بپوشونی و رنگ پس‌زمینه از وسط نمایان بشه — یه جور ماسک سه‌لایه:

html {
  background: 
    linear-gradient(to bottom, transparent 10px, white 10px),
    linear-gradient(to right, transparent 10px, white 10px),
    black;
  background-size: 100px 100px;
  background-repeat: repeat;
}

این روش کار می‌کنه ولی یه مشکل بزرگ داره: برای پوشاندن اطراف نقطه نیاز به رنگ solid داری، پس دیگه نمی‌شه چیزی (مثل تصویر یا گرادیان) پشتش گذاشت. اصطلاحاً شفافیت واقعی نداره.

روش بهتر: conic-gradient

Eric Meyer ایده هوشمندانه‌تری پیشنهاد داد. با conic-gradient (گرادیان مخروطی) می‌شه توی یه تعریف هم نقطه رو رسم کرد هم بقیه ناحیه رو کاملاً شفاف گذاشت. ترفند اینجا hard stop هاست — یعنی رنگ‌ها بدون فید ناگهانی عوض می‌شن تا به‌جای گرادیان واقعی، باندهای رنگ توپر بسازن:

html {
  background-image: 
    conic-gradient(
      from 0deg at 5px 5px, 
      transparent 75%, black 75% 100%
    );
  background-size: 100px 100px;
  background-repeat: repeat;
}

مرکز گرادیان روی نقطه 5px 5px تنظیم می‌شه، سه‌چهارم دایره شفافه و فقط ربع آخر رنگ نقطه رو نشون می‌ده. نتیجه یه نقطه مربعی با پس‌زمینه کاملاً شفافه که روی هر چیزی می‌شه گذاشتش.

نکات کلیدی:

• برای تکرار الگو از background-size و background-repeat: repeat استفاده می‌شه
• روش linear-gradient شفافیت واقعی نداره و نیاز به رنگ پس‌زمینه solid داره
• روش conic-gradient شفافیت واقعی داره و می‌شه هر چیزی پشتش گذاشت
• hard stop در گرادیان‌ها یعنی تغییر رنگ بدون fade — ایده‌آل برای ساخت شکل‌های هندسی
• اندازه و فاصله نقطه‌ها با تغییر مقادیر background-size و موقعیت مرکز گرادیان کنترل می‌شه