آموزش خاصیت box-shadow در css

با سلام و درود خدمت کاربران سایت 3نفری دات آی آر؛

در این بخش می خوام شما رو با یکی دیگه از اجزای css آشنا کنم که با استفاده از اون میتونین به باکس ها یا تصاویر خودتون حالت سایه دار بودن بدین (برای متن از این خاصیت استفاده نمی شود،به زودی این بخش نیز اضافه خواهد شد) خوب بریم سر موضوع اصلی آموزشهامون،تو ادامه مطلب می بینمتون...!

خوب برای شروع کار یک تگ style ایجاد می کنیم،به این شکل:

<style>

</style>

بعد از این کار یک کلاس با نام دلخواه ایجاد می کنیم(من یه کلاس با نام smaeal ایجاد می کنم):

<style>

.smaeal{background:#9C0; width:200px; height:200px; border-radius:5px; border:1px solid #444;}

</style>

بعدش شروع می کنیم به نوشت خاصیت box-shadow :

<style>

.smaeal{background:#9C0; width:200px; height:200px; border-radius:5px; border:1px solid #444; box-shadow:1px 2px 5px #777;}

</style>

همونطور که می بینید این خاصیت از 4 بخش تشکیل شده که به شکل زیز تقسیم بندی می شن:

1px : با تغییر این عدد سایه باکس شما به سمت راست یا چپ حرکت می کنه.

2px : با تغییر این عدد سایه باکس شما به سمت بالا و پایین جابجا میشه.

5px : این عدد هم مربوط به گستردگی میزان سایه مربوط میشه.

#777 : با تغییر این کد می توانید سایه ای با رنگ دلخواه ایجاد کنید.

و در آخر می بایست این کلاس را فراخوانی کنید،به این صورت:

<div class="smaeal"></div>

برای مشاهده نتیجه کار به این پست مراجعه نمایید : پست25