درست کردن سایه توسط نرم افزارهای گرافیکی مانند فتوشاپ یا فایروورکس کار ساده ای میباشد و احتمالا اکثر شما طریقه انجام این کار رو بلد هستید . اما نکته اینه که تا جایی که امکانش هست از حجم صفحات بکاهیم . در این خود آموز روش انداختی سایه برای متون و توسط کدهای CSS رو آموزش خواهیم داد . ابتدا از این آدرس نتیجه کار رو مشاهده کنید تا دقیقا بدونید که قرار است چه کاری انجام دهیم : Demo انجام این کار بسیار ساده است و در زیر توجهتون رو به اون جلب میکنم : کاری که در حقیقت انجام میدهیم این است که توسط آدرس دهی مطلق (absolute) 2 متن که اولی نقش نوشته اصلی و دومی نقشه سایه را برعهده خواهند گرفت با فاصله ۲px از همدیگر قرار میدهیم .به کد زیر که در صفحه html ما نوشته خواهد شد دقت کنید :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <div id=“shadow”> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <span class=“firstlayer”>Text with shadow using CSS</span> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> <span class=“secondlayer”>Text with shadow using CSS</span> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> </div> همانطور که مشاهده میکنید یک متن ۲ بار و در قالب ۲ کلاس مختلف و تحت آیدی shadow نوشته شده اند و هیچگونه عمل خاص دیگری بر روی متونمان انجام نداده ایم .کار اصلی ما بر روی CSS انجام خواهد پدیرفت . کاری که انجام میدهیم این است که به تگ text container(#shadow) آدرس دهی نسبی نسبت میدهیم اینکار باعث خواهد شد تمامی المانهایی که در داخل تگ #shadow استفاده خواهند شد توسط آدرس دهی مطلق وابسته به تگ #shadow بشوند نه به تگ body در مرحله بعد به کلاسهای firstlayer و secondlayer موقعیت دهی مطلق میکنیم با این تفاوت کهsecondlayer به مقدار ۲px پایینتر و به راست بیاید . و در آخر احتیاج داریم که مشخص اولویت کدام لایه بالاتر است که برروی دیگری قرار بگیرد .این کار توسط دستور z-index انجام پذیر است .با هم نگاهی به سورس میاندازیم :<ol dir="ltr" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 57px; list-style-type: none; list-style-position: initial; list-style-image: initial; line-height: 18px; color: rgb(86, 86, 86); font-size: 12px; "> <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> html, body { margin: 0px; padding: 0px; } <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> body { <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> background-color: #DDDFD7; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-family: Tahoma; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-size: 11px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> text-align: center; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> } <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> #shadow{ <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> width: 500px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> height: 200px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> margin: 20px auto 20px auto; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> padding: 0px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> text-align: left; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> position: relative; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> border: solid 1px #fff; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> } <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> .firstlayer { <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-size: 18px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-weight: bold; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> color: #fff; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> position: absolute; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> top: 20px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> left: 20px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> z-index: 1; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> } <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> .secondlayer { <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-size: 18px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> font-weight: bold; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> color: #aaa; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> position: absolute; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> top: 22px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> left: 22px; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> z-index: 0; <li class="li1" style="padding: 3px 0px; margin: 0px; list-style-type: decimal;"> }
