جهت ورود به تالار گفتمان سایت کلیک کنید


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

پس از چند روز تاخیر در ارسال پست به دلیل مشغله کاری , برای این ساعت از سایت اسکریپت دات کام  ترفندی جدید برای زیباسازی وب سایت را ارئه میکنم .

در این آموزش قصد دارم ترفندی از css که باعث سایه دار شدن بالای وب سایت می باشد را در اختیار شما همراهان قرار دهم .

و اما آموزش :

برای این کار کافیست قطعه کد زیر را در قسمت css سایت خود کپی کنید …

body:before{
    content: "";
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	z-index:100;
}

 نکات مهم :

* بهتر است کد بالا را در قسمت های بالایی فایل css خود قرار دهید .

* برای زیاد کردن مقدار سایه میتوانید سومین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

* برای تغییر رنگ سایه میتوانید چهارمین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

مثلا اگر میخواهید سایه ی  25 پیکسلی و رنگ قرمز داشته باشید :

	-webkit-box-shadow: 0px 0px 25px #f00;
	-moz-box-shadow: 0px 0px 25px #f00;
	box-shadow: 0px 0px 25px #f00;

 گرداوری : وحید مجیدی

پخش اختصاصی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

12 پاسخ به “آموزش ترفند سایه دار کردن بالای وب سایت”

  1. حمید گفت:

    لطفا دمو بزارین من نمی دونم چیه لطفاااااا

  2. مهرادمنش گفت:

    سلام استاد
    خیلی ممنون

  3. abolfazl گفت:

    داش خیلی عالی اما کاش ی دمو میذاشتید:)

  4. سهیلا گفت:

    سلام ببخشید میخواستم بدونم عکسها تویه صفحات وب می تونه خاصیت saveکردن نداشته باشه؟ واینکه میشه پستی در مورد امار بازدید کنندگان بذارین؟ بازم ممنون از لطفتون

    • وحید مجیدی گفت:

      با سلام هر کاری بکنید باز هم قابلیت سیو کردن دارن . مطمئن باشید

  5. سئو و بهینه سازی وردپرس گفت:

    فوق العاده بود

    خیلی ممنون بابت وب سایت خوبتون

  6. امیر گفت:

    نه مهندس جان من میخوام که این سایه هم تو بالای سایت و هم پایین سایت همزمان باشه.؟؟

    • وحید مجیدی گفت:

      خوب دو بار کپی کنید . یه بار با top و یک بار با bottom …

  7. ارم سرور گفت:

    داداش کم کم داشتم نا امید میشدم که چرا پست نمیزاری … !

    • وحید مجیدی گفت:

      واقعا خیلی سرم شلوغه , ولی انشاالله جبران میکنم :X

  8. امیر گفت:

    سلام
    ممنون
    عالی بود تو سایتم استفاده کردم ، البته هنوز سایتمو آپلود نکرم موقعی که آپلودش کنم لینکشو میدم ببینی ;)

    چطور میتونم به پایین سایتم هم سایه بدم؟ یعنی سایه توی footer از پایین به بالا باشه

    • وحید مجیدی گفت:

      دوست عزیزم به جای top در کد بالا , کلمه bottom را بنویسید …

پاسخ دادن به امیر لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *