آموزش ویژگی box-shadow در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی 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 مشاهده نمایید.

مثال شماره ۱ : ایجاد سایه از ناحیه افقی و عمودی باکس ( مقدار اول برای افقی و مقدار دوم برای عمودی )

امتحان کنید

مثال شماره ۲ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری سایه

امتحان کنید

مثال شماره ۳ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری + میزان پخش شدن سایه

امتحان کنید

مثال شماره ۴ : ایجاد سایه از ناحیه افقی و عمودی + میزان تاری + میزان پخش شدن سایه + رنگ

امتحان کنید

مثال شماره ۵ : استفاده از چندین سایه بصورت همزمان ( باید سایه هارو با , از همدیگر جدا کرد )

امتحان کنید

مثال شماره ۶ : سایه ملایم و جذاب

امتحان کنید

مثال شماره ۷ :

امتحان کنید

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 بصورت زیر می باشد.

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- برای مرورگر موزیلا فایرفاکس

Free-Learn

دریافت PDF یا پرینت این مطلب