Text Shadows
Text shadows add depth and dimension to text, making it stand out from the background.
Syntax:
CSS
text-shadow: offset-x offset-y blur-radius color;
- offset-x: Horizontal offset of the shadow.
- offset-y: Vertical offset of the shadow.
- blur-radius: Blur radius of the shadow.
- color: Color of the shadow.
Example:
CSS
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Box Shadows
Box shadows add depth and dimension to elements.
Syntax:
CSS
box-shadow: inset? offset-x offset-y blur-radius spread-radius color;
- inset: Optional keyword to create an inner shadow.
- offset-x and offset-y: Horizontal and vertical offsets of the shadow.
- blur-radius: Blur radius of the shadow.
- spread-radius: Radius of the shadow’s spread.
- color: Color of the shadow.
Example:
CSS
.card {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
Best Practices
- Use sparingly: Overuse of shadows can make a design cluttered.
- Consider readability: Ensure shadows don’t hinder readability.
- Test on different devices: Shadows may appear differently on different screens.
- Use relative units: Use em or rem for offsets and blur radius to create responsive designs.
Example:
CSS
.card {
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
} You can add depth, dimension, and visual interest to your responsive web designs by effectively using text and box shadows.
