کاربر میهمان به پرتال راسخون خوش آمدید | ورود به محيط کاربري | فراموشی رمز عبور | عضویت جمعه بیست و هشتم اسفند 1388 خورشیدی (اصلاح الگوی مصرف)
 |   |   |   |   |  مقالات موضوعی

مسیر جاری: صفحه اصلي / مقالات موضوعی / علم و دانش / كامپيوتر و فناوري اطلاعات / نرم افزار و برنامه نویسی

تبلیغات سایت 
بره ناقلا
شنبه 17 بهمن 1388

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

چاپ نظرات
بازديدها: 204  
تعداد آرا: 3  
نوشته های سایه دار توسط CSS
نوشته های سایه دار توسط 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 انجام پذیر است .با هم نگاهی به سورس میاندازیم :
  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 به صفحات شما متصل شود،اینکار باعث میشود در حجمهای بالا صفحات سایت شما سریعتر لود شوند.
/خ


ارسال اين مقاله براي دوستان:
    آدرس پست الکترونيکي
 

نظر شما درباره این مقاله 
* با عنایت به اینکه نظرات و پیشنهادات شما کاربران گرامی در بهبود پایگاه تاثیر کاملا موثری ایفا می کند لذا خواهشمند است ما را از نطرات ارزنده ی خود محروم نفرمایید . 
* نظرات شما پش از بررسی و بازبینی توسط گروه مدیریت برای نمایش در سایت قرار داده می شود .

  نام و نام خانوادگی
    نشانی پست الکترونیکی
  نظرات شما
    

نظرات کاربران درباره این مقاله 

شنبه 17 بهمن 1388   zoom68
از مطلب ارائه شده ممنون
چهارشنبه 28 بهمن 1388   ali_1989
خیلی عالیه از این آموزش ها بیشتر بنویسین



صفحه اصلی  |  مقالات  |  اخبار و اطلاع رسانی  |  کتابخانه موضوعی  |  مجموعه تصاویر  |  دریافت نرم افزار  |  معرفی پایگاه ها  |  بانک صوت و فیلم  |  کارت پستال
نقشه سایت  |  ارتباط با ما  |  درباره ما  |  عضویت  |  ورود به محیط کاربری

تمامی حقوق این پایگاه متعلق به پرتال فرهنگی و اطلاع رسانی راسخون می باشد. استفاده از مطالب این پایگاه فقط با ذکر منبع مجاز می باشد.