میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

box-shadow در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش box-shadow در CSS با من همراه باشید.

با استفاده از ویژگی box-shadow در CSS می توان برای یک باکس ( منظور از باکس می تواند همان عنصر یا تگ باشد ) سایه تعریف و یا ایجاد کرد.

ما در CSS دو (۲) نمونه سایه می توانیم داشته باشیم ، که در این جلسه میخوایم با نمونه دوم یعنی box-shadow آشنا شویم :

  • سایه برای متن » text-shadow
  • سایه برای باکس یا خوده عنصر » box-shadow


مثال از این ویژگی

در ادامه می توانید یک مثال از ویژگی box-shadow را در زبان CSS مشاهده نمایید.

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

 

 

div{
margin-top:100px;
padding:10px;
background-color:#f2f2f2;
text-align:center;
box-shadow:1px 10px;
}

 

 

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

 

div{
margin-top:100px;
padding:10px;
background-color:#f2f2f2;
text-align:center;
box-shadow:1px 10px 20px;
}

 

 

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

 

div{
margin-top:100px;
padding:10px;
background-color:#f2f2f2;
text-align:center;
box-shadow:1px 10px 20px 30px;
}

 

 

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

 

div{
margin-top:100px;
padding:10px;
background-color:#f2f2f2;
text-align:center;
box-shadow:1px 10px 20px 30px #5db616;
}

 

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

 

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);
}

 

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

 

div{
margin-top:100px;
padding:10px;
background-color:#fff;
text-align:center;
box-shadow: 2px 5px 30px rgba(0,0,0,.1);
}

 

 

مثال شماره ۷ :

div{
margin-top:100px;
padding:10px;
background-color:#fff;
text-align:center;
box-shadow: #BBB 0 0 2px, #888 0 15px 15px -12px;
}


جدول مقادیر ویژگی box-shadow در CSS

در جدول زیر می توانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدارتوضیح
noneپیش فرض – باکس هیچ سایه ای ندارد.
h-offsetسایه را بصورت افقی مشخص میکند.
یک مقدار مثبت سایه را در سمت راست باکس ایجاد میکند
و مقدار منفی سایه را در سمت چپ باکس ایجاد میکند. ( ضروری )
v-offsetسایه را بصورت عمودی مشخص میکند.
یک مقدار مثبت سایه را در سمت پایین باکس ایجاد میکند
و مقدار منفی سایه را در سمت بالای باکس ایجاد میکند. ( ضروری )
blurمیزان تاری سایه را مشخص میکند. ( اختیاری )
spreadمیزان پخش شدن سایه را مشخص میکند.
یک مقدار مثبت سایه را پخش میکند و مقدار منفی سایه را جمع میکند ( اختیاری )
colorرنگ سایه را مشخص میکند.
بصورت پیش فرض رنگ متن خوده عنصر به عنوان رنگ سایه مشخص میشود. ( اختیاری )
insetسایه را به داخل باکس انتقال میدهد. ( اختیاری )
initialاستفاده از مقدار پیش فرض یا اولیه
inheritاستفاده از مقدار پدر یا والد ( به ارث بری )

 

نکات و توضیحات

مقادیر h-offset ( که h از horizontal میاد یعنی افقی ) و v-offset ( که v از vertical میاد یعنی عمودی ) ضروری می باشند و حتما باید وجود داشته باشند تا سایه بتواند نمایش داده شود.

با اینکه استفاده از رنگ اختیاری می باشد ولی در مرورگر Safari ( مربوط به محصولات شرکت اپل ) اگه از رنگ استفاده نکرده باشید هیچ چیزی نمایش داده نخواهد شد، در نتیجه در این مورد استفاده از رنگ ضروری می باشد.

برای مشخص کردن اندازه و یا میزان پخش شدن رنگ و یا میزان تاری سایه و همچنین برای مشخص کردن اندازه سایه از ناحیه افقی و عمودی میتوانید از واحدهای اندازه گیری همچون px,em و.. استفاده نمایید.

برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.

  • -webkit- برای مرورگر گوگل کروم و سافاری
  • -moz- برای مرورگر موزیلا فایرفاکس

امیدواریم آموزش box-shadow در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
box-shadow در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfخاصیت box-shadow در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور box-shadow در cssساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