مولّد ظل النص CSS (Text Shadow)

ما هو مولّد ظل النص CSS؟

تبني هذه الأداة خاصية CSS text-shadow من طبقة أو أكثر. لكل طبقة إزاحة أفقية ورأسية وتمويه ولون وشفافية، وتعرض المعاينة نصك التجريبي بالنتيجة.

كيفية استخدام مولّد ظل النص CSS

1. ابدأ بإعداد مسبق مثل Glow أو Retro أو Outline أو Emboss، أو أبقِ الظل الافتراضي.
2. حدّد طبقة واضبط الإزاحة الأفقية والرأسية والتمويه ولون الظل والشفافية.
3. أضف طبقات للحدود أو التأثيرات ثلاثية الأبعاد المتراكبة؛ واحذف ما لا تحتاجه.
4. اكتب نصك التجريبي واختر لوني النص والخلفية للتحقق من الوضوح.
5. انسخ كود CSS.

مثال

x 3px, y 3px, blur 0, color #ff0000, opacity 1

text-shadow: 3px 3px 0 #ff0000;

متى تستخدم مولّد ظل النص CSS

استخدمه للعناوين ونصوص الواجهة الرئيسية وتأثيرات النيون أو الريترو والظلال الخفيفة التي تحسّن التباين فوق الصور. وللحد الحقيقي على النصوص الكبيرة يعطي -webkit-text-stroke نتيجة أحد من الظلال المتراكبة؛ وتجنب الظلال الثقيلة على نص المتن لأنها تقلل المقروئية.

كيف يعمل مولّد ظل النص CSS

تُكتب كل طبقة بصيغة x y blur color (لا يوجد انتشار ولا inset في text-shadow). الإزاحات والتمويه بوحدة px، وتُطبَّق الشفافية على ألفا اللون فينتج hex للألوان المعتمة وrgba() لغيرها. تُفصل الطبقات بفواصل؛ وتُرسم الأولى في الأعلى. يستخدم الإعداد المسبق للحدود أربع إزاحات بمقدار 1px في كل اتجاه قطري، وهي الطريقة المعتادة بـ CSS الخالصة لمحاكاة حد النص.

حالات الاستخدام الشائعة

• ✓ عناوين بتوهج نيون
• ✓ نص أبيض مقروء فوق الصور
• ✓ عناوين ريترو ثلاثية الأبعاد متراكبة
• ✓ حدود نص مزيفة بدون SVG
• ✓ تسميات بارزة أو بنمط الطباعة البارزة

الأسئلة الشائعة

استكشف المزيد من الفئات