مولّد ظل النص CSS: طبقات ظل مع معاينة مباشرة

طريقة الاستخدام

اكتب نصك في النص التجريبي. تعرض المعاينة النص مع الظل، فتحكم على النتيجة بكلماتك أنت.
اضبط الإزاحة الأفقية (px) والإزاحة العمودية (px) والضبابية (px) للطبقة الأولى. والإزاحة العمودية الموجبة تنقل الظل إلى الأسفل.
اختر لون الظل والعتامة لكل طبقة، وأضف طبقات أخرى بـإضافة طبقة لتحصل على توهج أنعم.
انسخ تصريح CSS والصقه في قاعدة نصك.

كيف تُبنى القيمة

تأخذ خاصية text-shadow ظلاً واحداً أو قائمة من الظلال مفصولة بفواصل. ولكل ظل إزاحة أفقية وعمودية، ونصف قطر ضبابية يجوز حذفه، ولون يُكتب قبل الأطوال أو بعدها. وتعطي مواصفة CSS Text Decoration (باللغة الإنجليزية) القواعد النحوية. ويُرسم الظل الأول فوق الباقي، ومع عدم وجود ظل تكون القيمة none.

لا يملك ظل النص خاصية الانتشار (spread) كما في ظل الصندوق. ولا يكون نصف قطر الضبابية سالباً أبداً، وكلما كبرت الضبابية انتشر الظل على مساحة أوسع. وتُكتب العتامة قيمة ألفا للون rgba بمنزلتين عشريتين على الأكثر. والطول الصفري لا يحتاج إلى وحدة، لذلك تكتب الأداة 0.

text-shadow: الإزاحة-x الإزاحة-y الضبابية اللون، الإزاحة-x الإزاحة-y الضبابية اللون، ...

الطبقات وما يفحصه المحرر

يستخدم التوهج الناعم غالباً طبقتين أو ثلاثاً: ظل صغير داكن قريب من الحروف، وآخر أكبر وأفتح أبعد. ويسمح المحرر بـ8 طبقات على الأكثر، وإزاحات من -200 إلى 200 بكسل، وضبابية من 0 إلى 100 بكسل، وعتامة من 0 إلى 100 بالمئة.

ألوان المعاينة، أي لون النص والخلفية، للمعاينة فقط. فليست جزءاً من CSS، فالتصريح يعطي الظل وحده.

مثال محلول: ظل أسود تحت توهج أزرق

للطبقة الأولى إزاحة 0 و2 بكسل، وضبابية 4 بكسل، ولون أسود بعتامة 30 بالمئة. وللثانية لا إزاحة، وضبابية 12 بكسل، ولون الأزرق #3b82f6 بعتامة 50 بالمئة.

القيمة هي 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5)، والتصريح هو: text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);

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

ما الفرق بين الضبابية والطبقة الثانية؟

الضبابية تنعّم حافة ظل واحد، فيتلاشى على مساحة أوسع. أما الطبقة الثانية فتضيف ظلاً آخر له إزاحته ولونه وعتامته، ويمكن أن يُرسم في مكان مختلف عن الأول.

لماذا للإزاحات إشارة؟

الإزاحة الأفقية الموجبة تنقل الظل إلى اليمين، والسالبة إلى اليسار. والإزاحة العمودية الموجبة تنقله إلى الأسفل، فالظل الذي يقع تحت النص له قيمة موجبة.

هل يمكن أن يكون لظل النص انتشار؟

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

لماذا تختلف المعاينة عن صفحتي؟

تستخدم المعاينة النص التجريبي والحجم والألوان التي تضبطها هنا. وفي صفحتك يقع الظل على خطك وحجمك وخلفيتك، فافحص النتيجة في مكانها قبل أن تنتهي.

هل يُحفظ ما أكتبه أو يُرسل إلى خادم؟

لا. يُصنع النص التجريبي والمعاينة وCSS في متصفحك. ولا يُحفظ شيء ولا يُرسل إلى خادمنا، لذلك انسخ التصريح قبل أن تغادر الصفحة.

المصادر

آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.