پس‌زمینه شطرنجی CSS... اما با گوشه‌های گرد و سبک‌های شناور

تمبر زمانی: 20 سپتامبر 2022، 9:19 صبح
تصویر

از یک طرف، ایجاد پس زمینه های شطرنجی ساده با CSS آسان است. از سوی دیگر، اگر چه، اگر یکی از نینجاهای CSS-gradient- نباشیم، به نوعی با الگوهای اولیه گیر کرده ایم.

حداقل این همان چیزی بود که وقتی به پس‌زمینه شطرنجی صفحه‌ام خیره شده بودم و سعی می‌کردم آن گوشه‌های مربع‌ها را کمی گرد کنم، فکر می‌کردم... تا زمانی که علامت گلوله مورد علاقه‌ام را به یاد آوردم - ✦ - و فهمیدم که اگر بتوانم آن را روی هر تقاطع الگو قرار دهم، مطمئناً طرحی را که می‌خواهم به دست می‌آورم.

معلوم شد ممکن است! در اینجا اثبات است.

بیایید با الگوی اصلی شروع کنیم:

<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 ایجاد شد، اجازه دهید 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;
}

ما میرویم آنجا! اکنون، نه تنها گوشه های گرد خود را داریم، بلکه کنترل بیشتری روی الگو برای افکت هایی مانند این داریم:

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

تمبر زمان:

بیشتر از ترفندهای CSS