كيفية استخدام ظل النص CSS: شرح تأثيرات التوهج والمخطط التفصيلي والثلاثي الأبعاد والنقش

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

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

ليرة تركية؛DR: text-shadow يأخذ قائمة ظلال مفصولة بفواصل، كل منها مكتوب كـ offset-x offset-y blur-radius color. الظل الأول في القائمة يرسم في الأعلى. ليس لها قيمة انتشار ولا inset الكلمة الرئيسية، على عكس box-shadow. التوهج عبارة عن عدة ظلال ذات إزاحة صفرية مع ضبابية متزايدة، والخطوط العريضة عبارة عن أربعة ظلال صلبة بحجم بكسل واحد، والنص ثلاثي الأبعاد عبارة عن مجموعة من الظلال الصلبة كل بكسل أبعد. ال مولد الظل النصي Toolz يبنيها باستخدام أشرطة التمرير وثمانية إعدادات مسبقة، من جانب العميل، مجانًا، بدون تسجيل.

ما هي خاصية الظل النصي CSS؟

ال text-shadow ترسم الخاصية ظلًا واحدًا أو أكثر خلف الحروف الرسومية لنص العنصر &#39؛s. تم تعريفه في W3C وحدة تزيين النص CSS المستوى 3، وقيمتها إما none أو قائمة ظلال مفصولة بفواصل.

يتكون كل ظل من أربعة أجزاء:

جزء	مطلوب	ماذا يفعل	القيم المسموح بها
إزاحة أفقية	نعم	يحرك الظل إلى اليمين (إيجابي) أو إلى اليسار (سلبي)	أي طول، على سبيل المثال 2px، -0.1em
إزاحة عمودية	نعم	يحرك الظل إلى الأسفل (إيجابي) أو إلى الأعلى (سلبي)	أي طول
طمس نصف القطر	لا، الافتراضي ل 0	يخفف الحافة؛ أكبر يعني ضبابية	صفر أو طول موجب. السلبي غير صالح
لون	لا، الافتراضي ل currentColor	لون الظل، بما في ذلك الشفافية	أي لون CSS

يمكن أن يذهب اللون أولاً أو أخيرًا. text-shadow: #000 1px 1px و text-shadow: 1px 1px #000 هي نفس الظل. إذا تركت اللون خارجًا، فإن الظل يأخذ اللون الخاص بالنص &#39؛، وهو نادرًا ما تريده للحصول على ظل منسدل ولكنه مفيد للتوهج السريع في لون النص.

الظل لا يغير التخطيط أبدًا. لا يدفع العناصر المجاورة بعيدًا أو ينمو مربع العنصر &#39؛s، لذلك يمكن أن ينسكب التمويه الكبير خارج الصندوق ويتم قطعه بواسطة أحد الوالدين overflow: hidden.

كيف يختلف ظل النص عن ظل الصندوق؟

text-shadow يتبع شكل كل حرف، بينما box-shadow يتبع مستطيل العنصر &#39؛s border box. هذا هو الفرق العملي، وهو الذي يقرر أيهما تصل إليه. القواعد تختلف أيضا.

ميزة	text-shadow	box-shadow
شكل الظل	كل مخطط رسومي	العنصر &#39؛s، بما في ذلك الزوايا الدائرية
انتشار نصف القطر	غير متوفر	نعم الطول الرابع
inset الكلمة الرئيسية	غير متوفر	نعم
طبقات متعددة	نعم مفصولة بفواصل	نعم مفصولة بفواصل
ترتيب الطلاء	أول مدرج في الأعلى	أول مدرج في الأعلى
اللون الافتراضي	currentColor	currentColor
الاستخدام النموذجي	العناوين والشعارات والوضوح على الصور	البطاقات والأزرار والارتفاع

قيمة الانتشار المفقودة هي السبب في أن الخطوط العريضة للنص تحتاج إلى أربعة ظلال بدلاً من واحد. مع box-shadow يمكنك الكتابة 0 0 0 2px black لتنمية حلقة صلبة. مع النص لا توجد طريقة لتوسيع الحرف الرسومي، لذلك تقوم بتزييفه عن طريق موازنة النسخ في عدة اتجاهات. إذا كنت تقوم بتصميم الحاوية بدلاً من الكلمات، فإن دليل مولد الظل الصندوقي يغطي طبقات الانتشار والإدخال والارتفاع.

