این آموزش در تاریخ ۱۳۹۹/۰۱/۲۱ آپدیت شده است.
آموزش ویژگی box-shadow در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی box-shadow در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی box-shadow در CSS
با استفاده از ویژگی box-shadow در CSS میتوان برای یک باکس ( منظور از باکس میتونه همون عنصر یا تگ باشه ) سایه تعریف و یا ایجاد کرد.
ما در CSS دو (۲) نمونه سایه میتونیم داشته باشیم ، که در این جلسه میخوایم با نمونه دوم یعنی box-shadow آشنا شویم :
- سایه برای متن » text-shadow
- سایه برای باکس یا خوده عنصر » box-shadow
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی box-shadow را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : ایجاد سایه از ناحیه افقی و عمودی باکس ( مقدار اول برای افقی و مقدار دوم برای عمودی )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin-top:100px; padding:10px; background-color:#f2f2f2; text-align:center; box-shadow:1px 10px; } </style> |
مثال شماره ۲ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری سایه
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin-top:100px; padding:10px; background-color:#f2f2f2; text-align:center; box-shadow:1px 10px 20px; } </style> |
مثال شماره ۳ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری + میزان پخش شدن سایه
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin-top:100px; padding:10px; background-color:#f2f2f2; text-align:center; box-shadow:1px 10px 20px 30px; } </style> |
مثال شماره ۴ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری + میزان پخش شدن سایه + رنگ
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ margin-top:100px; padding:10px; background-color:#f2f2f2; text-align:center; box-shadow:1px 10px 20px 30px #5db616; } </style> |
مثال شماره ۵ : استفاده از چندین سایه بصورت همزمان ( باید سایه هارو با , از همدیگر جدا کرد )
|
1 2 3 4 5 6 7 |
div{ margin-top:100px; padding:10px; background-color:#f2f2f2; text-align:center; 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); } |
مثال شماره ۶ : سایه ملایم و جذاب
|
1 2 3 4 5 6 7 |
div{ margin-top:100px; padding:10px; background-color:#fff; text-align:center; box-shadow: 2px 5px 30px rgba(0,0,0,.1); } |
مثال شماره ۷ :
|
1 2 3 4 5 6 7 |
div{ margin-top:100px; padding:10px; background-color:#fff; text-align:center; box-shadow: #BBB 0 0 2px, #888 0 15px 15px -12px; } |
Free-Learn
جدول مشخصات ویژگی box-shadow در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.boxShadow=”1px 2px 3px 4px blue”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی box-shadow در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- و -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| box-shadow | ۱۰٫۰ ۴٫۰ -webkit- |
۴٫۰ ۳٫۵ -moz- |
۱۰٫۵ | ۵٫۱ ۳٫۱ -webkit- |
۹٫۰ |
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 میاد یعنی عمودی ) ضروری می باشند و حتما باید وجود داشته باشند تا سایه بتونه نمایش داده شود.
با اینکه استفاده از رنگ اختیاری می باشد ولی در مرورگر Safari ( مربوط به محصولات شرکت اپل ) اگه از رنگ استفاده نکرده باشید هیچ چیزی نمایش داده نخواهد شد، در نتیجه در این مورد استفاده از رنگ ضروری می باشد.
برای مشخص کردن اندازه و یا میزان پخش شدن رنگ و یا میزان تاری سایه و همچنین برای مشخص کردن اندازه سایه از ناحیه افقی و عمودی میتوانید از واحدهای اندازه گیری همچون px,em و.. استفاده نمایید. ( آموزش واحدهای اندازه گیری در CSS )
برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر گوگل کروم و سافاری
- -moz- برای مرورگر موزیلا فایرفاکس
