Beginner LevelCSS & Modern Layouts
How do border-radius, box-shadow, and text-shadow create visual effects?
❓ Interview Prompt: Explain rounded corners, layered box shadows, and text shadows for card UI design.
CSS provides properties for adding visual depth and rounded styling:
•
`border-radius`: Rounds element corners.
border-radius: 8px rounds all corners equally. border-radius: 50% creates a circle.•
`box-shadow`: Adds outer (or inset) shadows. Syntax:
offset-x offset-y blur spread color. Multiple shadows can be comma-separated for layered depth effects.•
`text-shadow`: Adds shadows to text characters. Syntax:
offset-x offset-y blur color.Code Implementation Example
css
.card {
border-radius: 12px;
/* Layered shadow for natural depth */
box-shadow:
0 1px 3px rgba(0,0,0,0.08),
0 4px 12px rgba(0,0,0,0.05);
}
.card:hover {
box-shadow:
0 4px 12px rgba(0,0,0,0.12),
0 12px 28px rgba(0,0,0,0.08);
}
.hero-title {
text-shadow: 0 2px 4px rgba(61, 44, 46, 0.3);
}💡Layered card shadows with hover elevation and text shadow.
🎯 Interview Key Takeaway
Layer multiple box-shadows for realistic depth. Use subtle shadows for cards and stronger ones on hover for lift effect.
#Shadows#Border Radius#Visual#Beginner
Back to all CSS & Modern Layouts Questions→