ویژگی box-shadow در CSS برای اعمال یک یا چند سایه به یک عنصر استفاده می‌شود. این ویژگی به شما امکان می‌دهد سایه‌هایی با افکت‌های مختلف ایجاد کنید.
تعیین سایه افقی و عمودی
در ساده‌ترین حالت، شما فقط سایه افقی و عمودی را مشخص می‌کنید. رنگ پیش‌فرض سایه برابر با رنگ متن فعلی است.
مثال:
در این مثال، سایه‌ای با افست ۱۰ پیکسل به سمت راست و ۱۰ پیکسل به سمت پایین اعمال شده است:
div {
box-shadow: 10px 10px;
}تعیین رنگ برای سایه
پارامتر رنگ، رنگ سایه را مشخص می‌کند.
مثال:
div {
box-shadow: 10px 10px lightblue;
}افزودن افکت بلور به سایه
پارامتر بلور، شعاع بلور سایه را تعریف می‌کند. عدد بالاتر به معنای محو شدن بیشتر سایه است.
مثال:
div {
box-shadow: 10px 10px 5px lightblue;
}تعیین شعاع گسترش سایه
پارامتر گسترش، شعاع گسترش سایه را تعریف می‌کند. یک مقدار مثبت اندازه سایه را افزایش می‌دهد و یک مقدار منفی اندازه سایه را کاهش می‌دهد.
مثال:
div {
box-shadow: 10px 10px 5px 12px lightblue;
}تعیین پارامتر inset
پارامتر inset سایه را از سایه خارجی (outset) به سایه داخلی تغییر می‌دهد.
مثال:
div {
box-shadow: 10px 10px 5px lightblue inset;
}افزودن سایه‌های چندگانه
یک عنصر می‌تواند چندین سایه داشته باشد. برای این کار، از لیست سایه‌ها به صورت جدا شده با کاما استفاده می‌کنید.
مثال:
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}استفاده از سایه باکس برای ایجاد کارت‌های شبیه کاغذ
شما می‌توانید از ویژگی box-shadow برای ایجاد کارت‌های شبیه کاغذ استفاده کنید.
مثال:
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}نتیجه‌گیری
ویژگی box-shadow به شما امکان می‌دهد سایه‌های متنوع و جذابی به عناصر خود اضافه کنید و با تنظیمات مختلف، افکت‌های زیبا و کاربرپسندی ایجاد نمایید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام