فصل دهم: کار با سایه‌ها (Box Shadow و Text Shadow)
(CSS Shadows)
سایه‌ها در طراحی وب باعث عمق دادن به عناصر و جذاب‌تر شدن سایت می‌شوند. در این فصل یاد می‌گیریم چطور با استفاده از CSS به متن و باکس‌ها سایه بدهیم.
۱. سایه متن (text-shadow)
قبلاً کمی باهاش آشنا شدیم. ساختار کلی:
text-shadow: x-offset y-offset blur-radius color;نمونه:
.title {
color: #fff;
background: #2c3e50;
font-size: 2rem;
padding: 16px;
text-shadow: 3px 3px 8px #000;
}- x-offset و y-offset: جابه‌جایی افقی/عمودی
- blur-radius: مقدار محو شدن
- color: رنگ سایه
۲. سایه جعبه (box-shadow)
برای دادن سایه به هر عنصر (مثلاً دکمه، کارت، تصویر و …):
فرمت دستور:
box-shadow: x-offset y-offset blur-radius spread-radius color;- spread-radius (اختیاری): گستردگی سایه
نمونه ساده:
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px 0 rgba(44, 62, 80, 0.22);
padding: 24px;
}- اولین مقدار: افق (مثبت = راست، منفی = چپ)
- دوم: عمود (مثبت = پایین، منفی = بالا)
- سوم: محو شدن
- چهارم: میزان گسترش سایه (اختیاری)
- رنگ: معمولا rgba برای شفافیت بهتر
۳. چندین سایه همزمان
می‌توان چندین سایه تعریف کرد (با کاما جدا می‌شوند):
.box {
box-shadow: 2px 2px 5px #aaa, 0 0 20px 2px #ff0 inset;
}- سایه دوم با inset به داخل عنصر اعمال می‌شود.
۴. مثال کامل
<div class="shadow-demo">CSS Shadow Example</div>.shadow-demo {
background: #f9fbe7;
padding: 30px;
border-radius: 8px;
font-size: 1.3rem;
text-align: center;
color: #33691e;
box-shadow: 0 8px 24px 2px rgba(76,175,80,0.23);
/* برای تست سایه داخلی (inset): */
/* box-shadow: 0 0 18px 3px #81c784 inset; */
}تمرین
- یک عنوان با سایه‌ی جذاب بساز.
- روی یک دکمه، سایه‌ی بیرونی و داخلی (inset) امتحان کن.
- با تغییر رنگ، شفافیت، انتشار و نوع سایه نتیجه را بررسی کن.
نکات سریع:
- مقادیر زیاد blur-radius سایه را محوتر و پخش‌تر می‌کند.
- رنگ سایه برای شباهت به کارت‌های مدرن، معمولاً rgba با شفافیت پایین است.
- برای حس عمق، سایه را از پایین عناصر بیار (y-offset مثبت).
- سایه‌های تودرتو (inset) برای حالتی که عنصر حالت فشار یافته پیدا کند مفید است.
