نوشته های سایه دار توسط css

[engeneer_19]

درست کردن سایه توسط نرم افزارهای گرافیکی مانند فتوشاپ یا فایروورکس کار ساده ای میباشد و احتمالا اکثر شما طریقه انجام این کار رو بلد هستید . اما نکته اینه که تا جایی که امکانش هست از حجم صفحات بکاهیم.
در این خود آموز روش انداختی سایه برای متون و توسط کدهای CSS رو آموزش خواهیم داد .
ابتدا از این آدرس نتیجه کار رو مشاهده کنید تا دقیقا بدونید که قرار است چه کاری انجام دهیم : Demo
انجام این کار بسیار ساده است و در زیر توجهتون رو به اون جلب میکنم :
کاری که در حقیقت انجام میدهیم این است که توسط آدرس دهی مطلق (absolute) 2 متن که اولی نقش نوشته اصلی و دومی نقشه سایه را برعهده خواهند گرفت با فاصله ۲px از همدیگر قرار میدهیم .به کد زیر که در صفحه 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>
همانطور که مشاهده میکنید یک متن ۲ بار و در قالب ۲ کلاس مختلف و تحت آیدی 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 (http://www.pcdoc.blogsky.com/)