آموزش استفاده از box-shadow و text-shadow در CSS: ایجاد سایه‌های زیبا و جذاب

سایه‌ها در طراحی وب نقش بسیار مهمی در افزایش عمق، جذابیت و قابل‌خواندن بودن محتوای صفحات وب دارند. دو ویژگی box-shadow و text-shadow در CSS به شما امکان می‌دهند سایه‌های مختلفی به باکس‌ها و متن‌ها اضافه کنید و جلوه‌های زیبا و حرفه‌ای ایجاد کنید. در این مقاله، به معرفی نحوه استفاده از box-shadow و text-shadow و روش‌های ایجاد سایه‌های جذاب می‌پردازیم.

ایجاد سایه برای باکس‌ها با box-shadow

box-shadow یک ویژگی در CSS است که سایه‌ای را به اطراف یک باکس اضافه می‌کند. این سایه‌ها می‌توانند به طراحی ظاهری عمق دهند و جذابیت بصری را افزایش دهند.

.element {
  box-shadow: h-offset v-offset blur spread color;
}

پارامترهای box-shadow:

• h-offset: فاصله سایه از باکس در جهت افقی. می‌تواند مثبت (سایه به راست) یا منفی (سایه به چپ) باشد.

• v-offset: فاصله سایه از باکس در جهت عمودی. می‌تواند مثبت (سایه به پایین) یا منفی (سایه به بالا) باشد.

• blur: میزان تاری سایه. مقدار بیشتر باعث نرم‌تر شدن لبه‌های سایه می‌شود.

• spread: اندازه گسترش سایه. مقدار مثبت باعث بزرگ‌تر شدن سایه و مقدار منفی باعث کوچک‌تر شدن آن می‌شود.

• color: رنگ سایه.

مثال ساده از box-shadow

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

در اینجا:

• سایه با 5 پیکسل فاصله افقی، 5 پیکسل فاصله عمودی، 15 پیکسل تاری و رنگ مشکی با شفافیت 30 درصد ایجاد شده است.

انواع افکت‌های جالب با box-shadow

ایجاد سایه داخلی با inset

با استفاده از inset، سایه به داخل باکس اعمال می‌شود، که جلوه‌ای فرو رفته ایجاد می‌کند.

.inner-shadow {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

در اینجا:

• سایه‌ای به داخل باکس اعمال شده که باعث ایجاد جلوه‌ای شبیه به فرو رفتگی می‌شود.

ایجاد سایه چندلایه

با box-shadow می‌توانید سایه‌های چندلایه ایجاد کنید. کافیست چندین سایه را با ویرگول از هم جدا کنید.

.multiple-shadows {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(0, 0, 0, 0.2);
}

در اینجا:

• دو سایه در جهت‌های مختلف ایجاد شده‌اند که جلوه‌ای دوبعدی به باکس می‌دهد.

ایجاد افکت سه‌بعدی

با استفاده از چند سایه، می‌توانید جلوه‌ای شبیه به سه‌بعدی ایجاد کنید.

.three-d {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), 6px 6px 10px rgba(0, 0, 0, 0.2);
}

در اینجا:

سایه‌ها به گونه‌ای تنظیم شده‌اند که باکس عمق بیشتری پیدا کرده و سه‌بعدی به نظر می‌رسد.

ایجاد سایه برای متن‌ها با text-shadow

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

.text {
  text-shadow: h-offset v-offset blur color;
}

پارامترهای text-shadow:

• h-offset: فاصله سایه در جهت افقی. مقدار مثبت سایه را به سمت راست و مقدار منفی به سمت چپ منتقل می‌کند.

• v-offset: فاصله سایه در جهت عمودی. مقدار مثبت سایه را به سمت پایین و مقدار منفی به سمت بالا می‌برد.

• blur: میزان تاری سایه. مقدار بیشتر باعث ایجاد سایه نرم‌تر و ملایم‌تر می‌شود.

• color: رنگ سایه.

مثال ساده از text-shadow

.title {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

در اینجا:

• سایه با 2 پیکسل فاصله افقی و عمودی، 5 پیکسل تاری و رنگ مشکی با شفافیت 30 درصد به متن اعمال شده است.

انواع افکت‌های جالب با text-shadow

ایجاد سایه چندلایه

با text-shadow می‌توانید سایه‌های چندلایه ایجاد کنید. این کار باعث می‌شود متن جلوه جذاب‌تر و خاص‌تری پیدا کند.

.glow-text {
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8), 0px 0px 10px rgba(0, 128, 255, 0.7);
}

در اینجا:

• سایه‌ای درخشان به متن اضافه شده است که درخشش سفید و آبی ایجاد می‌کند و جلوه‌ای زیبا و چشم‌نواز دارد.

ایجاد افکت سه‌بعدی

با افزودن سایه‌های متوالی، می‌توانید افکتی سه‌بعدی برای متن ایجاد کنید.

.three-d-text {
  text-shadow: 1px 1px 0px #000, 2px 2px 0px #333, 3px 3px 0px #666;
}

در اینجا:

• چندین سایه متوالی با رنگ‌های مختلف ایجاد شده‌اند تا جلوه سه‌بعدی به متن بدهند.

ایجاد افکت نورانی (Glow)

این افکت باعث می‌شود متن حالتی نورانی پیدا کند و معمولاً با رنگ‌های روشن یا شفافیت بالا ایجاد می‌شود.

.glow {
  text-shadow: 0px 0px 8px rgba(255, 255, 0, 1);
}

در اینجا:

• سایه درخشانی به رنگ زرد به متن اضافه شده که حالتی نورانی و جذاب به آن می‌دهد.

نکات و بهترین شیوه‌ها برای استفاده از box-shadow و text-shadow

• استفاده متعادل: زیاده‌روی در استفاده از سایه‌ها ممکن است طراحی را شلوغ و سنگین کند. سعی کنید از سایه‌ها به‌صورت متعادل و برای ایجاد عمق و تأکید استفاده کنید.

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

• ترکیب با جلوه‌های دیگر: می‌توانید از سایه‌ها همراه با افکت‌های hover و transition برای ایجاد جلوه‌های تعاملی و انیمیشنی جذاب استفاده کنید.

• توجه به خوانایی: در استفاده از text-shadow، به خوانایی متن توجه کنید؛ سایه‌های زیاد یا کنتراست بالا ممکن است خوانایی متن را کاهش دهد.

نتیجه‌گیری

box-shadow و text-shadow دو ابزار قدرتمند در CSS هستند که با استفاده از آن‌ها می‌توانید جلوه‌های بصری زیبا و حرفه‌ای ایجاد کنید. این ویژگی‌ها به شما امکان می‌دهند تا طراحی‌های خود را با سایه‌های جذاب، عمق‌دهی به عناصر و ایجاد افکت‌های خاص ارتقا دهید. با تمرین و آزمایش، می‌توانید از این ویژگی‌ها برای بهبود تجربه کاربری و زیبایی بصری سایت‌های خود بهره ببرید.