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

و در آخر احتیاج داریم که مشخص اولویت کدام لایه بالاتر است که برروی دیگری قرار بگیرد .این کار توسط دستور z-index انجام پذیر است .با هم نگاهی به سورس میاندازیم :
1. html, body { margin: 0px; padding: 0px; }
2. body {
3. background-color: #DDDFD7;
4. font-family: Tahoma;
5. font-size: 11px;
6. text-align: center;
7. }
8. #shadow{
9. width: 500px;
10. height: 200px;
11. margin: 20px auto 20px auto;
12. padding: 0px;
13. text-align: left;
14. position: relative;
15. border: solid 1px #fff;
16. }
17. .firstlayer {
18. font-size: 18px;
19. font-weight: bold;
20. color: #fff;
21. position: absolute;
22. top: 20px;
23. left: 20px;
24. z-index: 1;
25. }
26. .secondlayer {
27. font-size: 18px;
28. font-weight: bold;
29. color: #aaa;
30. position: absolute;
31. top: 22px;
32. left: 22px;
33. z-index: 0;
34. }
نکته بسیار مهم : سعی بر این داشته باشید که همیشه فایلهای CSS شما به صورت External به صفحات شما متصل شود،اینکار باعث میشود در حجمهای بالا صفحات سایت شما سریعتر لود شوند.
www.pcdoc.blogsky.com