المؤثرات البصرية

العمق والزخرفة

• يمكنك وضع طبقات متعددة من الظلال للحصول على تأثيرات عمق ناعمة وواقعية.
• استخدِم filter: drop-shadow() بدلاً من box-shadow للأشكال غير المستطيلة أو ملفات PNG الشفافة.
• استخدام 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;
}

التدرّجات وcolor-mix()

استخدِم in oklch أو in oklab لتحديد الفضاء اللوني للاستكمال بشكل صريح للتدرجات أو color-mix().

• يحافظ in oklch على صفاء اللون بشكل أفضل، ولكن يمكن أن يخرج بسهولة من نطاق الجهاز، خاصةً في حال وجود اختلافات أكبر بين الألوان
• يظلّ in oklab في النطاق بسهولة أكبر (بافتراض نقاط النهاية داخل النطاق)، ولكن يمكن أن يؤدي إلى إنشاء ألوان باهتة غير مشبّعة في المنتصف، خاصةً عند الاستكمال بين درجات الألوان المعاكسة.
• لا تستخدِم in srgb إلا إذا كان لديك سبب محدّد لذلك (على سبيل المثال، إذا كنت تنشئ علبة ألوان تحتاج إلى الاستكمال في srgb).

Fallback

لا تتيح بعض المتصفّحات التي تم إصدارها قبل عام 2024 استخدام مساحة استكمال الألوان المتدرّجة. لإتاحة هذه المتصفحات، استخدِم الرمز المميّز فقط عندما يكون استخدامه آمنًا من خلال تحديد متغيّر:

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

ملاحظة مهمة: عند استخدام التدرجات لعرض الرسوم البيانية، تأكَّد من توفّر نص بديل لبرامج قراءة الشاشة. إلزامي: يجب تقديم جدول بيانات دلالي كبديل يسهل الوصول إليه، كما هو موضّح بالتفصيل في إرشادات ترميز تسهيل الاستخدام ضمن إرشادات النص والوسائط البديلة.