جلوه سایه در CSS

به بررسی جلوه سایه در CSS می پردازیم .CSS دو ویژگی جداگانه برای افزودن سایه به متن و سایر عناصر مانند تصاویر ارائه می دهد: text-shadow و box-shadow.

افزودن سایه به عناصر

می توانید سایه CSS را به جعبه عنصر یا متن داخل آن اضافه کنید. یک روش معمول تنظیم خواص افقی و عمودی برای نشان دادن موقعیت سایه است.

جعبه سایه

برای ایجاد سایه انداختن CSS در جعبه عنصر ، از ویژگی CSS-box-shadow استفاده می کنیم. باعث می شود عناصر درون خطی و بلوک شده ، مانند <div> یا <section> ، سایه مستطیل شکل را با توجه به مقادیر تنظیم شده رها کنید.

در مثال ، سایه ای را در اطراف فریم <div> اضافه می کنیم:

div {
 box-shadow: 5px 5px;
}

توجه: تقریباً می توانید CSS را بر روی هر عنصر قرار دهید.

همچنین می توان سایه داخلی CSS را اضافه کرد. منظور سایه هایی است که به جای بیرون در داخل جعبه عناصر قرار دارند.

سایه های داخلی CSS را با درج مقدار inset در ابتدای اعلامیه box-shadow تنظیم می کنید:

div {
width: 150px;
height: 150px;
box-shadow: inset 0px 0px 20px black;
}

گزینه بعدی ایجاد سایه تصویر CSS است:

img {
  box-shadow: 0px 0px 20px black;
}

در مثال زیر ، برای قرار دادن سایه در داخل تصویر از inset برای سایه تصویر CSS استفاده می کنیم:

img {
box-shadow: inset 0px 0px 20px black;
}

سایه ها را بی نظیر کنید

می توانید چندین سایه CSS را تار ، رنگ و اضافه کنید.

در مثال زیر ، سایه سیاه تاری را به عنصر HTML خود اضافه می کنیم:

div { 
 box-shadow: 5px 5px 10px black;
}

سایه متن

خاصیت text-shadow برای افزودن سایه به محتوای متن است. می توانید رنگ ، افست (فاصله متن و سایه) و شعاع تاری را تنظیم کنید.

در مثال ، انواع مختلفی از سایه های متن را نشان می دهیم:

h1 {
 text-shadow: 3px 4px;  	
}

گزینه های اضافی یک ظاهر طراحی شده

می توانید نحوه ایجاد سایه های CSS روی متن را سفارشی کنید. سایه می تواند تار ، به سختی قابل توجه باشد یا در بالای متن قرار گیرد.

مثال زیر سایه را اصلاح می کند:

h1 {
 text-shadow: 3px 3px 1px black;
}

در اینجا توضیحات چندین سایه منحصر به فرد در مثال بالا آورده شده است:

text-سایه: 3px 3px 7px آبی؛ روی عنصر <h2> تنظیم شده است. سایه آبی و تار است.

text-سایه: 1px 1px آبی؛ روی <h3> تنظیم شده است. سایه آبی بسیار نزدیک به شخصیت ها است و تار نیست.

text-shadow: پیکسل 3 پیکسل؛ روی <h4> تنظیم شده است. سایه کاملاً سیاه و دورتر از شخصیت ها است.

text-shadow: 0 0 3px # FF0000؛ روی <h5> تنظیم شده است. سایه پشت حروف است. از آنجا که تاری شده است ، می توانیم آن را در اطراف شخصیت ها ببینیم.

text-shadow: 6px 6px 4px سیاه ؛ روی <h6> تنظیم شده است. سایه سیاه دور قابل مشاهده است ، اما شخصیت ها دیده نمی شوند.

چندین جلوه سایه در CSS

با جدا کردن مقادیر برای هر سایه با ویرگول ، می توانید CSS را چندین سایه ایجاد کنید.

در مثال زیر ، دو سایه به <h1> و سه سایه به <h2> اضافه می کنیم:

سایه متن چندگانه

با جدا کردن مقادیر برای هر سایه با ویرگول ، می توانید CSS را چندین سایه ایجاد کنید.

در مثال زیر ، دو سایه به  <h1> و سه سایه به  <h2> اضافه می کنیم:

h1 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

نکات مهم جلوه سایه در CSS:

• جلوه های سایه CSS با انتخابگرهایی مانند :: حرف اول نیز کار می کنند.
• اگر این عنصر خاصیت مرز-شعاع داشته باشد ، سایه CSS نیز گرد می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.