مولد UUID
أنشئ معرّفات UUID عشوائية بكميات كبيرة.
مولد CSS box-shadow
شكّل الظل بالمنزلقات، وكدّس عدة طبقات، وانسخ كود CSS.
ملفاتك تبقى على جهازك
طريقة الاستخدام
- 1حرّك المنزلقات للإزاحة والتمويه والانتشار.
- 2اختر اللون والشفافية. فعّل الظل الداخلي للحصول على ظل في الداخل.
- 3أضف طبقات لبناء ظل أنعم وأكثر طبيعية.
- 4انسخ كود CSS.
ماذا تفعل الخيارات
- الإزاحة
- المسافة الأفقية والرأسية للظل عن الصندوق. القيم السالبة تتجه إلى اليسار وإلى الأعلى.
- التمويه
- مدى نعومة الحافة. الصفر يعطي حافة حادة.
- الانتشار
- يكبّر الظل أو يصغّره قبل التمويه. الانتشار السالب يمنع التمويه الكبير من الامتداد إلى الجوانب.
- داخلي
- يرسم الظل داخل الصندوق، مثل حقل مضغوط للداخل.
- الطبقات
- تُرسم عدة ظلال معًا. طبقتان أو ثلاث خفيفة تبدو أكثر طبيعية من ظل واحد ثقيل.
الخصوصية
كل شيء يعمل في متصفحك. ما تكتبه لا يُرسل إلى أي خادم.
أسئلة شائعة
لماذا أستخدم أكثر من طبقة ظل؟
الظلال الحقيقية حادة قرب الجسم وناعمة بعيدًا عنه. ظل صغير ضيق مع ظل كبير ناعم يحاكي ذلك، ويبدو أكثر إتقانًا من تمويه واحد.
هل يتبع box-shadow الزوايا المستديرة؟
نعم، يتبع border-radius للعنصر. يوضح منزلق نصف القطر ذلك وهو مضمّن في كود CSS المنسوخ.
هل تبطّئ التمويهات الكبيرة الصفحة؟
بضعة ظلال ثابتة لا مشكلة فيها. أما كثرة الظلال الكبيرة المموهة أو تحريكها فقد تكون مكلفة على الهواتف الضعيفة. حرّك شفافية عنصر زائف بدلًا من ذلك.
ما الفرق عن drop-shadow()؟
يتبع box-shadow الصندوق المستطيل. أما المرشح drop-shadow() فيتبع الشكل المرئي، بما في ذلك حواف PNG وSVG الشفافة.
هل يمكنني استخدام الناتج في Tailwind أو أدوات أخرى؟
القيمة بعد box-shadow: هي CSS عادي. في Tailwind ضعها في قيمة عشوائية مع استبدال المسافات بشرطات سفلية.