آموزش کار با سایه ها یا Shadows در CSS3

مقدمه

استفاده از سایه‌ها (Shadows) در CSS3 باعث ایجاد عمق و جلوه‌های بصری جذاب روی عناصر می‌شود. سایه‌ها می‌توانند روی متن، جعبه‌ها و تصاویر اعمال شوند. برای یادگیری کامل CSS و ایجاد افکت‌های حرفه‌ای، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Shadows

CSS سه نوع سایه اصلی ارائه می‌دهد:

• text-shadow → سایه روی متن
• box-shadow → سایه روی جعبه‌ها و عناصر بلاکی
• filter: drop-shadow() → سایه روی تصاویر و عناصر inline-block

ویژگی‌های هر سایه شامل افکت افقی، عمودی، بلور و رنگ است.

مثال عملی با کد

سایه متن ساده:

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

سایه جعبه (Box Shadow):

.card {
  width: 200px;
  height: 150px;
  background-color: #fff;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

سایه تصویر با drop-shadow:

img {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

سایه‌های ترکیبی و چندگانه:

.box {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3),
              -3px -3px 5px rgba(0,0,0,0.2);
}

نکات مهم و توضیحات تکمیلی

• سایه‌ها باعث عمق و جذابیت بصری می‌شوند.
• text-shadow و box-shadow می‌توانند ترکیبی باشند تا افکت‌های حرفه‌ای ایجاد شود.
• drop-shadow برای تصاویر و عناصر inline کاربرد دارد.
• برای طراحی واکنش‌گرا، اندازه و رنگ سایه‌ها باید با عناصر سازگار باشد.

ادامه آموزش CSS

برای یادگیری استفاده از ویژگی Border-Image و ایجاد حاشیه‌های سفارشی، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.