مرور پایانی — درس Box Shadow در CSS
خب بچهها، وقت جمعبندی رسید!
امروز با یکی از افکتهای خوشاستفادهی CSS آشنا شدیم: box-shadow.
نکات کلیدی که یاد گرفتیم
- چهار مقدار اصلی سایه
- افست افقی → جابهجایی سایه به چپ یا راست
- افست عمودی → جابهجایی سایه به بالا یا پایین
- شعاع بلور → میزان تار یا واضح بودن سایه
- رنگ (با امکان شفافیت از طریق
rgba)
- کنترل جهت سایه
- مقادیر مثبت → سایه به پایین و راست
- مقادیر منفی → سایه به بالا و چپ
- سایه داخلی (Inset)
- 🔹 سایه به داخل عنصر منتقل میشود.
- ترکیب چند سایه
box-shadow: 2px 2px 5px rgba(0,0,0,0.15), /* سایه بیرونی */ inset 1px 1px 3px rgba(0,0,0,0.25); /* سایه داخلی */ 🔹 با ویرگول میتوان چند سایه را همزمان تعریف کرد.
💬 نکتهی طلایی
سایهها فقط برای زیبایی نیستند؛ اگر درست و ظریف استفاده شوند، میتوانند حس عمق، لایهبندی و تمرکز را در طراحی ایجاد کنند.
🪄 قدم بعدی
در درس بعدی میرویم سراغ گوشههای گرد با border-radius. وقتی سایهها و گوشههای گرد ترکیب شوند، طراحی شما مدرنتر و جذابتر خواهد شد.
✨ بهرام جان، حالا وقتشه این مفاهیم رو روی چند باکس ساده تمرین کنی. سایه بیرونی، سایه داخلی و ترکیب چند سایه رو امتحان کن تا دستت راه بیفته.