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

Be Sociable, Share!


۷ دیدگاه


  1. جوک
    ۲ مرداد ۱۳۸۸

    سلام
    اگه میشه فید سایت رو طوری تنظیم کنید که کل متن پست در فید باشه که دیگه مجبور نباشیم به سایت مراجعه کنیم، خیلی وقت آدمو می گیره
    ممنون




  2. Hamed
    ۳ مهر ۱۳۸۸

    مطلب خیلی مفیدی بود دستتون درد نکنه
    رعایت این نکات ریز هست که طراحی را با دیگران متفاوت میکنه 🙂




  3. عطا
    ۱۰ اسفند ۱۳۸۸

    خوب بود موفق باشید



  4. […] پستهای مرتبط : ۹روش برای جایگزینی نوشته با تصویر با استفاده از CSS لودینگ برای صفحات با استفاده از جاوا اسکریپت و سی اس اس مرجع کامل دستورات CSS2 بهینه سازی کدهای CSS Cheat Sheet (خلاصه دستورها) برای CSS نوشته های سایه دار توسط CSS […]




  5. حسن
    ۲۳ مهر ۱۳۸۹

    سلام
    بابت این مطالب خسته نباشید
    به نظر بنده هر مطالب آموزشی که قرار میدهید یه فایل PDF هم همان مطلب برای دانلود قرار بدید ممنون میشم
    اینطوری بهتر میصرفه




  6. حسين
    ۲۵ دی ۱۳۹۰

    سلام به همه کسایی که از این صفحه بازدید می کنن به نظرم این صفحه مدت هاست که متروک شده به یاد قدیما و روزای دانشگاه داده پردازی دم همه ی بچه های کامپیوتر گرررم که میان مطلب مینویسن و به بقیه یاد میدن.




  7. amirhossein
    ۱ مرداد ۱۳۹۱

    سلام
    ممنون بابت توضیحاتتون
    ولی یه سوال!
    این کار رو با باکس شادو نمیشه انجام داد؟؟؟



دیدگاه خود را بنویسید