نوشته هاي سايه دار توسط CSS

درست کردن سايه توسط نرم افزارهاي گرافيکي مانند فتوشاپ يا فايروورکس کار ساده اي ميباشد و احتمالا اکثر شما طريقه انجام اين کار رو بلد هستيد . اما نکته اينه که تا جايي که امکانش هست از حجم صفحات بکاهيم.
در اين خود آموز روش انداختي سايه براي متون و توسط کدهاي CSS رو آموزش خواهيم داد .
ابتدا از اين آدرس نتيجه کار رو مشاهده کنيد تا دقيقا بدونيد که قرار است چه کاري انجام دهيم : Demo
انجام اين کار بسيار ساده است و در زير توجهتون رو به اون جلب ميکنم :
کاري که در حقيقت انجام ميدهيم اين است که توسط آدرس دهي مطلق (absolute) 2 متن که اولي نقش نوشته اصلي و دومي نقشه سايه را برعهده خواهند گرفت با فاصله 2px از همديگر قرار ميدهيم .به کد زير که در صفحه html ما نوشته خواهد شد دقت کنيد :
1. <div id=“shadow”>
2. <span class=“firstlayer”>Text with shadow using CSS</span>
3. <span class=“secondlayer”>Text with shadow using CSS</span>
4. </div>
همانطور که مشاهده ميکنيد يک متن 2 بار و در قالب 2 کلاس مختلف و تحت آيدي shadow نوشته شده اند و هيچگونه عمل خاص ديگري بر روي متونمان انجام نداده ايم .کار اصلي ما بر روي CSS انجام خواهد پديرفت .
کاري که انجام ميدهيم اين است که به تگ text container(#shadow) آدرس دهي نسبي نسبت ميدهيم اينکار باعث خواهد شد تمامي المانهايي که در داخل تگ #shadow استفاده خواهند شد توسط آدرس دهي مطلق وابسته به تگ #shadow بشوند نه به تگ body
در مرحله بعد به کلاسهاي firstlayer و secondlayer موقعيت دهي مطلق ميکنيم با اين تفاوت که secondlayer به مقدار 2px پايينتر و به راست بيايد .
و در آخر احتياج داريم که مشخص اولويت کدام لايه بالاتر است که برروي ديگري قرار بگيرد .اين کار توسط دستور z-index انجام پذير است .با هم نگاهي به سورس مياندازيم :

html, body { margin: 0px; padding: 0px; }
body {
background-color: #DDDFD7;
font-family: Tahoma;
font-size: 11px;
text-align: center;
}
#shadow{
width: 500px;
height: 200px;
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
position: relative;
border: solid 1px #fff;
}
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #fff;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 22px;
left: 22px;
z-index: 0;
}

نکته بسيار مهم : سعي بر اين داشته باشيد که هميشه فايلهاي CSS شما به صورت External به صفحات شما متصل شود،اينکار باعث ميشود در حجمهاي بالا صفحات سايت شما سريعتر لود شوند.
/خ