loading...

سه نفری | بزرگترین سایت تفریحی آموزشی ایران

با سلام در این بخش به شما آموزش میدم که چطوری یه باکس درست کنید که سایه داشته باشه،برای مثال به تصویر زیر دقت کنید،همون طور که میبینید این باکس دارای سایه ای به رنگ سیاه میباشد،ولی شما میتوانید از

آموزش ایجاد باکس سایه دار با CSS

admin بازدید : 1817 جمعه 08 فروردين 1393 نظرات (1)

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


این باکس به رنگ سبز و سایه سیاه می باشد



همونطور که میبینید برای ایجادیه باکس سایه دار شما باید اول یه باکس به رنگ دلخواه بسازید،ما با id زیر و مشخصاتی که به اون دادیم تونستیم باکس بالا رو ایجاد کنیم:

<style>

#boxshadow{background:#9C0; border:1px solid #CC0; border-radius:8px; width:200px; height:140px;}

</style>

حالا وقتش شده که به این باکس سایه اضافه کنیم،ما برای ایجاد سایه از دستور box-shadow استفاده میکنیم،به شکل زیر:

<style>

#boxshadow{background:#9C0; border:1px solid #CC0; border-radius:8px; width:200px; height:140px; box-shadow:7px 7px 2px #333;}

</style>

اطلاعات کد:

(این باکس در همه مرورگرهای بروز شده کار میکند)

background:#9C0 : این قسمت از کد ، رنگ باکس را برای شما تغییر میدهد.

border:1px solid #CC0 : با این قسمت میتوانید برای باکس خود حاشیه ایجاد کنید و رنگ آن را مشخص نمایید.

width:200px; height:140px : این عناصر مخصوص تغییر اندازه باکس میباشند.

box-shadow:7px 7px 2px #333 : این قسمت از کد نیز برای سایه دار کردن به کار میرود،با دستکاری اعداد میتوانید در مورد کارکرد این کد بیشتر آشنا بشید.

برای اینکه این کد نمایش داده بشه باید نام id رو به صورت زیر در هرجایی که میخواین این باکس نمایش داده بشه قرار بدین:


<div id="boxshadow"></div>


مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط محمد در تاریخ 8 سال پیش و 22:45 دقیقه ارسال شده است

خیلی خیلی ممنونم.
ضمنا به گفته خودتون منم کد پاپ آپ رو پاک میکنم.و همین طور تا زمانی که خودتون بگین اون یوزر پسورد در اختیار خودتون هست.
راستی از اینکه کد وبگذر رو به جای مناسبتری بردید سپاس گذارم.
یه خواهش دیگه ای هم دارم.
لطفا !
میتونید یه قالب تخصصی برای انجمن سایت درست کنید./؟
یا اصلا قالب انجمن خودتون رو به من بدین؟
راست میگین ها منم از نوشتن خسته شدم.شکلک


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • آمار سایت
  • کل مطالب : 182
  • کل نظرات : 544
  • افراد آنلاین : 4
  • تعداد اعضا : 1165
  • آی پی امروز : 102
  • آی پی دیروز : 136
  • بازدید امروز : 525
  • باردید دیروز : 301
  • گوگل امروز : 0
  • گوگل دیروز : 3
  • بازدید هفته : 525
  • بازدید ماه : 5,436
  • بازدید سال : 58,704
  • بازدید کلی : 9,883,438