فلنبدأ

خاصية Text-shadow ثم إضافتها في Css3 و هي تتيح لك إضافة ظل أو أكثر من ظل للنصوص .

بناء الجملة

• مسافية افقية و مسافة رأسية : يمكن ان يحمل قيم سالبة أو موجبة كما يمكن أن يحمل القيمة صفر .
• blur radius : و هي درجة تشتتت الظل مثلا صفر سيعطيك ظل حاد أو محدد أما القيمة ١٠ ستظهر ظل مشتت او غير معروف الأطراف ( أنا أحاول و بشدة أن اصيغ هذا بالعربية هل تلاحظ ؟؟  )
• لون الظل : لو لم يتم تحديده فإن لون الظل سيكون بنفس لون النص .

دعم المتصفحات

• Opera 9.5+(استخدام color: transparent غير مدعوم )
• Firefox 3.5+
• Safari 1.0+
• Google Chrome

مثال

لمشاهدة مثال حي للأمثلة في الأسفل شاهد صفحة الامثلة .

١- نص مشع … و إشعاع مضاعف

للحصول على النص المشع

[html] .glow {

color:#FFFFFF ;

text-shadow:0 0 20px yellow ;

[/html]

للتجربة يمكنك اللعب بقيمة درجة التشتيت . لو تلاحظ ان هناك إشعاع حول النص لكنه ليس ذا كثافة عالية .يمكننا مضاعفة التأثير عن طريق استخدام text-shadow مرتين بقيم مختلفة .

[html] .extraGlow {

color:white;

text-shadow:0 0 30px yellow , 0 0 70px yellow ;

}
[/html]

2- نص على طريقة أبل

اشتهرت أبل بهذا التاثير على النصوص و هو ما يطلق عليه التأثير النظيف .

[html] .applestyle{

background:#666

color: #000;

text-shadow: 0px 1px 1px #fff;

}
[/html]

3- نص بارز Emboss على طريقة الفوتوشوب

[html] .Emboss {

background:#ccc ;

color:#ccc;

text-shadow: -1px -1px white, 1px 1px #333;

}
[/html]

هنا اضفنا ظلين احدهما في الأعلى على اليمين و الاخر في الاسفل على اليسار . مشكلة واحدة في هذ الـتأثير ان لون الخلفية و النص واحد لكن لون الظل هو ما سيظهر او يحدد هذا النص لكن لو كان المتصفح لا يدعم Text-shadow فإن النص لن يظهر .

٤- نص مغمور pillow emboss على طريقة الفوتوشوب

مرة أخرى أكثر من ظل

[html] .PillowEmboss {

background:#ccc;

color:#ddd;

text-shadow: 1px 1px white,

-1px -1px #444;

}
[/html]

5- نص مشتت

حصلت على هذه الحيلة من Simurai Website و هي حيلة ذكية بجعل لون النص شفاف و إضافة ظل مشتت.في المثال حددنا القيمة ١٠ لدرجة التشتيت لكن كلما زادت القيمة كان النص اقل وضوحا .

[html] .blurytext {

color: transparent;

text-shadow: #fff 0 0 10px;

}
[/html]

6- نص بارز أو مغمور لا أعرف ..

وجدت هذه الفكرة في StylizedWeb . هذا التأثير قد لا يكون كبيرا و لكن يضيف لمسة جميلة للنصوص .

[html] .insettext{

color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}
[/html]

لون النص ولون الخلفية واحد .

٧- نص محوط

سأعترف أن هذا التأثير ليس الأفضل فالخط المحيط لا يحيط بالنص بشكل كامل لكن قررت ان اشارككم الفكرة على أي حال

[html] .Stroke{

color:red;

font-weight: bold;

text-shadow: 1px 1px 0px #000,

-1px -1px 0px #000;

}
[/html]

قمت بإضافة ظلين حادين بدون تشتيت حيث قيمة التشتيت صفر و اضفت الظلين في اتجاهين متضادين .

٨- نص ثلاثي الأبعاد

اعجبتني هذه الفكرة كثيرا لا يمكنني ان افكر في الكثير من التطبيقات العملية لها لكنها اعجبتني و جربت استخدام الكثير من القيم و صاحب الفكرة يستخدمها في صفحتة بشكل جميل و بدون ان يبدو مبالغا فيه و جدت هذه الفكرة في Css-trick.

الفكرة تكمن باختصار بإضافة اكثر من ظل و تحريك كل ظل بمقدار واحد بمعنى الظل الاول سيكون في ٢ و ٢ و الظل الثاني سيكون في النقطة ٣ و ٣ و الرابع في ٤و ٤ و هكذا .

[html] .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);
}
[/html]

[note] ملاحظة
انا استخدم هذه المرة الخاصية RGBA لتحديد الالوان وهي أحد الافكار الجديدة التي سأتحدث عنها قريبا و لكن يمكن بالطبع وضع اللون كما في الطريقة العادية بواسطة مثلا #fffff او باستخدام اسم اللون مثلا White وهكذا .
[/note]