تور لحظه آخری
امروز : سه شنبه ، 11 دی 1403    احادیث و روایات:  امام صادق (ع):هر كس كار نيكى انجام دهد ده برابر آن پاداش دارد و از جمله آنها سه روز روزه در هر ماه ا...
سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون شرکت ها

تبلیغات

تبلیغات متنی

صرافی ارکی چنج

صرافی rkchange

سایبان ماشین

دزدگیر منزل

اجاره سند در شیراز

armanekasbokar

armanetejarat

صندوق تضمین

Future Innovate Tech

پی جو مشاغل برتر شیراز

خرید یخچال خارجی

موسسه خیریه

واردات از چین

حمية السكري النوع الثاني

ناب مووی

دانلود فیلم

بانک کتاب

دریافت دیه موتورسیکلت از بیمه

طراحی سایت تهران سایت

irspeedy

درج اگهی ویژه

تعمیرات مک بوک

دانلود فیلم هندی

قیمت فرش

درب فریم لس

خرید بلیط هواپیما

بلیط اتوبوس پایانه

تعمیرات پکیج کرج

لیست قیمت گوشی شیائومی

خرید فالوور

پوستر آنلاین

بهترین وکیل کرج

بهترین وکیل تهران

خرید از چین

خرید از چین

تجهیزات کافی شاپ

کاشت ابرو طبیعی و‌ سریع

قیمت بالابر هیدرولیکی

قیمت بالابر هیدرولیکی

قیمت بالابر هیدرولیکی

لوله و اتصالات آذین

قرص گلوریا

نمایندگی دوو در کرج

دوره آموزش باریستا

مهاجرت به آلمان

بهترین قالیشویی تهران

بورس کارتریج پرینتر در تهران

تشریفات روناک

نوار اخطار زرد رنگ

ثبت شرکت فوری

تابلو برق

خودارزیابی چیست

فروشگاه مخازن پلی اتیلن

قیمت و خرید تخت برقی پزشکی

کلینیک زخم تهران

خرید بیت کوین

خرید شب یلدا

پرچم تشریفات با کیفیت بالا و قیمت ارزان

کاشت ابرو طبیعی

پرواز از نگاه دکتر ماکان آریا پارسا

پارتیشن شیشه ای

اقامت یونان

خرید غذای گربه

رزرو هتل خارجی

تولید کننده تخت زیبایی

مشاوره تخصصی تولید محتوا

سی پی کالاف

دوره باریستا فنی حرفه ای

چاکرا

استند تسلیت

تور بالی نوروز 1404

سوالات لو رفته آیین نامه اصلی

 






آمار وبسایت

 تعداد کل بازدیدها : 1847296623




هواشناسی

نرخ طلا سکه و  ارز

قیمت خودرو

فال حافظ

تعبیر خواب

فال انبیاء

متن قرآن



اضافه به علاقمنديها ارسال اين مطلب به دوستان آرشيو تمام مطالب
archive  refresh

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


واضح آرشیو وب فارسی:راسخون:
نوشته های سایه دار توسط 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 انجام پذیر است .با هم نگاهی به سورس میاندازیم :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.rasekhoon.net]
[تعداد بازديد از اين مطلب: 1004]

bt

اضافه شدن مطلب/حذف مطلب







-


گوناگون

پربازدیدترینها
طراحی وب>


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