كيف تعمل طبقات ظلال النص المتعددة؟

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

هذا الترتيب مهم عندما تتداخل الطبقات. قارن بين هذين التصريحين

/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;

/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;

في الأول، تظل النسخة السوداء الواضحة حادة ويجلس الضباب الأصفر خلفها. وفي الثانية، يغسل التوهج الأصفر فوق النسخة السوداء ويخففها. نفس الظلال، مظهر مختلف.

يتبع المولد نفس القاعدة. الطبقة الأولى في علامات تبويب الطبقة هي الظل الأول في الإخراج، لذلك يتم رسمها في الأعلى. إضافة طبقة تلحقها بنهاية القائمة، خلف الطبقات الأخرى. لتحريك الطبقة للأمام، يمكنك حذفها وإعادة إنشائها، أو تحرير CSS المنسوخ يدويًا.

ما هي القيم التي يكتبها مولد Toolz؟

ال مولد الظل النصي يمنح كل طبقة خمسة عناصر تحكم ويكتب إعلانًا بتنسيق ثابت. تساعد معرفة هذا التنسيق عند لصق النتيجة في قاعدة بيانات ذات اصطلاحاتها الخاصة.

يتحكم	يتراوح	خطوة	مكتوب كما
الإزاحة X	-50 بكسل إلى 50 بكسل	1px	Npx
إزاحة Y	-50 بكسل إلى 50 بكسل	1px	Npx
طمس	0px إلى 100px	1px	Npx، بما في ذلك 0px
لون	منتقي الألوان	-	سداسي عشري مكون من 6 أرقام
التعتيم	0% إلى 100%	1%	تمت إضافته كرقمين سداسيين بعد اللون

يتم طي العتامة في اللون كقيمة سداسية مكونة من 8 أرقام، بعد وحدة الألوان CSS المستوى 4 تدوين سداسي عشري. الرقمان الأخيران هما قناة ألفا بمقياس من 0 إلى 255، لذا تقوم الأداة بضرب العتامة في 255، وتقريبها، وتحويلها إلى سداسي عشري.

وإليك كيف يتم ذلك بالنسبة لبعض العتامات

منزلق العتامة	مرات 255	مدور	عرافة ألفا	لون المثال
100%	255	255	ff	#000000ff
90%	229.5	230	e6	#4466eee6
70%	178.5	179	b3	#4466eeb3
60%	153	153	99	#00000099
35%	89.25	89	59	#00000059
25%	63.75	64	40	#00000040

يقرأ كل متصفح حالي شكل سداسي عشري مكون من 8 أرقام. إذا كان يجب عليك دعم متصفح قديم جدًا، فأعد كتابة اللون كـ rgba() بعد النسخ: #00000099 يصبح rgba(0, 0, 0, 0.6).

تقبل الأداة إدخال شريط التمرير والمنتقي فقط، لذا تكون القيم عبارة عن وحدات بكسل كاملة. للظل المقاس بـ em، والذي يتم قياسه بحجم الخط، انسخ CSS وقم بتبديل الوحدات في ورقة الأنماط الخاصة بك. أ 2px الإزاحة على النص الأساسي 16px هي 0.125em.

كيف يمكنك إنشاء تأثير نص متوهج النيون؟

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

يفتح المولد على جهاز Neon Glow المحدد مسبقًا، والذي ينتج هذا

text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;

ثلاث طبقات، يتضاعف التمويه في كل مرة (7، 14، 28)، وتنخفض العتامة من 100% إلى 90% إلى 70%. تمنح الطبقة الضيقة مقاس 7px الحروف نواة مشرقة، والطبقة مقاس 28px تنشر اللون. على خلفية داكنة مع نص أبيض يُقرأ هذا على شكل أنبوب مضاء. على خلفية فاتحة يختفي معظم التأثير، ولهذا السبب تحتوي المعاينة على تبديل Light bg / Dark bg: تحقق من كليهما قبل شحن التوهج إلى موقع باستخدام مفتاح السمة.

