Softonic

مولد ظل النص في CSS

خطوة 1 / 2
إنشاء CSS

ضبط إعلان text-shadow بالعين في DevTools ممكن، لكنه يتحوّل إلى تخمين بمجرد أن تحتاج إلى توهّج نيومورفي ناعم، أو ظل مزدوج بطابع ريترو، أو حدّ خارجي واضح بسماكة 1 بكسل على عنوان رئيسي. يتيح لك هذا المولّد ضبط إزاحة X وإزاحة Y ونصف قطر التمويه ولون RGBA، ونسخ سطر CSS جاهز للّصق.

كيفية بناء ظل النص

  1. 1

    تعيين الإزاحات

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

  2. 2

    اختر نصف قطر التمويه

    التمويه 0 يعطي حدًّا حادًّا واضحًا؛ والقيم الأعلى تجعل الظل يتلاشى تدريجيًا. عادةً ما تستخدم الظلال الناعمة تمويهًا بين 4 و12 بكسل.

  3. 3

    اختر لونًا

    استخدم سلسلة RGBA حتى تتمكن من ضبط العتامة. يعد `rgba(0,0,0,0.35)` خيارًا افتراضيًا آمنًا للعمق الدقيق على الخلفيات الفاتحة.

  4. 4

    انسخ الإعلان

    تُخرج الأداة `text-shadow: Xpx Ypx Blurpx color;`، ضعه في المحدِّد المطابق داخل ورقة الأنماط الخاصة بك.

وصفات ظل النص التي تبدو رائعة فعلًا

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

بطاقة مرجعية سريعة

التأثير الإعلان
عمق خفيف text-shadow: 0 1px 2px rgba(0,0,0,0.25);
ظل ناعم text-shadow: 0 4px 12px rgba(0,0,0,0.35);
حدّ خارجي 1 بكسل text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
ريترو مزدوج text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
توهج نيون text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

تركيب عدة ظلال

يقبل text-shadow قائمة مفصولة بفواصل. يرسمها المتصفح وفق خوارزمية الرسّام بترتيب ورودها في الشيفرة، فيقع آخر ظل في القائمة خلف الجميع. استخدم هذا لمحاكاة حدّ خارجي (أربعة ظلال حادة بسماكة 1 بكسل في الاتجاهات الأربعة) أو لبناء إحساس بالعمق عبر دمج ظل قريب حاد مع ظل بعيد منتشر.

متى يجب تخطي ظل النص

  • في النصوص الصغيرة جدًا، يجعل التمويه الذي يتجاوز 2 بكسل المحارف تبدو ملطّخة. يُفضَّل استخدام -webkit-font-smoothing وتباين أقوى.
  • في الرسوم المتحركة للعناوين الرئيسية الحسّاسة للأداء، تجنّب أكثر من ثلاثة ظلال متراكبة؛ فكل طبقة تُجبر المتصفح على إعادة تنقيط النص.
  • إذا احتجت إلى ظل بإزاحة ضيّقة على مسار معقّد (منحنيات أو دورانات)، ففكّر في استخدام <filter> من SVG مع feDropShadow بدلًا من ذلك؛ فهو يتبع حدود المحرف بدقة أكبر.

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

الإخراج عبارة عن طبقة ظل واحدة حسب التصميم. لطبقة التأثيرات، قم بتشغيل المولد عدة مرات وقم بتسلسل النتائج بفواصل - على سبيل المثال text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

يتبع text-shadow حدود محارف النص المعروض، بينما يتبع box-shadow مربع الحدود المستطيل للعنصر. يأخذان معاملات متشابهة لكنهما يُنقَّطان على أشكال مختلفة تمامًا.

تُنقِّط المتصفحات ظلال النص وفق شبكة بكسلات الجهاز. الظل ذو التمويه 0 على شاشة بكثافة 2x يُعرض في مواضع دون البكسل وقد يبدو ناعمًا قليلًا. رفع التمويه إلى 1 عادةً ما يعالج ذلك دون تغيير الوزن البصري.

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

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

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

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى