سایه‌ها (Shadows)

آشنایی با box-shadow و text-shadow: سایه خارجی، داخلی و چندلایه

سایه در CSS

سایه‌ها عمق و بُعد به طراحی می‌دهند. CSS دو نوع سایه ارائه می‌دهد: box-shadow و text-shadow.

۱. box-shadow

box-shadow: x-offset y-offset blur spread color;
    
    .box {
        box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    }
پارامترتوضیح
x-offsetجابه‌جایی افقی
y-offsetجابه‌جایی عمودی
blurمیزان تاری
spreadگسترش سایه
colorرنگ سایه

سایه داخلی (Inset)

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

چند سایه

.box {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.2);
    }

۲. text-shadow

.title {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    /* متن برجسته */
    .embossed {
        text-shadow: 1px 1px 0 white, -1px -1px 0 #888;
    }
    
    /* گلو */
    .glow {
        color: white;
        text-shadow: 0 0 10px #3498db;
    }

سایه‌های رایج

/* سایه نرم */
    .soft { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    
    /* سایه متوسط */
    .medium { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    
    /* سایه قوی */
    .deep { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    
    /* متریال */
    .material { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط