جلوه‌های دیداری

عمق و بافت

• برای ایجاد جلوه‌های عمق نرم واقع‌گرایانه، چند سایه را لایه‌بندی کنید.
• برای شکل‌های غیرمستطیلی یا PNGهای شفاف، به‌جای box-shadow از filter: drop-shadow() استفاده کنید.
• از mix-blend-mode و background-blend-mode برای هم‌پوشانی‌های نورپردازی استفاده کنید (محدوده را با isolation: isolate محدود کنید)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Gradients و color-mix()

از in oklch یا in oklab برای مشخص کردن صریح فضای رنگی درون‌یابی برای گرادیان‌ها یا color-mix() استفاده کنید.

• in oklch فام را بهتر حفظ می‌کند، اما به‌راحتی می‌تواند از گاموت دستگاه خارج شود، به‌ویژه برای تفاوت‌های بزرگ‌تر بین رنگ‌ها
• in oklab راحت‌تر در گاموت باقی می‌ماند (با فرض نقاط پایانی درون گاموت) اما می‌تواند رنگ‌های اشباع‌نشده و رنگ‌باخته در وسط ایجاد کند، به‌ویژه هنگام درون‌یابی بین فام‌های مخالف.
• از in srgb استفاده نکنید مگراینکه دلیل خاصی برای این کار داشته باشید (مثلاً درحال ساختن انتخابگر رنگی هستید که باید در srgb درون‌یابی کند).

بازگشت

برخی‌از مرورگرهای قبل‌از ۲۰۲۴ از فضای درون‌یابی رنگ گرادیان پشتیبانی نمی‌کنند. برای پشتیبانی از این مرورگرها، با تعریف متغیر، فقط زمانی از این کد استفاده کنید که استفاده از آن ایمن باشد:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

سپس از آن به‌صورت زیر استفاده کنید:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• مهم: اگر از این تکنیک استفاده می‌کنید، مطمئن شوید که همیشه یک مقدمه گرادیان غیرخالی بدون آن وجود داشته باشد، درغیراین‌صورت در مرورگرهای قدیمی‌تر خطای نحوی خواهد بود.
• برای color-mix() به این مورد نیاز ندارید. اگر مرورگری از color-mix() پشتیبانی کند، از آرگومان in <color-space> آن نیز پشتیبانی می‌کند.

الگوها

الگوهای زیادی را می‌توان ازطریق گرادیان‌های CSS + توقف‌های سخت ایجاد کرد، و این الگوها می‌توانند انعطاف‌پذیرتر و کارآمدتر از SVG یا تصاویر خارجی باشند زیرا می‌توانند به متغیرها و طول‌های CSS از بافت اطراف دسترسی داشته باشند. نیازی نیست موقعیت را دو بار تکرار کنید — فقط از 0 یا 0% استفاده کنید و اصلاح گرادیان آن را به‌طور خودکار تنظیم خواهد کرد.

مثال‌ها در زیر آمده است.

نوارهای عمودی هرکدام با عرض 1em:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

نوارهای مورب با عرض 1em برای هرکدام:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

الگوی شطرنجی با 1em مربع:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

خال‌خالی با نقطه‌هایی به شعاع .5em با فاصله 2em از یکدیگر (افقی/عمودی — برای فاصله مورب در sqrt(2) ضرب کنید):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

نمودار دایره‌ای ساده:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

مهم: هنگام استفاده از گرادیان برای ارائه نمودارها، مطمئن شوید که یک جایگزین متنی برای صفحه‌خوان‌ها وجود دارد. الزامی: باید یک جدول داده‌های معنایی به‌عنوان جایگزین دسترس‌پذیر ارائه دهید، همان‌طور که در رهنمودهای کدنویسی دسترس‌پذیری تحت رهنمودهای رسانه و نوشتار جایگزین به‌طور مفصل توضیح داده شده است.