مولدات CSS: الظلال ونصف القطر والمرشحات وتأثيرات الزجاج دون تخمين

قضيت حوالي أربعين دقيقة ذات مرة أحاول مطابقة ظل من ملف فيجما. لقد أعطاني المصمم لونًا وإزاحة X وY وطمسًا وانتشارًا، وهو كل ما تحتاجه، وما زلت لا أستطيع جعله يبدو صحيحًا. كان الظل في المتصفح أثقل وأكثر انبساطًا من النموذج بالحجم الطبيعي، وواصلت دفع نصف قطر التمويه لأعلى ولأسفل كما يؤدي ذلك إلى إصلاحه.

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

هذا هو الشيء المتعلق بخصائص CSS في هذا الدليل. لا شيء منهم معقد. جميعهم لديهم سلوك واحد أو سلوكين غير واضحين من بناء الجملة، ويمكنك أن تخسر فترة ما بعد الظهر أمام أي منهم. هذا الدليل هو تلك السلوكيات المكتوبة.

يعمل كل مولد مرتبط هنا في متصفحك، ويقوم بتحديث المعاينة المباشرة أثناء السحب، ويسلمك CSS. أقوم بإنشائها على [Toolz.dev](/وأستخدمها باستمرار، ويرجع ذلك في الغالب إلى أن قراءة اختصار رباعي القيم أصعب من النظر إلى مستطيل.

ليرة تركية؛DR: يستخدم صندوق الظل للعمق، ظل النص للتوهج والخطوط العريضة، نصف قطر الحدود للزوايا بما في ذلك الزوايا البيضاوية، مرشحات CSS للحصول على تأثيرات التمويه والسطوع واللون، التشكل الزجاجي للألواح المتجمدة، نيومورفيسم للأسطح المرتفعة الناعمة، التدرجات للخلفيات، و محول وحدة CSS عندما تحتاج إلى px في العينية. كل منهم يعمل من جانب العميل مع معاينة مباشرة. القاعدتان اللتان تستحقان الحمل: الظلال الحقيقية متعددة الطبقات، و backdrop-filter يحتاج إلى شيء وراءه لطمس.

---

ما هو المولد الذي أحتاجه؟

تريد	ملكية	أداة
بطاقة ترفع من الصفحة	box-shadow	صندوق الظل
نص متوهج أو محدد أو منقوش	text-shadow	ظل النص
زوايا مستديرة أو على شكل حبة	border-radius	نصف قطر الحدود
طمس عنصر ما أو تعتيمه أو عدم تشبعه أو صبغه	filter	مرشح CSS
لوحة بلورية فوق الصورة	backdrop-filter	التشكل الزجاجي
زر ناعم يبدو مضغوطًا على السطح	طبقات box-shadow	نيومورفيسم
خلفية انتقال اللون	linear-gradient	التدرج
لتحويل 24px إلى rem	لا أحد	محول الوحدة

بقية هذا الدليل هو ما يفعله كل واحد وأين يعض.

كيف يعمل ظل الصندوق؟

الاختصار هو خمس قيم ولون:

box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/*         │  │    │    │  └ colour                 */
/*         │  │    │    └ spread: grow or shrink    */
/*         │  │    └ blur: 0 is a hard edge         */
/*         │  └ vertical offset                     */
/*         └ horizontal offset                      */

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

الجزء الذي يفتقده الناس: كومة الظلال. قائمة مفصولة بفواصل تعود إلى الأمام، أول ظل في الأعلى:

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.20),   /* contact: tight, darker */
  0 8px 24px rgb(0 0 0 / 0.12);  /* ambient: wide, lighter */

هذا الزوج هو السبب في أن ظل المصمم &#39؛ يبدو أفضل من ظلك. ظل واحد يقرأ كملصق. اثنان يقرأان ككائن ذو وزن. ال مولد الظل الصندوق يتيح لك إضافة طبقات وسحب كل طبقة على حدة، وهي الطريقة الوحيدة المعقولة لضبطها.

