مولد ظل النص CSS
مولد text-shadow في CSS مجاني عبر الإنترنت. رصّ طبقات ظل متعددة مع الإزاحة والضبابية واللون والشفافية، جرّب أنماطًا جاهزة مثل النيون وثلاثي الأبعاد والريترو، وانسخ كود CSS فورًا.
ما هي خاصية text-shadow في CSS؟
تضيف text-shadow تأثيرات ظل إلى حروف النص. يُعرَّف كل ظل بإزاحة أفقية وإزاحة عمودية ونصف قطر ضبابية اختياري ولون، ويمكن دمج عدة ظلال في قيمة واحدة مفصولة بفواصل لبناء تأثيرات غنية.
كيف تعمل طبقات الظل المتعددة؟
تُرسم الطبقات من الأسفل إلى الأعلى بترتيب إعلانها، فيظهر أول ظل في القائمة فوق البقية. يتيح لك هذا المولد إضافة الطبقات وحذفها وتفعيلها وتعطيلها، ولكل طبقة إزاحتها وضبيتها ولونها وشفافيتها الخاصة لتكديس تأثيرات مثل النيون وثلاثي الأبعاد.
ماذا تعني إزاحة X وإزاحة Y والضبابية؟
إزاحة X تحرك الظل يمين الحروف أو يسارها، وإزاحة Y تحركه أعلى أو أسفل، ونصف قطر الضبابية يلطف حوافه: الصفر يعطي حافة حادة كما في نمطي الريترو والمحدد، والقيم الأكبر تنشر اللون كتوهج.
كيف أُنشئ تأثير توهج النيون؟
استخدم نمط النيون الجاهز أو اضبط عدة طبقات بإزاحة صفرية وبنفس اللون المشرق مع قيم ضبابية متزايدة، مثل 0 0 3px ثم 0 0 8px ثم 0 0 20px. الهالات المتراكبة تحاكي ضوء أنبوب النيون.
هل يؤثر text-shadow على أداء العرض؟
طبقات ثابتة قليلة تكلفة منخفضة، لكن النص الكثير الظلال شديدة الضبابية أثقل في إعادة الرسم. تطبيق ظلال ثقيلة على فقرات طويلة أو تحريك text-shadow باستمرار قد يسبب تقطع الإطارات على الأجهزة الضعيفة والجوال؛ فضلًا استخدمه للعناوين القصيرة وبقيم ضبابية معتدلة أو حرّك الشفافية بدلًا منه.
كيف أجعل الظل شبه شفاف؟
لكل طبقة شريط شفافية يحول اللون المختار إلى صيغة rgba مثل rgba(0, 0, 0, 0.5). تندمج الظلال شبه الشفافة مع أي خلفية، وهو ما يعتمده نمط الورقي لإحساس الطباعة البارزة الناعم.
ما الفرق بين text-shadow وbox-shadow؟
تُطبق text-shadow على شكل حروف النص وليس لها قيم انتشار أو ظل داخلي، بينما تحيط box-shadow بالصندوق المستطيل لأي عنصر. تشتركان في صيغة الإزاحة والضبابية لكن كلًا منهما لا يعوض الآخر.
ما المتصفحات التي تدعم text-shadow؟
تدعم جميع المتصفحات الحديثة text-shadow بما فيها Chrome وFirefox وSafari وEdge وOpera، وقد استقر دون بادئات منذ أكثر من عشر سنوات. تعمل الظلال متعددة الطبقات بنفس الطريقة في كلها.
هل يُرفع ما أكتبه إلى خادم؟
لا. يبقى نص المعاينة وكل الطبقات التي تضبطها داخل متصفحك، ويُولَّد كود CSS محليًا في الصفحة. لا يُرسل شيء عبر الشبكة، لذا تعمل الأداة دون اتصال بعد تحميلها.
كيفية استخدام مولد ظل النص CSS
صمّم ظلال نص CSS برصّ الطبقات بدلًا من تخمين إزاحة واحدة. يُعرض كل تغيير على نص معاينة كبير حي، ويُولَّد كود CSS محليًا في متصفحك.
- اكتب كلماتك الخاصة في حقل «نص المعاينة» لتجربة الأثر على نص حقيقي.
- جرّب نمطًا جاهزًا: النيون، الورق، ثلاثي الأبعاد، الريترو، التوهج، أو الحدود يحمّل طبقات جاهزة.
- اضبط لكل طبقة إزاحة X وإزاحة Y وضبابية ولونًا وشفافية بأشرطتها.
- استخدم «إضافة طبقة» لرصّ مزيد من الظلال، أو أزل علامة عن طبقة لتعطيلها، أو احذفها بأيقونة الحاوية.
- انسخ قاعدة text-shadow الناتجة وألصقها في ورقة الأنماط لديك.
تظهر توهجات النيون بأفضل حال مع ثلاث أو أربع طبقات من اللون نفسه وضبابية متزايدة — أبقِ الإزاحات صفرًا ودع الضبابية تقوم بالعمل.
أدوات ذات صلة
- مولد ظل الصندوق CSS مولد ظل الصندوق CSS مجاني عبر الإنترنت. أنشئ ظلالاً جميلة بصريًا مع إزاحة وضبابية وانتشار ولون وظل داخلي قابلة للتعديل. معاينة مباشرة ونسخ فوري للكود.
- مولد تدرجات CSS أنشئ تدرجات CSS مذهلة بصريًا. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط ألوان متعددة وزوايا ومواضع مخصصة. انسخ كود CSS الجاهز للإنتاج فورًا.
- مولّد الخطوط المزخرفة مولد خطوط مزخرفة مجاني بـ 28 نمطًا يونيكود. أنشئ نصًا عريضًا ومائلًا وقوطيًا وفي دوائر لنبذات انستغرام وتيك توك وواتساب وأسماء الألعاب، وانسخه بنقرة واحدة.
- مولد الحواف الدائرية الإبداعية مولد حواف دائرية إبداعي مجاني عبر الإنترنت. اسحب المقابض الثمانية أو اختر شكلًا جاهزًا لإنشاء أشكال CSS عضوية ونسخ الكود فورًا.
- محول الألوان محول ألوان مجاني عبر الإنترنت. تحويل فوري لتنسيقات HEX و RGB و HSL و HSV مع منتقي بصري. 100% خاص، يعمل في متصفحك.
- مولد التخفيف CSS مولد التخفيف في CSS مجاني عبر الإنترنت. اسحب نقطتي تحكم cubic-bezier على منحنى تفاعلي، واختر من بين 18 نمطًا جاهزًا، وشاهد معاينة بحركة كرة متكررة، وانسخ دالة التوقيت فورًا.
- مولد clip-path في CSS مولد clip-path في CSS مجاني عبر الإنترنت. صمم أشكال polygon وcircle وellipse وinset بنقاط قابلة للسحب، مع معاينة مباشرة ونسخ كود CSS بنقرة واحدة.
- مجمّل CSS نسق وجمّل كود CSS فوراً. حوّل CSS المضغوط إلى كود مقروء ومنسق جيداً مع خيارات قابلة للتخصيص.