خاصية ظل النص text-shadow

الصياغة

.over-image { text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.neon { text-shadow: 0 0 12px #7c5cff, 0 0 32px #7c5cff; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .hero { background: linear-gradient(120deg, #22d3ee, #7c5cff); padding: 18px; border-radius: 12px; }
  .hero p { color: white; font-size: 22px; font-weight: bold; margin: 4px 0; }
  .shadowed { text-shadow: 0 2px 6px rgb(0 0 0 / 0.55); }
</style>
<div class="hero">
  <p>نص بلا ظل — يذوب في الخلفية</p>
  <p class="shadowed">نص بظل — قراءة مضمونة فوق أي صورة</p>
</div>

أهم القيم

💡 نصائح عملية

• فوق صور المستخدمين المتغيرة: ظل نص + تعتيم تدرجي على الصورة = تأمين مزدوج
• توهج علامة أنيق: لون العلامة بشفافية بدل الأبيض الصارخ

⚠️ أخطاء شائعة

• ظلال ثقيلة على نصوص قراءة عادية — ضجيج بلا وظيفة
• الاعتماد عليه وحده لتباين نص أساسي — إن أطفأه المتصفح ضاع النص

خصائص ذات صلة