ما هو مولد الظل مربع CSS؟
CSS Box Shadow Generator هو محرر مرئي لخاصية CSS Box-Shadow. يمكنك ضبط الإزاحة ، ونطاق شعاع الانتشار ، واللون ، والعتامة باستخدام أشرطة التمرير ورؤية النتيجة عرضًا مباشرًا على عنصر المعاينة ، ثم نسخ CSS بالضبط. بدلاً من تخمين قيم البكسل وإعادة تحميل الصفحة ، تقوم بتشكيل الظل مباشرة وقراءة الكود الذي ينتجه.
افتح مولد الظل لصندوق CSS هذا ويبدأ على إعداد البطاقة مسبقًا، طبقتان تنسخان كظل مربع: 0px 4px 6px -1px #0000001a، 0px 2px 4px -2px #0000001a؛. يتم خبز شريط تمرير العتامة باللون السداسي، بحيث يصبح 10% هو 1a في النهاية. انقر فوق الإعداد الداخلي المسبق ويتغير الإعلان إلى ظل الصندوق: inset 0px 2px 4px 0px #00000033؛ مظهر الزر المضغوط. إضافة طبقة تُلحق ظلًا عند 0px 4px 6px 0px #00000033، مُدرج أخيرًا ومرسوم أسفل الآخرين.
خاصية الظل الصندوقي عميقة بشكل مخادع. يمكن لإعلان واحد تكديس العديد من الظلال ، لكل منها إزاحات خاصة بها ، وطمس ، وانتشار ، ولون ، وكلمة رئيسية اختيارية ترسم الظل داخل العنصر بدلاً من الخارج. تستخدم ظلال الواجهة الحقيقية دائمًا طبقتين أو أكثر لتبدو طبيعية ، وهو أمر ممل للكتابة يدويًا. تدير هذه الأداة الطبقات نيابة عنك وتخرج إعلانًا صالحًا للمواصفات بالترتيب الصحيح المفصول بفواصل.
كل شيء يحدث في متصفحك. اختر إعدادًا مسبقًا ، وقم بضبط الطبقات ، وقم بتبديل المعاينة بين الخلفيات الفاتحة والداكنة ، وانسخ إما الخاصية القياسية أو الكتلة التي تتضمن أيضًا البادئة -webkit-. لا يوجد حساب ولا تحميلات ، ويستمر في العمل دون اتصال بمجرد تحميل الصفحة.
يتم رسم الظلال خارج الصندوق ولا تشغل أي مساحة، لذلك لا تدفع الجيران أبدًا وسيتم قصها بواسطة أي سلف مع إخفاء الفائض. الانتشار هو القيمة الأقل فهمًا: فهو ينمو أو يقلص شكل الظل قبل التمويه، لذا فإن الانتشار الإيجابي مع عدم التمويه يعطي مخططًا ثابتًا للإزاحة، وهي الطريقة التي يتم بها تزييف تأثيرات الحدود دون التأثير على التخطيط. يقوم Inset بتحريك الظل داخل العنصر، وهو أمر مفيد للحالات المضغوطة والتوهج الداخلي. إن وضع طبقات من الظلال مع زيادة الإزاحة والتبايض هو مدى بناء العمق المقنع، حيث أن التمويه الكبير الواحد يُقرأ على شكل ضباب وليس كظل. تكلف كل طبقة وقت العرض، والظلال التي يتم إعادة طلاءها أثناء التمرير أو الرسوم المتحركة هي مصدر شائع للانزلاق على الأجهزة ذات الطاقة المنخفضة.
كيفية استخدام مولد الظل مربع CSS؟
ابدأ من طبقة مسبقة الضبط أو فارغة
تفتح الصفحة على إعداد البطاقة مسبقًا. اختر أخرى مثل Elevated أو Neumorphic لنقطة بداية مختلفة، أو قم بتحرير الطبقات الحالية مباشرة.
اضبط الظل باستخدام المتزلجون
اسحب الإزاحة الأفقية والرأسية، وقم بطمس نصف القطر، ونشر أشرطة تمرير نصف القطر، وقم بتعيين لون الظل والعتامة، ثم ضع علامة Inset لتحريك الظل داخل المربع.
تكديس المزيد من الطبقات إذا لزم الأمر
انقر فوق إضافة طبقة للعمق - ظل عريض ناعم تحت ظل أغمق يُقرأ على أنه ارتفاع طبيعي. طبقات جديدة في النهاية، والتي ترسمها تحت الطبقات السابقة؛ لا توجد إعادة ترتيب، لذا لتحريك الطبقة وحذفها باستخدام أيقونة سلة المهملات الخاصة بها وإعادة بنائها باستخدام إضافة طبقة.
انسخ css
انسخ إعلان الظل المربع ، أو الكتلة المسبوقة للمتصفحات القديمة ، والصقها مباشرة في ورقة الأنماط أو أنماط المكونات.
الميزات الرئيسية
الظلال متعددة الطبقات
قم بتكديس أي عدد من طبقات الظل في إعلان واحد ، بترتيب الطلاء الصحيح من أعلى إلى أسفل ، وهو كيفية بناء البطاقة الحقيقية والارتفاع النموذجي
تحكم كامل في الممتلكات
منزلقات للإزاحة الأفقية والرأسية، ونصف قطر ضبابي، ونصف قطر انتشار، بالإضافة إلى منتقي الألوان، والتحكم في العتامة، وغطاء تبديل داخلي كل جزء من القواعد
معاينة مباشرة
يتم تحديث عنصر المعاينة على الفور أثناء التحرير ، ويمكنك تبديل خلفيته بين الضوء والظلام للتحقق من كيفية قراءة الظل في كلا الموضوعين
الإعدادات الجاهزة
الوصفات المنسقة للظلال الدقيقة والبطاقة والمرتفعة والعائمة والداخلية والتوهج والظلال الحادة تمنحك نقطة بداية مثبتة بدلاً من لوحة قماشية فارغة
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!