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

با سلام در این بخش به شما آموزش میدم که چطوری یه باکس درست کنید که سایه داشته باشه،برای مثال به تصویر زیر دقت کنید،همون طور که میبینید این باکس دارای سایه ای به رنگ سیاه میباشد،ولی شما میتوانید از رنگ های مختلف استفاده نمایید،من این باکس رو تماماً توسط 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>