این آموزش در تاریخ ۱۴۰۰/۱۰/۲۸ آپدیت شده است.
آموزش ویژگی box-shadow در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی box-shadow در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی box-shadow در CSS
با استفاده از ویژگی box-shadow در CSS میتوان برای یک باکس ( منظور از باکس میتونه همون عنصر یا تگ باشه ) سایه تعریف و یا ایجاد کرد.
ما در زبان CSS دو حالت سایه میتونیم داشته باشیم :
- سایه برای خوده تگ میشه box-shadow
- سایه برای متن میشه text-shadow
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی box-shadow را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : فقط سایه افقی و عمودی
|
1 2 3 |
.MyBox{ box-shadow:5px 10px; } |
مثال شماره ۲ : سایه افقی و عمودی + رنگ + میزان تاری سایه
|
1 2 3 |
.MyBox{ box-shadow:5px 10px 20px yellow; } |
مثال شماره ۳
|
1 2 3 |
.MyBox{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } |
مثال شماره ۴
|
1 2 3 |
.MyBox:hover{ box-shadow: 2px 5px 30px rgba(0,0,0,.1); } |
مثال شماره ۵ : استفاده از چندین سایه بصورت همزمان ( باید با کاما از همدیگه جدا کرد )
|
1 2 3 |
.MyBox{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } |
مثال شماره ۶ : سایه های مختلف
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.MyBox-1{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .MyBox-2{ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .MyBox-3{ box-shadow: 0px 3px 12px -1px rgba(0,0,0,0.4); } .MyBox-4{ box-shadow: 1px 4px 15px 1px #555; } .MyBox-5{ box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22); } |
Free-Learn
جدول مشخصات ویژگی box-shadow در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.boxShadow=”1px 2px 3px 4px blue”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی box-shadow در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| box-shadow | بله | بله | ۱۱٫۵ | ۵٫۱ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی box-shadow در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – بدون سایه |
| h-offset | سایه افقی یک مقدار مثبت سایه را در سمت راست باکس ایجاد میکند و مقدار منفی سایه را در سمت چپ باکس ایجاد میکند ( ضروری ) |
| v-offset | سایه عمودی یک مقدار مثبت سایه را در سمت پایین باکس ایجاد میکند و مقدار منفی سایه را در سمت بالای باکس ایجاد میکند ( ضروری ) |
| blur | میزان تاری سایه را مشخص میکند ( اختیاری ) |
| spread | میزان پخش شدن سایه را مشخص میکند یک مقدار مثبت سایه را پخش میکند و مقدار منفی سایه را جمع میکند ( اختیاری ) |
| color | رنگ سایه را مشخص میکند بصورت پیش فرض رنگ متن خوده عنصر به عنوان رنگ سایه مشخص میشود. ( اختیاری ) ( آموزش رنگ ها را مشاهده نمایید ) |
| inset | سایه را به داخل باکس انتقال میدهد ( اختیاری ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقادیر h-offset ( که h از horizontal میاد یعنی افقی ) و v-offset ( که v از vertical میاد یعنی عمودی ) ضروری می باشند و حتما باید وجود داشته باشند تا سایه بتونه نمایش داده شود.
- برای مشخص کردن اندازه و یا میزان پخش شدن رنگ و یا میزان تاری سایه و همچنین برای مشخص کردن اندازه سایه از ناحیه افقی و عمودی میتوانید از واحدهای اندازه گیری همچون px,em و.. استفاده نمایید. ( آموزش واحدهای اندازه گیری در CSS )