inset يحرك الظل داخل مربع الحدود، وهي الطريقة التي تحصل بها على مدخل يبدو غائرًا، أو النصف الداخلي من سطح الشكل الجديد.

إحدى ملاحظات الأداء التي عضتني في مشاريع حقيقية: الرسوم المتحركة box-shadow يفرض إعادة طلاء كل إطار. إذا كنت تريد رفع البطاقة عند التحويم، قم بالتحريك transform ويتلاشى العنصر الثاني الذي يحمل الظل الأكبر. ال مرجع ظل مربع MDN يوثق بناء الجملة بالكامل.

ما فائدة ظل النص إلى جانب الظلال المسقطة؟

نفس الفكرة، قيمة واحدة أقل. text-shadow ليس له انتشار:

text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);

استخداماته المثيرة للاهتمام ليست ظلالاً على الإطلاق.

الخطوط العريضة. أربعة ظلال صلبة عند عدم التمويه، واحد لكل قطري، تزييف حد حول النص. إنه أثقل من -webkit-text-stroke لكنه يعمل في كل مكان ويظهر خارج الحرف الرسومي بدلاً من تقسيم الفرق

text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
             1px -1px 0 #000, -1px -1px 0 #000;

توهج. إزاحة صفر، ضبابية كبيرة، لون مشبع، تتكرر مرتين أو ثلاث مرات لبناء الكثافة.

الوضوح على الصور. ظل داكن ناعم واحد أسفل النص الأبيض يشتري لك التباين عندما تكون الخلفية صورة لا تتحكم فيها. إنه ليس بديلاً عن سكريم مناسب، ولن يوفر نسبة تباين فاشلة، ولكنه يمنع السليل من الاختفاء في رقعة مشرقة.

بناء الثلاثة على مولد ظل النص. إذا كنت تسعى وراء متطلبات التباين بدلاً من التأثير، فتحقق من النتيجة WCAG مع ال مدقق تباين الألوان بدلا من مقلة العين.

لماذا يأخذ نصف القطر الحدودي ثماني قيم؟

يستخدم معظم الناس واحدة. النموذج الكامل عبارة عن مجموعتين من أربعة، مفصولة بشرطة مائلة

border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/*             ─────horizontal────   ──────vertical─────  */

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

سلوكان يستحقان المعرفة.

النسب المئوية تحل ضد محاور مختلفة. نصف قطر أفقي في % هي نسبة مئوية من العنصر &#39؛s العرض، العمودي لارتفاعه. لذا border-radius: 50% على المستطيل يعطي شكل بيضاوي، وليس مستطيلًا مستديرًا، وهو ما يفاجئ الناس في المرة الأولى.

يقوم المتصفح بقياس نصف القطر لأسفل عندما يتداخلان. إذا كان نصف القطر المتجاورين يصل مجموعهما إلى أكثر من الجانب الذي يتشاركانه، فسيتم تقليل جميع أنصاف الأقطار بشكل متناسب حتى تتناسب. لا يمكنك تجاوز الشكل، ولهذا السبب border-radius: 9999px ينتج حبة بشكل موثوق.

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

ما الذي يمكن أن تفعله مرشحات CSS، وما تكلفتها؟

filter يطبق العمليات الرسومية على العنصر وكل ما بداخله

filter: blur(4px) brightness(1.1) saturate(1.2);

تتكون الوظائف من اليسار إلى اليمين، ويغير الترتيب النتيجة. التمويه ثم التفتيح ليس مثل التفتيح ثم التمويه.

