عمق واقعی به سایت بدهید: سایه‌ها و شفافیت

Box Shadow: سایه‌های دلنشین در طراحی! Shadows 🌫️

سلام به هنرمندان کدنویس! تا اینجا با ساختار و ظاهر عناصر آشنا شدیم. حالا وقتشه که یه کم بُعد و حجم به طرح‌هامون بدیم! خصوصیت `box-shadow` به ما اجازه می‌ده که برای عناصر سایه ایجاد کنیم و یه حس برجستگی و عمق بهشون ببخشیم. بعلاوه، با استفاده از opacity و رنگ‌های RGBA می‌تونیم سایه‌هایی شفاف و حرفه‌ای بسازیم. آماده‌اید که دنیای سایه‌ها رو کشف کنیم؟ 😎

1. `box-shadow`: اضافه کردن سایه به جعبه! 👤

این خصوصیت به شما اجازه می‌ده که یه یا چند سایه به جعبه‌ی عنصر اضافه کنین. مقادیر اصلی که باید تعیین کنین عبارتند از:

• Offset X (تغییر افقی): میزان جابجایی سایه در محور افقی. مقدار مثبت به سمت راست، منفی به سمت چپ.
• Offset Y (تغییر عمودی): میزان جابجایی سایه در محور عمودی. مقدار مثبت به سمت پایین، منفی به سمت بالا.
• Blur Radius (شعاع تاری): میزان محو بودن یا پخش شدن سایه. عدد بزرگتر یعنی سایه محوتر و بزرگتر. اگه صفر باشه، سایه تیز و بدون محوی هست.
• Spread Radius (شعاع پخش): اندازه سایه رو بزرگ یا کوچیک می‌کنه. مقدار مثبت سایه رو بزرگتر و منفی کوچکتر می‌کنه. (اختیاری)
• Color (رنگ): رنگ سایه.
• `inset` (اختیاری): اگه این کلمه کلیدی رو اضافه کنین، سایه به جای بیرون جعبه، داخل جعبه ایجاد می‌شه.

مثال:

.simple-shadow {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  padding: 20px;
  border: 1px solid blue;

  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.inset-shadow {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5); /* سایه داخلی */
}

.multiple-shadows {
  /* می‌تونین با کاما، چند سایه اضافه کنین */
  box-shadow:
    3px 3px 5px rgba(0, 0, 0, 0.2), /* سایه اول */
    -3px -3px 5px rgba(255, 255, 255, 0.7); /* سایه دوم (مثلاً برای ایجاد حس برجستگی) */
}

سایه‌های تیز (با blur radius صفر) می‌تونن حس و حال قدیمی‌تری به طرح بدن، در حالی که سایه‌های محوتر حس مدرن‌تری ایجاد می‌کنن.

2. `opacity` و `RGBA`: شفافیت و رنگ‌های زنده! 🌈

برای اینکه سایه‌ها طبیعی‌تر به نظر بیان، معمولاً از رنگ‌های نیمه‌شفاف استفاده می‌کنیم. اینجا دو راه اصلی داریم:

• مقدار `opacity` کلی عنصر:

  می‌تونین از خصوصیت opacity برای کم کردن شفافیت کل عنصر (شامل محتوا، padding، border و سایه) استفاده کنین. مقادیر بین 0 (کاملاً شفاف) تا 1 (کاملاً مات) هستن.

  
  .semi-transparent-element {
    opacity: 0.7; /* کل عنصر 70% مات است */
  }
          

• استفاده از رنگ‌های RGBA یا HSLA:

  این بهترین راه برای کنترل شفافیت سایه به صورت جداگانه است. فرمت RGBA (قرمز، سبز، آبی، آلفا) یا HSLA (سبز، روشنایی، اشباع، آلفا) به شما اجازه می‌ده که میزان شفافیت (کانال آلفا) رو برای هر رنگی تنظیم کنین. مقدار آلفا هم مثل opacity بین 0 تا 1 هست.

  
  .rgba-shadow {
    background-color: #f0f0f0;
    padding: 20px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4); /* سایه سیاه با 40% شفافیت */
  }
  
  .hsla-shadow {
    background-color: lightyellow;
    padding: 20px;
    box-shadow: 0 0 15px hsla(0, 100%, 50%, 0.6); /* سایه قرمز با 60% شفافیت */
  }
          

وقتی می‌خواین فقط خود سایه شفاف باشه و بقیه‌ی محتوا مات بمونه، حتماً از RGBA یا HSLA برای رنگ سایه استفاده کنین، نه از opacity کلی عنصر.

3. ترکیب خلاقانه! 💡

حالا که با این ابزارها آشنا شدیم، می‌تونیم ترکیب‌های جالبی بسازیم. مثلاً برای ایجاد حس برجستگی (مثل یه دکمه که داره بیرون میاد)، می‌تونیم از دو سایه استفاده کنیم: یکی تیره در پایین و یکی روشن در بالا.

.raised-button {
  background-color: #4CAF50; /* رنگ سبز */
  color: white;
  padding: 15px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer; /* نشانه موس */

  /* سایه تیره در پایین و سایه روشن در بالا */
  box-shadow:
    0 5px 0px #388E3C, /* سایه تیره زیر */
    0 8px 15px rgba(0, 0, 0, 0.3); /* سایه محو کلی */

  transition: all 0.2s ease; /* برای انیمیشن */
}

.raised-button:active { /* وقتی دکمه فشرده می‌شه */
  box-shadow:
    0 2px 0px #388E3C, /* سایه زیر کمتر می‌شه */
    0 4px 8px rgba(0, 0, 0, 0.3); /* سایه محو کلی هم کمتر می‌شه */
  transform: translateY(3px); /* کمی به پایین جابجا می‌شه */
}

با ترکیب `box-shadow`، `border-radius` و انیمیشن‌ها (`transition`) می‌تونین رابط‌های کاربری بسیار پویا و جذابی بسازین.

سایه‌ها ابزاری قدرتمند برای افزودن زیبایی و واقع‌گرایی به طراحی‌های شما هستن. با استفاده درست از `box-shadow` و شفافیت با RGBA، می‌تونین جزئیات چشم‌نوازی به پروژه‌هاتون اضافه کنین! ✨