CSS Shadow Effects

۱. سایه باکس (box-shadow)

خاصیت box-shadow برای افزودن سایه به دور عناصر استفاده می‌شود.

ساختار:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

پارامترها:

• offset-x → فاصله سایه در جهت افقی (ضروری)

• offset-y → فاصله سایه در جهت عمودی (ضروری)

• blur-radius → میزان تار بودن سایه (اختیاری)

• spread-radius → اندازه سایه (اختیاری)

• color → رنگ سایه (اختیاری)

• inset → اگر استفاده شود، سایه داخل عنصر قرار می‌گیرد

مثال:

div {
width: 150px;
height: 150px;
background-color: lightblue;
box-shadow: 10px 10px 20px gray; /* فاصله x، فاصله y، تاری، رنگ */
}

مثال سایه داخلی:

div {
width: 150px;
height: 150px;
background-color: lightblue;
box-shadow: inset 5px 5px 15px rgba(0,0,0,0.5);
}

۲. سایه متن (text-shadow)

خاصیت text-shadow برای افزودن سایه به متن استفاده می‌شود.

ساختار:

text-shadow: offset-x offset-y blur-radius color;

مثال:

h1 {
color: #333;
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

مثال سایه چندگانه:

h1 {
color: #333;
text-shadow: 2px 2px 2px red, -2px -2px 2px blue;
}

۳. افکت‌های خلاقانه با سایه

• نیو مورفیسم (Neumorphism):

div {
background: #e0e0e0;
border-radius: 20px;
box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

• افکت درخشان (Glow Effect):

div {
background: black;
color: white;
text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
}

• انیمیشن سایه هنگام هاور (Hover Shadow Animation):

button {
padding: 10px 20px;
background: #3498db;
border: none;
color: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: box-shadow 0.3s ease;
}

button:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}