لجعل التوهج أقوى، أضف طبقة رابعة عند طمس 56 بكسل أو كرر طبقة 7 بكسل مرتين. يؤدي تكرار الطبقة إلى تكديس عتامةها ويجعل القلب أكثر كثافة دون توسيعه.

كيف يمكنك تحديد النص باستخدام ظل النص؟

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

يكتب المخطط التفصيلي المسبق:

text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;

يعمل هذا بشكل جيد عند بكسل واحد. عند نقطتين أو ثلاث بكسلات تبدأ الفجوات في الظهور عند نقاط منتصف المنحنيات والحواف المستقيمة، لأن النسخ الأربع تغطي الأقطار فقط. للحصول على مخطط أكثر سمكًا، أضف أربع طبقات أخرى على المحاور المستقيمة (0 -2px، 2px 0، 0 2px، -2px 0) إذن ثماني نسخ تحيط بكل حرف.

هناك بديل غير الظل. -webkit-text-stroke يرسم خطًا حقيقيًا على طول مسار الصورة الرمزية ويدعمه المتصفحات الحالية على الرغم من البادئة الخاصة به. يتم توسيطه على المخطط التفصيلي، لذلك يتم تناوله بأحرف رفيعة، ويتم تحديده في معيار توافق WHATWG بدلاً من وحدة CSS. بالنسبة للمخططات التفصيلية الصغيرة والواضحة على نص العرض، تظل خدعة الظلال الأربعة هي الخيار الأكثر قابلية للتنبؤ بها.

كيف يمكنك إنشاء نص ثلاثي الأبعاد أو مقذوف؟

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

الإعداد المسبق الرجعي ثلاثي الأبعاد:

text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;

تقوم ثلاث طبقات برتقالية ببناء قذف ثلاثي البكسل، والطبقة السوداء الرابعة بنسبة عتامة 25% تقع بكسلًا واحدًا بعيدًا كظل اتصال يثبت الحروف. للحصول على قذف أعمق، استمر في إضافة طبقات برتقالية بإزاحات 4 و5 و6 وحرك الطبقة الداكنة إلى النهاية. تعد اثنتا عشرة طبقة لقذف 12 بكسل أمرًا طبيعيًا بالنسبة لرأس البطل الكبير.

يستخدم الإعداد المسبق لـ Long Shadow نفس الفكرة مع الفجوات وعتامة التلاشي

text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;

تنمو الإزاحات (1، 3، 6، 10) بينما تنخفض العتامة (20%، 15%، 10%، 6%)، وبالتالي فإن الظل يتدفق قطريًا بدلاً من تشكيل كتلة صلبة.

ما هي وصفة ظل النص التي تناسب أي تأثير؟

فيما يلي جميع الإعدادات المسبقة الثمانية في المولد، مع الفكرة وراء كل منها حتى تتمكن من تكييفها.

تعيين مسبق	طبقات	الإزاحات	طمس	فكرة
ناعم	1	0، 2px	4px	ظل منخفض خفي بنسبة 35% أسود، آمن لمعظم العناوين
صعب	1	2px، 2px	0	نسخة أوفست واضحة باللون الأسود بنسبة 60%، بمظهر طباعة مسطحة
توهج النيون	3	0، 0	7، 14، 28 بكسل	نفس اللون، ضبابية متزايدة، للضوء على الظلام
الرجعية 3D	4	قطري من 1 إلى 4px	0	نسخ ورقية متدرجة بالإضافة إلى ظل اتصال خافت
الخطوط العريضة	4	+/-1px الأقطار	0	أربع نسخ تتبع حافة الصورة الرمزية
نقش	2	-1px/-1px و1px/1px	0	تسليط الضوء على اللون الأبيض من أعلى اليسار، والظل الداكن من أسفل اليمين
نار	3	0، -1 / -2 / -4px	4، 10، 18 بكسل	أصفر إلى برتقالي إلى أحمر، يرتفع للأعلى
الظل الطويل	4	1، 3، 6، 10 بكسل قطري	0	الفجوة المتزايدة، وتلاشي العتامة

