Bits of .NET

🛡️ Box Shadow = Add Depth

Flat design is basic. Box shadow adds depth. Realistic depth, elevation, focus. Essential for modern UI.

📝 Box Shadow Syntax

/* offset-x offset-y blur-radius spread-radius color */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

/* Multiple shadows */
box-shadow: 
    0 4px 6px rgba(0,0,0,0.1),
    0 2px 4px rgba(0,0,0,0.06);

/* Inset shadow (inner) */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

/* Shadow with spread */
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.3);

/* No shadow */
box-shadow: none;

🎯 Shadow Examples

/* Card shadow (subtle) */
.card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Card shadow (medium) */
.card-medium {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

/* Card shadow (large) */
.card-large {
    box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
}

/* Button shadow */
.button {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.button:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Floating element */
.float {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Inner shadow (inset) */
.inset {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Colored shadow */
.colored-shadow {
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Box Shadow Tips */
- Use subtle shadows for cards
- Use larger shadows for elevated elements
- Use colored shadows for brand accent
- Use inset for pressed states
- Multiple shadows create realistic depth

💡 Box Shadow Tips

• Use subtle shadows for cards
• Use larger shadows for elevated elements
• Use colored shadows for brand accent
• Use inset for pressed states
• Multiple shadows create realistic depth