Text Shadow Generator
CSS text shadow
CSS text shadow يعمل محليا في المتصفح الخاص بك
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
يقوم Text Shadow Generator بتعيين الإزاحة والتعتيم واللون والتعتيم للظل خلف النص، من خلال معاينة مباشرة وCSS. على عكس مربع الظل، ليس له قيمة انتشار، مما يلفت انتباه الناس: الطريقة الوحيدة لجعل ظل النص أثقل هو تكديس عدة ظلال في إعلان واحد. إنه مفيد للغاية للوضوح، حيث يتم وضع ظل داكن خفيف خلف النص الفاتح في الصورة الفوتوغرافية، ولا ينبغي أبدًا أن يكون هو الشيء الذي يجعل النص قابلاً للقراءة، لأنه يختفي في اللحظة التي تتغير فيها الخلفية.
Where people use the
- إضافة ظل خفيف حتى تتم قراءة التسمية التوضيحية فوق الصورة.
- عمل تأثير رأس مضغوط أو محفور.
- إنتاج معالجة النص الرجعية أو النيون.
- اختبار مدى ثقل الظل قبل أن يبدو رخيصًا.
How to use the
- 1
تعيين الإزاحات
يتحرك الإزاحة X إلى اليمين، ويتحرك الإزاحة Y إلى الأسفل. تتم قراءة إزاحة بكسل واحد أو اثنين على أنها عمق؛ أي شيء أكبر يبدأ في الظهور مثل الظل المسقط.
- 2
ضبط التمويه
طمس يخفف الحافة. يعطي الصفر نسخة ثابتة من النص، وهذه هي الطريقة التي يتم بها إنشاء تأثيرات المخطط التفصيلي والرجعي.
- 3
اختر اللون والتعتيم
النص الغامق على الخلفيات الفاتحة يريد ظلًا فاتحًا والعكس صحيح. أبقِ العتامة منخفضة إلا إذا كنت تريد تأثيرًا واضحًا.
- 4
انسخ ملف CSS
تتضمن القاعدة لون rgba، جاهزًا للصق.
- 5
كومة الظلال إذا كنت بحاجة إلى المزيد من الوزن
أضف ظلًا ثانيًا مفصولاً بفاصلة في ورقة الأنماط الخاصة بك. هذه هي الطريقة الوحيدة لزيادة سماكة ظل النص، حيث لا يوجد انتشار.
النصائح وأفضل الممارسات
- الأقل هو أكثر: بكسل واحد أو اثنتين بعتامة منخفضة يتغلب على الضبابية الشديدة.
- لا تعتمد أبدًا على الظل وحده لسهولة الوصول؛ إصلاح التباين تحتها.
- تذكر أن الخاصية موروثة، لذا قم بتوسيع نطاقها إلى العنصر الذي تقصده.
الأسئلة المتداولة
لماذا لا توجد قيمة انتشار؟
لأن ظل النص لا يدعم واحدًا. بناء الجملة الخاص به هو إزاحة X، وإزاحة Y، وطمس ولون فقط. لمحاكاة الانتشار، عليك تكديس عدة ظلال متطابقة مع إزاحات مختلفة قليلاً.
هل يمكنني استخدامه لجعل النص قابلاً للقراءة فوق الصورة؟
فقط كملحق. يساعد الظل على الهوامش ولكنه يفشل في المناطق المزدحمة، ولا يتم احتسابه ضمن نسبة تباين WCAG، التي يتم قياسها مقابل لون الخلفية. أضف سكريمًا أو لوحة صلبة إذا كانت الوضوح أمرًا مهمًا حقًا.
كيف أحدد النص؟
قم بتجميع أربعة ظلال عند بكسل واحد زائد أو ناقص في كل اتجاه مع عدم وضوح أي شيء. ينتج عن ذلك تأثير المخطط التفصيلي دون الحاجة إلى -webkit-text-stroke، وهو غير مدعوم في كل مكان.
هل يؤدي ذلك إلى إبطاء الصفحة؟
ظل ثابت واحد لا يكلف شيئًا تقريبًا. إن تحريك ظل النص، أو تطبيق ظل كبير غير واضح على جزء كبير من النص، هو المكان الذي تظهر فيه تكلفة إعادة الرسم.
هل يتم توريثها عن طريق العناصر الأبناء؟
نعم. يتم توريث ظل النص، لذا فإن تعيينه على حاوية يطبقه على كل فرع يحتوي على نص، وهو ما يكون مفاجئًا في بعض الأحيان.