النقش هو الشخص الذي أخطأ الناس في قراءته. فهو يجمع بين الظل الفاتح لأعلى وإلى اليسار مع الظل الداكن لأسفل وإلى اليمين، والذي يحاكي الضوء من أعلى اليسار الذي يضرب الحروف البارزة. قم بتبديل اللونين وسيبدو النص مضغوطًا في الصفحة بدلاً من ذلك، وهو تأثير الحروف الكلاسيكي. كلاهما يعمل فقط عندما يكون لون النص قريبًا من لون الخلفية؛ في النص عالي التباين تختفي النقاط البارزة.

النار هي الإعداد المسبق الوحيد الذي يحتوي على إزاحات رأسية سلبية. تتحرك كل طبقة للأعلى وتصبح أكثر ضبابية واحمرارًا، لذلك يبدو أن الحرارة ترتفع عن الحروف.

هل يضر ظل النص بسهولة القراءة أو إمكانية الوصول؟

يمكن ذلك، ويزداد الخطر مع التمويه والإزاحة. لا يغير الظل نسبة التباين التي يقيسها WCAG، والتي يتم حسابها بين لون النص ولون الخلفية. ال WCAG 2.1 الحد الأدنى للتباين يطلب 4.5:1 للنص العادي و3:1 للنص الكبير، والتوهج لا يساعدك على تلبية ذلك على الورق.

من الناحية العملية، فإن الظل الداكن الرقيق خلف النص الفاتح في صورة مزدحمة يجعل من السهل انتقاء الحروف، لأنه يفصل حواف الحروف الرسومية عن الصورة. التوهج الثقيل على النص الصغير يفعل العكس: فالهالة تملأ عدادات الحروف مثل &quot؛e&quot؛ و&quot؛a&quot؛ وتتحول الكلمة إلى الهريسة.

بعض الإرشادات التي تصمد:

1. حافظ على ظلال نص الجسم دقيقة. شيء مثل 0 1px 2px rgba(0, 0, 0, 0.3) كثير.
2. احفظ التأثيرات متعددة الطبقات لنص العرض الكبير، بمعدل 32 بكسل تقريبًا وما فوق.
3. تحقق من التأثير على الخلفيات الفاتحة والداكنة إذا كان موقعك يحتوي على مفتاح تبديل السمات.
4. لا تعتمد على الظل لإنقاذ التباين المنخفض. إصلاح لون النص أولا.
5. اختبر أصغر حجم يصل إليه العنوان على الهاتف، حيث يكون الظل أكبر نسبيًا.

ما الذي يبطئ تظليل النص، وما هي الأخطاء الشائعة؟

التمويه هو الجزء الباهظ الثمن. يجب تنقيط كل طبقة غير واضحة وعدم وضوحها عند كل إعادة طلاء، ومقاييس التكلفة مع نصف قطر التمويه وكمية النص. ال مرجع MDN لظل النص يغطي بناء الجملة. من السهل التفكير في جانب الأداء: التوهج ثلاثي الطبقات على عنوان واحد رخيص، ونفس التوهج في كل فقرة من مقالة طويلة، والتي يتم إعادة طلاؤها أثناء التمرير، هو مصدر شائع للاندفاع على الهواتف منخفضة الطاقة.

الأخطاء التي تظهر مرارا وتكرارا:

خطأ	أعراض	يثبت
كتابة قيمة انتشار مثل 0 0 4px 2px red	يتم تجاهل الإعلان بأكمله	إزالة الطول الرابع؛ ظل النص ليس له انتشار
إضافة inset	تم تجاهل الإعلان	غير مدعوم على النص؛ استخدم نقشًا أخف بدلاً من ذلك
طمس سلبي، على سبيل المثال -2px	تم تجاهل الإعلان	يجب أن يكون التمويه صفرًا أو موجبًا
الفواصل المفقودة بين الطبقات	تم تجاهل الإعلان، ولا شيء يقدم	افصل كل ظل بفاصلة
توهج مقطوع عند الحواف	قطع هالة في خط مستقيم	الوالدين لديه overflow: hidden؛ أضف الحشو
توهج غير مرئي	يبدو أن لا شيء يحدث	توهج الضوء على خلفية فاتحة؛ اختبار على الظلام
بادئة البائع -webkit-text-shadow	غير ضارة ولكن عديمة الفائدة	استخدم عاديًا text-shadow؛ لا يحتاج إلى بادئة