وظيفة	يفعل	انتبه
blur()	طمس غاوسي	باهظة الثمن في أنصاف أقطار كبيرة؛ يطمس الحواف إلى الخارج
brightness()	مضاعفة الخفة	فوق 1 مقاطع مميزة باللون الأبيض
contrast()	يدفع القيم من منتصف اللون الرمادي	تفاصيل السحق بسرعة
grayscale()	يزيل التشبع	أرخص من الأصول المكررة
sepia()	خريطة النغمة الدافئة	الجمع مع hue-rotate() للصبغات الأخرى
hue-rotate()	يغير اللون بزاوية	لا يحافظ على الخفة المدركة
drop-shadow()	الظل الذي يتبع ألفا	على عكس box-shadow، يتبع الشكل الفعلي

هذا الصف الأخير هو الذي يستحق التذكر. box-shadow يقوم بتظليل مربع الحدود، بحيث يحصل شعار PNG الشفاف على ظل مستطيل. filter: drop-shadow() يتتبع قناة ألفا ويظلل الشعار نفسه.

التكلفة حقيقية. تقوم المرشحات بدفع العنصر إلى الطبقة المركبة الخاصة به، و blur() على وجه الخصوص، فهي باهظة الثمن على مساحة كبيرة. غرامة على زر. فكر مرتين في تراكب صفحة كاملة على هاتف منخفض الجودة. مرجع مرشح MDN&#39؛s يسرد كل وظيفة وسلوك الاستيفاء الخاص بها.

جرب المجموعات على مولد مرشح CSS، والذي يوضح المعاينة والإعلان الدقيق جنبًا إلى جنب.

كيف يمكنني بناء لوحة زجاجية تعمل؟

الزجاج المتجمد هو إحدى خصائص القيام بهذا العمل

background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);

backdrop-filter مرشحات ما هو خلف العنصر وليس العنصر نفسه. ثلاثة أشياء تتبع ذلك، وهي تمثل كل &quot تقريبًا؛ لماذا يبدو زجاجي مثل الصندوق الرمادي والاقتباس؛ سؤال.

يحتاج إلى شيء وراءه. على لون خلفية مسطح، تكون الخلفية غير الواضحة هي نفس اللون المسطح. التأثير موجود فقط على الصورة أو التدرج أو المحتوى المتداخل.

يجب أن تكون الخلفية شفافة. خلفية معتمة بالكامل تخفي الخلفية غير الواضحة تمامًا. في مكان ما، يتراوح اللون الأبيض بين 10% و25%.

التشبع هو ما يبيعه. الزجاج الحقيقي يركز اللون. saturate(180%) إلى جانب التمويه يوجد الفرق بين الزجاج المصنفر واللطخة.

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

ال مولد التشكل الزجاجي معاينات لصورة فعلية، وهو أمر مهم هنا أكثر من أي تأثير آخر في هذا الدليل.

هل يستحق الشكل الجديد استخدامه؟

Neumorphism، أو واجهة المستخدم الناعمة، تجعل العناصر تبدو مبثوقة من الخلفية بدلاً من أن تطفو فوقها. ظلان، زوايا متقابلة، أحدهما أفتح من السطح والآخر أغمق

background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
            -8px -8px 16px #ffffff;

استبدلها بحالة مضغوطة، أو استخدمها inset على كليهما للحصول على مظهر منحوت.

هذه التقنية لها قيد واحد صعب: يجب أن يكون العنصر وخلفيته بنفس اللون. التأثير هو الظلين بالكامل، لذا يتوقف الزر ذو الشكل الجديد الموجود على خلفية مختلفة عن القراءة كما هو مقذوف ويبدأ القراءة كما هو مكسور.

كما أن لديها مشكلة في إمكانية الوصول تستحق أن تكون صادقًا بشأنها. الجمالية بأكملها منخفضة التباين من حيث البناء، والزر الذي يكون الظل الناعم هو تحمله الوحيد يمكن أن يفشل WCAG&#39؛s متطلبات التباين غير النصي للمكونات التفاعلية. إذا كنت تستخدمه، فامنح الأزرار حدودًا حقيقية أو نمط تركيز لا يعتمد على الظل.

