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

درست کردن سایه توسط نرم افزارهای گرافیکی مانند فتوشاپ یا فایروورکس کار ساده ای میباشد و احتمالا اکثر شما طریقه انجام این کار رو بلد هستید . اما نکته اینه که تا جایی که امکانش هست از حجم صفحات بکاهیم.
در این خود آموز روش انداختی سایه برای متون و توسط کدهای 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 انجام پذیر است .با هم نگاهی به سورس میاندازیم :

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 به صفحات شما متصل شود،اینکار باعث میشود در حجمهای بالا صفحات سایت شما سریعتر لود شوند.

www.pcdoc.blogsky.com