CSS Shadows & Outlines Kya Hote Hain?

Introduction to Shadows & Outlines

CSS me shadows aur outlines ka use elements ko visually enhance karne ke liye hota hai. box-shadow aur text-shadow properties elements ko ek 3D-like depth dete hain, jabki outline property accessibility aur focus states ko highlight karne ke liye bohot useful hai.

1. The box-shadow Property

box-shadow property ka use kisi bhi element ke frame ke around ek ya zyada shadows add karne ke liye hota hai.

Syntax:

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;

• offset-x: Shadow ko horizontally (left/right) move karta hai.
• offset-y: Shadow ko vertically (up/down) move karta hai.
• blur-radius: Shadow ko soft ya blurry banata hai.
• spread-radius: Shadow ka size badhata ya ghatata hai.
• inset: Shadow ko box ke andar ki taraf banata hai.

.card { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); }

2. The text-shadow Property

text-shadow property ka use text ke characters par shadow effect lagane ke liye hota hai. Isse text ki readability aur style improve hoti hai.

Syntax:

text-shadow: <offset-x> <offset-y> [blur-radius] <color>;

h1 { text-shadow: 2px 2px 4px gray; }

3. The outline Property

outline property element ke border ke bahar ek line draw karti hai. Iska mukhya use accessibility ke liye focus state dikhane ke liye hota hai.

Syntax:

outline: <outline-width> <outline-style> <outline-color>;

button:focus { outline: 3px solid blue; }

Outline vs. Border

Key Takeaways

• box-shadow se elements ko depth milti hai.
• text-shadow se text ko highlight kiya ja sakta hai.
• outline accessibility ke liye important hai aur yeh layout ko affect nahi karta.
• Multiple shadows ko comma (`,`) se separate karke apply kiya ja sakta hai.