مولد الظل مربع CSS

CSS Box Shadow Generator هو محرر مرئي لخاصية CSS Box-Shadow. يمكنك ضبط الإزاحة ، ونطاق شعاع الانتشار ، واللون ، والعتامة باستخدام أشرطة التمرير ورؤية النتيجة عرضًا مباشرًا على عنصر المعاينة ، ثم نسخ CSS بالضبط. بدلاً من تخمين قيم البكسل وإعادة تحميل الصفحة ، تقوم بتشكيل الظل مباشرة وقراءة الكود الذي ينتجه.

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

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

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