ال مولد نيومورفيسم يستمد كلا لوني الظل من لون سطحك، وهو الجزء العبث الذي يجب القيام به يدويًا.

متى أحتاج إلى محول الوحدة؟

في كثير من الأحيان أكثر مما تعتقد، لأن أدوات التصميم تتحدث لغة px وغالبًا ما لا تتحدث لغة CSS الجيدة.

rem يرتبط بحجم الخط الجذر، لذلك يتم قياس التخطيط في rem عندما يقوم المستخدم بتغيير حجم النص الافتراضي لمتصفحه &#39؛s. em نسبة إلى العنصر #39؛s حجم الخط، مما يجعله مفيدًا للحشو الذي يجب أن يتتبع النص الخاص به ويكون غادرًا عندما يتجمع عبر عناصر متداخلة.

الحساب تافه. إن القيام بذلك أربعين مرة أثناء ترجمة المواصفات هو المكان الذي تتسلل فيه الأخطاء، خاصة إذا لم يكن حجم الجذر 16 بكسل. ال محول وحدة CSS يأخذ جذرًا قابلاً للتكوين ويعرض كل وحدة في وقت واحد.

للتدرجات، و مولد التدرج يغطي الخطي والشعاعي والمخروطي، وهناك كتابة أطول في دليل التدرج CSS.

تجميعها معًا: بطاقة، من البداية إلى النهاية

ونادرا ما تستخدم الخصائص وحدها. إليك بطاقة تستخدم أربعة منها، تم تصميمها بالطريقة التي سأبنيها بها.

ابدأ بالشكل والظل الساكن:

.card {
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 4px 12px rgb(0 0 0 / 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

ظلان مرة أخرى، كلاهما خفيف. بالكاد ينبغي رفع بطاقة الراحة. احفظ الدراما لحالة التحليق.

.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.08),
    0 12px 28px rgb(0 0 0 / 0.12);
}

ال translateY هل معظم العمل المتصور. تُقرأ الحركة على أنها رفع بشكل أكثر إقناعًا من الظل الأكبر، وهي رخيصة لأن التحويلات يتم تركيبها بدلاً من إعادة طلائها.

إذا كانت البطاقة موجودة على صورة بدلاً من صفحة مسطحة، فقم بتبديل الخلفية البيضاء بالزجاج

.card {
  background: rgb(255 255 255 / 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 0.25);
}

لاحظ ما تغير وما لم يتغير. نصف القطر والظلال لا يمسها أحد. فقط المعالجة السطحية هي التي تختلف، وهو النموذج العقلي المفيد: الشكل والعمق قراران، والسطح قراران آخران.

ماذا عن دعم المتصفح والتراجع؟

معظم هذا قديم وآمن. box-shadow، text-shadow، border-radius و filter لقد تم دعمها في كل مكان لسنوات، ويمكنك كتابتها دون تفكير ثانٍ.

backdrop-filter هل الاستثناء يستحق التعامل معه. الدعم واسع الآن، ولكن الخاصية الوحيدة هنا هي التي تنتج نتيجة مكسورة المظهر حقًا عندما تكون مفقودة: لوحة بخلفية بيضاء بنسبة 15% ولا يوجد ضبابية هي مسحة شاحبة على الصورة. احرسه:

.glass {
  background: rgb(255 255 255 / 0.85);   /* readable fallback */
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(12px) saturate(180%);
  }
}

الجزء الاحتياطي عبارة عن لوحة غير شفافة في الغالب، وهو ليس التأثير ولكنه قابل للاستخدام تمامًا. ينطبق الإصدار المحسن فقط حيث يمكن للمتصفح تقديمه. MDN&#39؛s @supports مرجع يغطي بناء الجملة، ومن المفيد الوصول إلى أي وقت تحتوي فيه الخاصية على وضع فشل معطل بصريًا بدلاً من مجرد وضع أكثر وضوحًا.

كيف يمكنني الحفاظ على اتساق التأثيرات عبر المشروع؟

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

