تعمل خاصية text-shadow في CSS2 على تسهيل إضافة الظلال إلى النص في صفحات الويب، ولكن حتى الآن لا يدعمها سوى Safari على نظام التشغيل OS X. واليوم، سنقوم بإنشاء تأثيرات ظل النص في CSS للمتصفحات الأخرى، بما في ذلك Firefox اجتياز التحقق W3.
تسمح لك خاصية text-shadow، والتي تمت مناقشتها منذ سنوات، بالتحكم في اللون، والإزاحة، وطمس الظلال على عناصر الصفحة. على الرغم من أنها غير مدعومة على نطاق واسع حتى الآن، إلا أن بعض المصممين بدأوا في اتخاذ قرار باستخدام خاصية text-shadow في CSS. خاصية الظلال في كل مكان. على الرغم من أن هذا مصمم فقط لتحسين الوظائف لعدد صغير من المستخدمين.
فيما يلي مثال على ذلك. عند استخدامه، انتبه إلى الموضع: نسبة إلى a والموضع: نسخة عادية للعرض المطلق إلى الحافظة؟
<نمط>
ul,li{ هامش: 0px الحشو: 0px;نوع نمط القائمة: لا شيء;}
#nav{font-family: Verdana، "宋体"، Arial؛}
#nav li{ float:left;
# التنقل تمتد {عرض: لا شيء؛}
#nav a{font-size:12px;font-weight: غامق;اللون: #FF6600;زخرفة النص: لا يوجد عرض:block;}
#nav a:hover{ color:#999;top:1px left:1px;}
#nav a:hoverspan{ Display:block; top:-2px;
</نمط>
<
نمط>
ul,li{ هامش: 0px الحشو: 0px;نوع نمط القائمة: لا شيء;}
#nav{font-family: Verdana، "宋体"، Arial؛}
#nav li{ float:left;
# التنقل تمتد {عرض: لا شيء؛}
#nav a{font-size:12px;font-weight: غامق;اللون: #FF6600;زخرفة النص: لا يوجد عرض:block;}
#nav a:hover{ color:#999;top:1px left:1px;}
#nav a:hoverspan{ Display:block; top:-2px;
</style>هل ترغب في عرض نسخة عادية على نسخة الحافظة؟
<div معرف = "التنقل">
<ul>
<li><a href="#">الصفحة الرئيسية لموقع الويب<span>الصفحة الرئيسية لموقع الويب</span></a></li>
<li><a href="#">الصفحة الرئيسية لموقع الويب<span>الصفحة الرئيسية لموقع الويب</span></a></li>
<li><a href="#">الصفحة الرئيسية لموقع الويب<span>الصفحة الرئيسية لموقع الويب</span></a></li>
<li><a href="#">الصفحة الرئيسية لموقع الويب<span>الصفحة الرئيسية لموقع الويب</span></a></li>
<li><a href="#">الصفحة الرئيسية لموقع الويب<span>الصفحة الرئيسية لموقع الويب</span></a></li>
</ul>
</div>