Blog

CSS Shadows & Outlines Kya Hote Hain – CSS Shadows & Outlines

CSS Shadows & Outlines Kya Hain ?

CSS Shadows & Outlines ek styling technique hai jo elements ko depth aur highlighting effect deti hai. Box-shadow kisi bhi element ke around shadow create karta hai, jo ki depth aur 3D effect deta hai. Text-shadow text ke piche shadow add karta hai, jo readability aur style enhance karta hai. Outline kisi bhi element ke outer border ke bahar ek extra border jaisa dikhta hai, jo accessibility aur focus highlight ke liye use hota hai. Shadows ka effect blur, spread aur color se control hota hai, jabki outlines directly element ke size aur shape ko follow karti hain.

1. box-shadow – Element Ke Piche Shadow Dene Ka Tarika

box-shadow” ek CSS property hai jo kisi element ke around shadow add karne ke liye use hoti hai. Isme shadow ka color, size, blur effect aur position customize kiya ja sakta hai. Yeh multiple shadows bhi support karta hai, jo comma-separate values se define hoti hain. Syntax kuch aisa hota hai: box-shadow: 10px 10px 5px gray; Jisme pehla aur doosra value X aur Y offset ko represent karta hai, teesra blur radius aur last color. Yeh UI design ko aur attractive banane ke liye kaafi useful hota hai, jisse elements depth effect aur 3D look le sakte hain.

Syntax:

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Explanation:

  • horizontal-offset: Shadow ko left ya right move karne ke liye.
  • vertical-offset: Shadow ko up ya down move karne ke liye.
  • blur-radius: Shadow ki softness ya sharpness define karta hai.
  • spread-radius: Shadow ka size increase ya decrease karta hai.
  • color: Shadow ka color define karta hai.

Example:

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

Yeh code ek div element ke piche ek black color ki shadow generate karega.

2. text-shadow – Text Ko Shadow Effect Dena

text-shadow ek CSS property hai jo text ke around shadow effect add karti hai. Iska use text ko highlight karne ya stylish banane ke liye hota hai. Basic syntax hota hai: text-shadow: h-offset v-offset blur-radius color; Jisme h-offset horizontal shadow distance, v-offset vertical shadow distance, blur-radius shadow ka softness, aur color shadow ka rang define karta hai. Example: text-shadow: 2px 2px 5px red; Yeh red shadow create karega. Multiple shadows bhi add kiye ja sakte hain comma use karke. Yeh property mostly headings ya stylish text effects ke liye use hoti hai.

Syntax:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Explanation:

  • horizontal-offset: Shadow ko left ya right move karne ke liye.
  • vertical-offset: Shadow ko up ya down move karne ke liye.
  • blur-radius: Shadow ka blur effect control karta hai.
  • color: Shadow ka color specify karta hai.

Example:

h1 {
    font-size: 40px;
    color: red;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
}

Is example me h1 text ke piche black color ki shadow create hogi.

3. outline – Element Ke Outer Border Ko Highlight Karna

Outline ka matlab ek tarah ka naksha ya sankshipt roop hota hai jo kisi vishay ke mukhya binduon ko dikhata hai. Yeh ek tarike se ek structure ya framework hota hai jo kisi bhi lekhan, project, ya vichar ko behtar tarike se vyakt karne me madad karta hai. Outline likhne se kisi bhi content ko systematically organize karna aasan ho jata hai. Yeh jadatar essays, presentations, stories, ya research papers likhne me use hota hai. Isme headings aur subheadings hoti hain jo ek clear aur logical flow provide karti hain, taki vishay ko behtar samjha ja sake.

Syntax:

outline: width style color;

Explanation:

  • width: Outline ka thickness set karta hai.
  • style: Outline ka style define karta hai (solid, dashed, dotted, etc.).
  • color: Outline ka color set karta hai.

Example:

button {
    outline: 3px solid blue;
}

Yeh button ke bahar ek blue color ka solid outline add karega.

  • box-shadow kisi bhi element ke piche shadow effect add karta hai.
  • text-shadow text ke piche shadow effect lagata hai.
  • outline kisi element ke bahar ek border-like effect create karta hai.

Agar aap kisi bhi website ya UI design ko attractive banana chahte hain, to CSS shadows aur outlines ka sahi use zaroor karein!

Quiz: Test Your Knowledge on CSS Shadows & Outlines

Bonus: Practical Application!

Aaj hi apne webpage par CSS shadows & outlines ka istemal karke dekhein!

CSS shadows & outlines ko sahi tareeke se samajhne ke liye different types jaise box-shadow, text-shadow, outline, outline-offset ka upayog karein aur apne webpage ke styling ko aur bhi effective banayein.

Leave a Reply