قم بتعريفها مرة واحدة كخصائص مخصصة واستخدم الأسماء

:root {
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
               0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
               0 12px 28px rgb(0 0 0 / 0.12);
  --radius: 12px;
}

.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }

عادة ما تكون ثلاث خطوات ظل كافية. إذا وجدت نفسك تضيف عنصرًا رابعًا، فغالبًا ما يكون ذلك بسبب أن أحد المكونات يحتاج إلى مكون مختلف ارتفاع بدلاً من ظل مختلف، والإجابة هي إعادة استخدام خطوة موجودة.

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

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

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

حيث تسبب هذه التأثيرات مشاكل في إمكانية الوصول

كل خاصية في هذا الدليل تعالج التباين، والتباين هو الشيء الذي تدور حوله متطلبات إمكانية الوصول في الغالب. أربعة مصائد محددة.

تحتاج المكونات التفاعلية إلى حدود مرئية. يتطلب WCAG 2.2 تباينًا بنسبة 3:1 لأجزاء التحكم التي تحدده. يمكن أن يفشل الزر الذي تكون حافته الوحيدة ظلًا ناعمًا في ذلك، وهي المشكلة الهيكلية في الشكل الجديد والسبب في أن الحدود أو حلقة التركيز الصلبة ليست اختيارية هناك.

ترث الألواح الزجاجية خلفيتها ومشكلة التباين #39؛s. يكون النص الموجود على اللوحة المتجمدة مقروءًا أو لا يعتمد على الصورة الموجودة خلفها، وغالبًا ما تتغير الصورة. اختبر أسوأ صورة لديك، وليس بطلك. عادةً ما يكون رفع اللوحة و#39؛عتامة الخلفية حلاً أفضل من جعل النص أكثر جرأة.

تتغير المرشحات التباين بصمت. brightness() و contrast() تنطبق على الحاوية تنطبق أيضًا على النص الموجود بداخلها. أ filter: brightness(1.15) على البطاقة لجعلها منبثقة، يمكنك دفع النص الأساسي بهدوء تحت عتبة 4.5:1. تحقق بعد ذلك مع مدقق تباين الألوانليس قبل.

لا تدع الظل يكون مؤشر الحالة الوحيد. إذا كان التمرير والتركيز والضغط يختلفان فقط حسب عمق الظل، فإن مستخدمي لوحة المفاتيح وأي شخص يعاني من ضعف البصر يفقدون التمييز. قم بإقران تغيير الظل بتحويل أو مخطط تفصيلي أو تغيير اللون.

لا شيء من هذا يجعل التأثيرات غير قابلة للاستخدام. فهو يجعلها أشياء يجب التحقق منها بدلاً من افتراضها، الأمر الذي يستغرق حوالي دقيقة لكل مكون مع فتح مدقق التباين.

هل ترسل هذه الأدوات عملي إلى أي مكان؟

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

الأخطاء الشائعة

• ظل واحد بدلا من اثنين. الفرق الوحيد الأكثر وضوحًا بين الظل المكتوب بخط اليد والظل المصمم.
• الرسوم المتحركة box-shadow على تحوم. يعيد طلاء كل إطار. تحريك transform والتلاشي المتقاطع بدلاً من ذلك.
• backdrop-filter على لون صلب. لا شيء يمكن طمسه، لذلك لا يحدث شيء.
• خلفية غير شفافة على لوح زجاجي. يخفي التأثير الذي كتبته للتو.
• Neumorphism على خلفية غير متطابقة. الوهم يعتمد على كونهم متطابقين.
• border-radius: 50% توقع مستطيل مستدير. على عنصر غير مربع تحصل على القطع الناقص.
• شحن أي من هذه دون فحص التباين. تعمل الظلال والزجاج على تقليل التباين، ومن السهل الإفراط في ضبطهما على شاشة جيدة.

أسئلة وأجوبة