خاصية Text-shadow ثم إضافتها في Css3 و هي تتيح لك إضافة ظل أو أكثر من ظل للنصوص .
بناء الجملة
- مسافية افقية و مسافة رأسية : يمكن ان يحمل قيم سالبة أو موجبة كما يمكن أن يحمل القيمة صفر .
- blur radius : و هي درجة تشتتت الظل مثلا صفر سيعطيك
ظل حاد أو محدد أما القيمة ١٠ ستظهر ظل مشتت او غير معروف الأطراف ( أنا
أحاول و بشدة أن اصيغ هذا بالعربية هل تلاحظ ؟؟ 
)
- لون الظل : لو لم يتم تحديده فإن لون الظل سيكون بنفس لون النص .
دعم المتصفحات
- Opera 9.5+(استخدام color: transparent غير مدعوم )
- Firefox 3.5+
- Safari 1.0+
- Google Chrome
مثال
لمشاهدة مثال حي للأمثلة في الأسفل شاهد صفحة الامثلة .
١- نص مشع … و إشعاع مضاعف
للحصول على النص المشع
?
1
2
3
4
5
6
7
| .glow {
color:#FFFFFF ;
text-shadow:0 0 20px yellow ;
}
|
للتجربة يمكنك اللعب بقيمة درجة التشتيت . لو تلاحظ ان هناك إشعاع حول
النص لكنه ليس ذا كثافة عالية .يمكننا مضاعفة التأثير عن طريق استخدام
text-shadow مرتين بقيم مختلفة .
?
1
2
3
4
5
6
7
| .extraGlow {
color:white;
text-shadow:0 0 30px yellow , 0 0 70px yellow ;
}
|
2- نص على طريقة أبل
اشتهرت أبل بهذا التاثير على النصوص و هو ما يطلق عليه التأثير النظيف .
?
1
2
3
4
5
6
7
8
9
| .applestyle{
background:#666
color: #000;
text-shadow: 0px 1px 1px #fff;
}
|
3- نص بارز Emboss على طريقة الفوتوشوب
?
1
2
3
4
5
6
7
8
9
| .Emboss {
background:#ccc ;
color:#ccc;
text-shadow: -1px -1px white, 1px 1px #333;
}
|
هنا اضفنا ظلين احدهما في الأعلى على اليمين و الاخر في الاسفل على
اليسار . مشكلة واحدة في هذ الـتأثير ان لون الخلفية و النص واحد لكن لون
الظل هو ما سيظهر او يحدد هذا النص لكن لو كان المتصفح لا يدعم
Text-shadow فإن النص لن يظهر .
٤- نص مغمور pillow emboss على طريقة الفوتوشوب
مرة أخرى أكثر من ظل
?
1
2
3
4
5
6
7
8
9
10
11
| .PillowEmboss {
background:#ccc;
color:#ddd;
text-shadow: 1px 1px white,
-1px -1px #444;
}
|
5- نص مشتت
حصلت على هذه الحيلة من Simurai Website
و هي حيلة ذكية بجعل لون النص شفاف و إضافة ظل مشتت.في المثال حددنا
القيمة ١٠ لدرجة التشتيت لكن كلما زادت القيمة كان النص اقل وضوحا .
?
1
2
3
4
5
6
7
| .blurytext {
color: transparent;
text-shadow: #fff 0 0 10px;
}
|
6- نص بارز أو مغمور لا أعرف ..
وجدت هذه الفكرة في StylizedWeb . هذا التأثير قد لا يكون كبيرا و لكن يضيف لمسة جميلة للنصوص .
?
1
2
3
4
5
6
7
8
9
10
11
| .insettext{
color: #344251;
text-shadow: 1px 1px 0px #bad3ed;
font-weight: bold;
background:#bad3ed;
}
|
لون النص ولون الخلفية واحد .
٧- نص محوط
سأعترف أن هذا التأثير ليس الأفضل فالخط المحيط لا يحيط بالنص بشكل كامل لكن قررت ان اشارككم الفكرة على أي حال
?
1
2
3
4
5
6
7
8
9
10
11
| .Stroke{
color:red;
font-weight: bold;
text-shadow: 1px 1px 0px #000,
-1px -1px 0px #000;
}
|
قمت بإضافة ظلين حادين بدون تشتيت حيث قيمة التشتيت صفر و اضفت الظلين في اتجاهين متضادين .
٨- نص ثلاثي الأبعاد
اعجبتني هذه الفكرة كثيرا لا يمكنني ان افكر في الكثير من التطبيقات
العملية لها لكنها اعجبتني و جربت استخدام الكثير من القيم و صاحب الفكرة
يستخدمها في صفحتة بشكل جميل و بدون ان يبدو مبالغا فيه و جدت هذه الفكرة
في Css-trick.
الفكرة تكمن باختصار بإضافة اكثر من ظل و تحريك كل ظل بمقدار واحد بمعنى
الظل الاول سيكون في ٢ و ٢ و الظل الثاني سيكون في النقطة ٣ و ٣ و الرابع
في ٤و ٤ و هكذا .
?
1
2
3
4
5
6
7
8
9
| .effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}
|
.
ملاحظة
انا استخدم هذه المرة الخاصية RGBA لتحديد الالوان وهي أحد الافكار
الجديدة التي سأتحدث عنها قريبا و لكن يمكن بالطبع وضع اللون كما في
الطريقة العادية بواسطة مثلا #fffff او باستخدام اسم اللون مثلا White
وهكذا .
.
موضوع: تأثيرات مميزة للنصوص بواسطة Text-shadow و css3.. 
