افکت‌های سایه در CSS
افکت‌های سایه در CSS
افکت‌های سایه در CSS می‌توانند عمق، بُعد و جلوه‌های ظریف به عناصر وب اضافه کنند. CSS دو نوع اصلی از سایه را ارائه می‌دهد:
۱. سایه برای جعبه (Box Shadow)
ویژگی box-shadow به جعبه یک عنصر (شامل حاشیه‌ها، پدینگ و محتوا) سایه اضافه می‌کند.
دستور نوشتاری:
box-shadow: offset-x offset-y blur-radius spread-radius color;
- offset-x: موقعیت سایه به صورت افقی (مقدار مثبت → راست، مقدار منفی → چپ).
- offset-y: موقعیت سایه به صورت عمودی (مقدار مثبت → پایین، مقدار منفی → بالا).
- blur-radius (اختیاری): سطح تاری سایه را مشخص می‌کند (پیش‌فرض ۰ است که سایه تیز خواهد بود).
- spread-radius (اختیاری): سایز سایه را بزرگ‌تر یا کوچک‌تر می‌کند.
- color: رنگ سایه.
مثال:
div {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
می‌توانید چندین سایه را با جدا کردن آن‌ها با کاما اضافه کنید:
۲. سایه برای متن (Text Shadow)
ویژگی text-shadow برای اضافه کردن سایه به متن استفاده می‌شود.
دستور نوشتاری:
text-shadow: offset-x offset-y blur-radius color;
- offset-x: موقعیت سایه به صورت افقی.
- offset-y: موقعیت سایه به صورت عمودی.
- blur-radius (اختیاری): سطح تاری سایه.
- color: رنگ سایه.
مثال:
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
ایجاد جلوه‌های متنی خلاقانه:
دیدگاهتان را بنویسید