الثلاثة الأولى تستحق التأكيد. جزء واحد غير صالح يبطل الإعلان بأكمله، وليس تلك الطبقة فقط، لذا فإن الخطأ المطبعي في الطبقة الرابعة من تأثير ثلاثي الأبعاد مكون من اثني عشر طبقة يزيل كل الاثني عشر. يكون إخراج المولد &#39؛s صالحًا دائمًا، وهو أحد أسباب إنشاء المكدس هناك ولصقه.

متى يجب عليك استخدام المولد بدلاً من كتابة ظل النص يدويًا؟

الظل الناعم الواحد أسرع في الكتابة من النقر. أي شيء يحتوي على ثلاث طبقات أو أكثر يكون أسرع في البناء بصريًا، لأنك تحكم على المظهر، ومن الصعب الحكم على المظهر من الأرقام. يعد المولد مفيدًا أيضًا للتعلم: اختر إعدادًا مسبقًا، وقم بتغيير طبقة واحدة، وشاهد أي جزء من التأثير يتحرك.

يعمل مولد Toolz بالكامل في المتصفح. يتم حساب المعاينة وقائمة الطبقات وCSS على الصفحة، ولا يتم تحميل أي شيء، ويستمر في العمل دون اتصال بالإنترنت بمجرد تحميله. إنه مجاني، لا يوجد تسجيل. يتم احتساب نسخ CSS مقابل بدل الاستخدام اليومي، مثل الأدوات الأخرى الموجودة على الموقع؛ التحرير والمعاينة ليسا كذلك.

ما لا يفعله: ليس له em أو rem الوحدات، ولا توجد حقول أرقام مكتوبة، ولا يوجد سحب لإعادة ترتيب للطبقات، ولا يوجد خط مخصص في المعاينة. بالنسبة لهؤلاء، انسخ الإعلان واضبطه في ورقة الأنماط الخاصة بك أو أدوات تطوير المتصفح.

إذا كان التأثير الذي تريده هو عنصر غير واضح أو معاد تلوينه وليس ظلًا مرشحات CSS مثل drop-shadow() و blur() تنطبق على العناصر بأكملها، بما في ذلك الصور. اللوحات المتجمدة خلف النص هي مهمة لـ مولد التشكل الزجاجي، والأزرار المبثوقة الناعمة تنتمي إلى مولد نيومورفيسم. المجموعة الكاملة من بناة CSS المرئية موجودة على محور أدوات CSSو ال دليل مولد التدرج CSS يتناسب جيدًا مع تأثيرات النص عندما تريد خلفية متدرجة خلف عنوان متوهج.

مثال عملي: عنوان بطل يمكن قراءته فوق الصورة

لنفترض أن لديك نصًا أبيض مقاس 64 بكسل فوق صورة شاطئ مشرقة وأن الحروف تستمر في الاختفاء في الرمال. الهدف هو الوضوح أولاً، والأسلوب ثانياً.

ابدأ في أداة ظل النص مع الإعداد المسبق الناعم: 0px 2px 4px #00000059. على صورة مزدحمة باهتة جدًا. ارفع العتامة إلى 60% ثم قم بالغمى عليها إلى 8px، مما يعطي 0px 2px 8px #00000099. الحواف منفصلة عن الخلفية، لكن الخطوط الرفيعة لا تزال تومض.

أضف طبقة ثانية بإزاحة صفر، وطمس 2px و50% أسود: 0px 0px 2px #00000080. لأنك أضفته ثانيًا، فإنه يرسم خلف الطبقة الأولى، لكنه يعانق حافة الصورة الرمزية ويعطي كل ضربة حافة داكنة رفيعة. النتيجة:

.hero-title {
  color: #fff;
  font-size: 64px;
  text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}

طبقتان، كلاهما رخيص العرض، والعنوان يحمل الرمال والسماء وركوب الأمواج. على الهاتف الذي ينخفض فيه العنوان إلى 36 بكسل، تكون قيم البكسل نفسها أثقل نسبيًا؛ التحويل إلى em يبقيهم في الخطوة (0 0.03em 0.125em عند 64px).