لسنوات بدت ظلي مزيفة ولم أتمكن من معرفة السبب. سأكتب box-shadow: 0 5px 10px black، احصل على هالة رمادية موحلة، وقم بتنعيمها، واستمر في الشعور بعدم الرضا بشكل غامض. بدت البطاقة وكأنها تحتوي على كدمة، وليس ظلًا. فقط عندما بدأت في تفكيك أنظمة التصميم التي أعجبت بها - تلك التي تبدو فيها البطاقات وكأنها تطفو حقًا - أدركت الحيلة. لا يستخدمون ظلًا واحدًا أبدًا. يقومون بتكديس اثنين أو ثلاثة، كل منهم يقوم بعمل مختلف، والنتيجة تبدو وكأنها ضوء يتصرف بالطريقة التي يتصرف بها الضوء فعليًا.
أقوم ببناء واجهات في React وTailwind لكسب لقمة العيش، وأحتفظ بموضوع مسؤول WordPress في WP Adminify حيث تحمل الظلال الكثير من التسلسل الهرمي المرئي، وقمت ببناء مولد الظل مربع CSS على Toolz.dev لأنني سئمت من ضبط الظلال متعددة الطبقات يدويًا في محرر النصوص وإعادة التحميل لرؤية النتيجة. هذا الدليل هو كل ما تعلمته عن box-shadow الخاصية: ما تفعله كل قيمة، ولماذا تعمل الطبقات، وكيفية تجنب المصائد الشائعة، وكيفية استخدام المولد للانتقال من عنصر فارغ إلى إنتاج CSS في بضع دقائق.
ليرة تركية؛DR: CSS
box-shadowيأخذ إزاحة X، وإزاحة Y، ونصف قطر التمويه، ونصف قطر الانتشار، واللون، مع اختياريinsetكلمة رئيسية. طمس يخفف الحافة؛ انتشار ينمو أو يقلص الظل قبل التمويه. الارتفاع الحقيقي يأتي من تكديس ظلال متعددة مفصولة بفواصل، وليس من تحريك ظل واحد '؛s العتامة. استخدم اللون الأسود منخفض العتامة، وإزاحة Y صغيرة، وطمس كبير، وانتشار سلبي قليلاً - ثم انسخ CSS مباشرة من المولد.
ماذا تفعل خاصية ظل الصندوق بالفعل؟
box-shadow يرسم ظلًا واحدًا أو أكثر حول مربع حدود العنصر '؛s، ويتم تحديد الخاصية في خلفيات وحدود CSS المستوى 3. يبدو بناء جملة ظل واحد على النحو التالي
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
الإزاحات مطلوبة؛ يعد التمويه والانتشار واللون أمرًا اختياريًا ولكنك ستقوم بتعيينها دائمًا تقريبًا. إليك ما يتحكم فيه كل واحد، بالطريقة التي أفكر بها عند الضبط
الإزاحة X يحرك الظل أفقيا. القيم الإيجابية تدفعه إلى اليمين، والسلبية إلى اليسار. بالنسبة لمعظم ظلال الواجهة، تريد ذلك عند الصفر أو بالقرب منه، لأن الضوء في العالم الحقيقي يأتي عادةً من الأعلى، ويلقي الظلال مباشرة إلى الأسفل بدلاً من وضعها على الجانب.
إزاحة Y يحرك الظل عموديا. القيم الإيجابية تدفعه إلى الأسفل، وهو ما تريده لعنصر يبدو أنه موجود فوق الصفحة. هذه هي القيمة الوحيدة التي تتحكم بشكل أكبر في كيفية "؛ عالية وquot؛ يشعر العنصر.
طمس نصف القطر يخفف الظل '؛s حافة. قيمة الصفر تعطي ظلًا ذو حواف صلبة مثل الشكل الصلب؛ القيم الأكبر تنشر النعومة. لا يمكن أن يكون هذا سلبيًا. يستخدم كل ظل ذو مظهر طبيعي تقريبًا ضبابية أكبر بعدة مرات من إزاحة Y الخاصة به.
انتشار نصف القطر يغير حجم الظل قبل تطبيق التمويه. الانتشار الإيجابي يجعل الظل أكبر في كل اتجاه؛ الانتشار السلبي يقلصه. الانتشار السلبي هو السلاح السري لظلال البطاقات الضيقة والقابلة للتصديق، لأنه يسحب الظل إلى الداخل حتى لا ينزف خارج العنصر.
لون هل هناك أي لون CSS صالح. تستخدم أفضل ظلال الواجهة اللون الأسود أو شبه الأسود عند العتامة المنخفضة - شيء من هذا القبيل rgba(0, 0, 0, 0.1) - بدلاً من اللون الرمادي المعتم بالكامل، لأن اللون الأسود الشفاف يلون كل ما يقف خلفه بالطريقة التي يفعلها الظل الحقيقي.
لماذا تستخدم الظلال الجيدة أكثر من طبقة واحدة؟
هذه هي الفكرة التي غيرت ظلي تمامًا، لذلك حصلت على قسم خاص بها. الظل الواحد هو فقاعة واحدة موحدة. الظلال الحقيقية ليست موحدة. بالقرب من الكائن يكون الظل أغمق وأكثر وضوحًا؛ بعيدًا يكون أفتح وأكثر انتشارًا. أنت تقريبي هذا السقوط عن طريق تكديس الظلال.
الوصفة الكلاسيكية عبارة عن طبقتين: ظل ضيق وأغمق قليلاً يقع بالقرب من العنصر ويمنحه قاعدة واضحة، بالإضافة إلى ظل أكثر نعومة وأوسع وأخف وزنًا تحته يوفر الانتشار المحيط. شيء من هذا القبيل:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
يرسم المتصفح ظلالاً مفصولة بفواصل بالترتيب، بحيث يكون الأول في الأعلى. كل طبقة رخيصة الثمن، ويتم قراءة اثنتين أو ثلاث طبقات معًا على أنها عمق حقيقي بطريقة لا يستطيع أي ظل واحد القيام بها، بغض النظر عن كيفية ضبطها. هذا هو بالضبط سبب بناء المولد حول طبقات بدلاً من مجموعة واحدة من أشرطة التمرير - مولد الظل مربع CSS تأتي مع إعدادات مسبقة مثل Card وElevated وFloating وجميعها متعددة الطبقات، لذلك تبدأ من قاعدة واقعية بدلاً من النقطة الوحيدة.
النموذج العقلي الذي أستخدمه: فكر في مستويات الارتفاع. توجد بطاقة الراحة منخفضة مع ظل صغير وضيق. يوجد المنسدلة أو المنبثقة أعلى مع واحدة أكبر وأكثر ليونة. الشكل هو الأعلى على الإطلاق. زيادة الارتفاع تعني زيادة إزاحة Y وعدم وضوحها عبر جميع الطبقات معًا، وليس فقط تعتيم ظل واحد.
كيف أقوم بإنشاء ظل داخلي؟
ال inset تقلب الكلمة الأساسية ظلًا داخل صندوق الحشو '؛s بدلاً من إلقائه للخارج. يضيف inset في مقدمة إعلان الظل ويرسم داخل العنصر:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
الظلال الداخلية هي الطريقة التي تجعل مظهر التحكم مضغوطًا أو غائرًا أو منحوتًا. غالبًا ما يُقرأ إدخال النص بشكل أفضل مع ظل داخلي دقيق يشير إلى وجود بئر في النص بالداخل. يمكن لحالة الزر المضغوط تبديل ظلها الخارجي بظل داخلي لتشعر بالاكتئاب الجسدي. ويتم بناء اتجاه الشكل الجديد بأكمله على إقران مدخل ضوئي من اتجاه واحد مع مدخل داكن من الاتجاه الآخر. في المولد، يكون الإدخال عبارة عن تبديل واحد لكل طبقة، بحيث يمكنك مزج الظلال الداخلية والظلال الأولية في نفس العنصر - وهو بالضبط ما تحتاجه الأسطح ذات الشكل الجديد.
كيف يمكنني استخدام Box Shadow Generator؟
تم تصميم التدفق ليتناسب مع الطريقة التي أعمل بها بالفعل. افتح مولد الظل مربع CSS وتهبط على عنصر المعاينة مع إعداد مسبق واقعي للبطاقة تم تطبيقه بالفعل، لذلك لا تحدق أبدًا في لوحة قماشية فارغة.
اختر إعدادًا مسبقًا للاقتراب مما تريد - رقيق، أو بطاقة، أو مرتفع، أو عائم، أو داخلي، أو متوهج، أو نيومورفيك، أو حاد. يقوم كل واحد بتحميل مكدس الطبقة الكاملة الخاص به. ثم حدد طبقة وقم بضبطها باستخدام أشرطة التمرير: الإزاحة X، والإزاحة Y، والطمس، والانتشار لكل منها تحكم خاص بها، بالإضافة إلى منتقي الألوان، وشريط تمرير العتامة، والتبديل الداخلي. يتم تحديث المعاينة مباشرة أثناء السحب، لذا فأنت تقوم بتشكيل الظل مباشرة بدلاً من تحرير الأرقام وتخيل النتيجة.
إذا كنت بحاجة إلى مزيد من العمق، أضف طبقة. إذا كانت الطبقة لا تفعل شيئًا مفيدًا، فقم بإزالتها. يوجد تبديل للخلفية يقوم بتبديل المعاينة بين الضوء والظلام، وهو أمر مهم لأن الظل الذي يبدو مثاليًا على البطاقة المضيئة يمكن أن يختفي أو يتحول إلى حلقة رمادية قبيحة على البطاقة الداكنة. التحقق من كليهما قبل الشحن يوفر رحلة ذهابًا وإيابًا.
عندما تكون سعيدًا، انسخ CSS. يمكنك الاستيلاء على عادي box-shadow إعلان، أو كتلة تتضمن أيضًا -webkit-box-shadow البادئة إذا كان عليك دعم إصدارات WebKit القديمة جدًا. قم بلصقها في ورقة الأنماط الخاصة بك، أو المكون المصمم الخاص بك، أو قيمة Tailwind التعسفية الخاصة بك وبذلك تكون قد انتهيت.
مثل كل أداة على الموقع، يتم تشغيلها بالكامل في متصفحك. لا يتم تحميل أي شيء ويستمر في العمل دون اتصال بالإنترنت بمجرد تحميله، وهو نفس النهج من جانب العميل الذي أصفه في دليل خصوصية البيانات.
حالات الاستخدام في العالم الحقيقي
بناء مقياس الارتفاع لنظام التصميم
عندما أقوم بإعداد مشروع جديد، أقوم بتحديد مجموعة ثابتة من مستويات الارتفاع بدلاً من السماح لكل مكون باختراع ظله الخاص. عادةً ما يكون ذلك على بعد أربع أو خمس خطوات من "؛ بطاقة الاستراحة والاقتباس؛ ما يصل إلى "؛ modal."؛ أقوم ببناء كل واحدة في المولد، ونسخ CSS، وإسقاطها في رموز التصميم الخاصة بي كقيم مسماة. تشير كل بطاقة وقائمة ومربع حوار بعد ذلك إلى مستوى، وبالتالي فإن المنتج بأكمله يشترك في نموذج إضاءة متسق. إن القيام بذلك يدويًا في محرر النصوص أمر بائس؛ يستغرق القيام بذلك من خلال المعاينة المباشرة بضع دقائق.
جعل البطاقة تطفو في الواقع
الغريزة الافتراضية هي ظل داكن واحد، يبدو ملصقًا. الإصلاح هو الوصفة المكونة من طبقتين: طبقة ضيقة مع إزاحة Y صغيرة وانتشار سلبي لتثبيت البطاقة، وطبقة أوسع وأكثر ليونة أسفل الضوء المحيط. ابدأ من البطاقة أو الإعداد المسبق المرتفع، وادفع القيم حسب الذوق، وستحصل على بطاقة تُقرأ على أنها مرفوعة وليست محددة.
تصميم الحالات المضغوطة والمركزة
غالبًا ما تعيش ردود الفعل التفاعلية في الظل. يمكن أن يفقد الزر معظم ظله الخارجي ويحصل على جزء صغير عند الضغط عليه ليشعر بالضغط الجسدي. يمكن أن يحمل الإدخال إدخالًا دقيقًا دائمًا ليبدو وكأنه بئر. يتم إنشاء نموذج أولي سريعًا عن طريق تبديل الإدخال الداخلي ومشاهدة المعاينة، ويضيفون الكثير من الصقل الملحوظ مقابل القليل جدًا من التعليمات البرمجية.
الأسطح النيومورفية
إذا كنت تريد مظهر واجهة المستخدم الناعمة، فأنت بحاجة إلى ظلين على نفس العنصر يشيران إلى اتجاهين متعاكسين - ظلال داكنة لأسفل لليمين وظلال فاتحة لأعلى لليسار - بحيث يبدو السطح مقذوفًا من الخلفية. يقوم الإعداد المسبق Neumorphic بإعداد هذا، ويمكنك ضبط اللون والعتامة والضبابية لتتناسب مع خلفيتك المحددة. إنه يعمل فقط على الخلفيات التي ليست بيضاء نقية ولا سوداء نقية، والتي يساعدك تبديل الخلفية الداكنة على التحقق منها.
ظل الصندوق مقابل الفلتر: ظل منسدل
سؤال أتلقاه كثيرًا: متى يجب أن أستخدمه filter: drop-shadow() بدلا من box-shadow؟ إنهم يبدون متشابهين ولكنهم يتصرفون بشكل مختلف، واختيار الخطأ يسبب أخطاء حقيقية.
| ميزة | صندوق الظل | الفلتر: إسقاط الظل () |
|---|---|---|
| يتبع | صندوق الحدود المستطيل | وحدات البكسل المرئية الفعلية (غير الشفافة) |
| الأفضل ل | البطاقات والأزرار واللوحات والمدخلات | الشعارات والأيقونات وبابوا غينيا الجديدة بشفافية وأشكال غير منتظمة |
| يدعم إدراج | نعم | لا |
| يدعم الانتشار | نعم | لا |
| ظلال متعددة | نعم مفصولة بفواصل | نعم، عن طريق تسلسل المرشحات |
| يؤثر على التخطيط | لا | لا |
النسخة القصيرة: بالنسبة للعنصر المستطيل العادي، استخدم box-shadow - فهو أكثر قدرة، ويدعم الانتشار والإدخال، وهذا ما ينتجه هذا المولد. الوصول ل drop-shadow() فقط عندما تحتاج إلى الظل لتتبع شكل شفاف أو غير منتظم، مثل الشعار أو أيقونة القطع، حيث قد يبدو الظل المستطيل خاطئًا.
نصائح وفخاخ متقدمة
بعض الأشياء التي أحرقتها. أولاً، يتم قص الظلال overflow: hidden على سلف. إذا تم قطع ظلك الجميل بشكل غامض، فإن أحد الأجداد يقوم بقصه - إما إعطاء مساحة الظل أو تحريكه overflow حكم في مكان آخر. لأن box-shadow لا يؤثر أبدًا على التخطيط، فهو لا يدفع العناصر المجاورة، وهي ميزة، ولكنه يعني أيضًا أن الظل يمكن أن يمتد بصمت تحت الأخ.
ثانيًا، يمكن أن تؤدي التمويهات الضخمة على العديد من العناصر إلى تكلفة أداء الطلاء، خاصة عند تحريكها. إذا قمت بتحريك ظل عند التمرير أو التمرير عبر قائمة طويلة، فشاهد معدل الإطارات الخاص بك؛ في بعض الأحيان يكون من الأرخص تحريك العتامة على عنصر زائف يحمل ظلًا ثابتًا. بمجرد الانتهاء من CSS الخاص بك، قم بتشغيله عبر CSS Minifier يحلق البايتات الإضافية التي تضيفها الظلال متعددة الطبقات.
ثالثًا، لا تنس أن لون الظل يمكن أن يكون أكثر من أسود. ظل ملون بمهارة شديدة - نسخة داكنة من لون سطحك '؛ بدلاً من اللون الأسود النقي - غالبًا ما يبدو أكثر ثراءً من اللون الرمادي المحايد، لأن الظلال الحقيقية تلتقط اللون المحيط. إنها حركة صغيرة ذات مكافأة غير متناسبة.
إذا كنت تقوم بتجميع مجموعة أدوات CSS أوسع، فإن دليل مجموعة أدوات مطور الويب يغطي المكان الذي يتناسب فيه عمل الظل مع الأدوات المساعدة الأخرى المستندة إلى المتصفح، وبمجرد الانتهاء من الظلال، فإن مولد التدرج و منتقي الألوان تقريب تصميم السطح. إذا كانت إمكانية الوصول في ذهنك، قم بإقران هذا مع مدقق تباين الألوان لذا يظل المحتوى الموجود على بطاقاتك المظللة قابلاً للقراءة.
أسئلة وأجوبة
ما هي خاصية CSS Box-Shadow؟
يضيف Box-Shadow ظلًا واحدًا أو أكثر حول إطار العنصر '؛s. يأخذ كل ظل إزاحة أفقية، وإزاحة رأسية، ونصف قطر ضبابية اختياري، ونصف قطر انتشار اختياري، ولونًا، مع كلمة رئيسية داخلية اختيارية لرسم الظل داخل المربع. يتم فصل الظلال المتعددة بفواصل ورسمها بالدرجة الأولى في الأعلى.
ما هو الفرق بين الانتشار والانتشار؟
يعمل نصف قطر التمويه على تنعيم حافة الظل، وبالتالي فإن القيمة الأكبر تجعلها أكثر انتشارًا. يغير نصف قطر الانتشار حجم الظل '؛s قبل التمويه: يؤدي الانتشار الإيجابي إلى نموه في كل اتجاه، بينما يؤدي الانتشار السلبي إلى تقليصه، وهذه هي الطريقة التي تحافظ بها على الظل مدسوسًا بإحكام تحت البطاقة بدلاً من النزيف بعد حوافها.
كيف أقوم بإنشاء ظل داخلي في CSS؟
أضف الكلمة الأساسية الداخلية إلى الظل. يرسم inset الظل داخل صندوق الحشو '؛s بدلاً من الخارج، وهو أمر مفيد للأزرار المضغوطة وآبار الإدخال والأسطح ذات الشكل الجديد. يؤدي تبديل المفتاح الداخلي في المولد إلى إضافته إلى الطبقة المحددة تلقائيًا.
هل يمكنني استخدام ظلال مربعة متعددة على عنصر واحد؟
نعم. يمكنك إدراج عدة ظلال في إعلان ظل مربع واحد مفصول بفواصل، ويقوم المتصفح برسمها بالترتيب مع وجود الأول في الأعلى. إن وضع ظل ناعم وواسع أسفل ظل أصغر وأكثر قتامة هو الطريقة القياسية لجعل الارتفاع يبدو واقعيًا بدلاً من لصقه.
لماذا يتم قص الظل الصندوقي الخاص بي؟
يتم قطع الظل عندما يكون لدى أحد الأسلاف فائض: مخفي أو عندما يكون العنصر موجودًا على حافة حاوية القطع. امنح غرفة الظل، أو حرك الفائض: القاعدة المخفية إلى عنصر مختلف. نظرًا لأن ظل الصندوق لا يؤثر على التخطيط، فإنه لا يدفع العناصر المجاورة أبدًا، لذلك يمكن أن يمتد أيضًا بصمت تحت الأخ.
ما هو الفرق بين الظل الصندوقي والفلتر: إسقاط الظل؟
يتبع Box-Shadow مربع الحدود المستطيل '؛s، لذلك فهو يتجاهل المناطق الشفافة داخل PNG أو الشكل غير المنتظم. عامل التصفية: يتتبع الظل المسقط () وحدات البكسل المرئية الفعلية، والتي تناسب الشعارات والأيقونات بشفافية. بالنسبة للبطاقات والأزرار المستطيلة القياسية، يعد ظل الصندوق هو الاختيار الصحيح ويدعم الانتشار والإدخال الذي لا يفعله الظل المسقط.
هل ما زلت بحاجة إلى بادئة -webkit- لـ box-shadow؟
للمتصفحات الحديثة، لا. لقد كان box-shadow غير مسبوق ومدعومًا على نطاق واسع لسنوات عديدة. تكون الكتلة البادئة التي يمكن للمولد إخراجها مفيدة فقط إذا كان يجب عليك دعم إصدارات WebKit القديمة جدًا، وبالنسبة لمعظم المشاريع، تكون خاصية box-shadow القياسية وحدها كافية.
هل يرسل مولد الظل الصندوقي بياناتي إلى أي مكان؟
لا . يتم إنشاء المعاينة وإخراج CSS بالكامل في متصفحك باستخدام JavaScript. لا يتم تحميل أو تخزين أي قيم ، وتستمر الأداة في العمل بدون اتصال بالشبكة بمجرد تحميل الصفحة.
