CSS टॉपिक्स

🎨 CSS Design✨पाठ 8 / 16

Borders, Shadows और Glass

border-radius, मल्टी-लेयर box-shadows, इनसेट शैडो और backdrop-filter से मॉडर्न फ्रॉस्टेड ग्लास UI बनाना सीखें।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

🎯 इस पाठ में आप क्या सीखेंगे

1.बॉर्डर्स और आउटलाइन्स: संरचनात्मक बॉर्डर्स, बिना रीफ्लो वाली आउटलाइन्स और `outline-offset` का महत्व।

2.Border-Radius ज्यामिति: पिल बैज (`9999px`), अण्डाकार कोने, और नेस्टेड कॉर्नर का गोल्डन फॉर्मूला।

3.`box-shadow` के 6 पैरामीटर्स: Inset, X/Y ऑफसेट, गॉसियन ब्लर, स्प्रेड रेडियस और RGBA कलरिंग।

4.मल्टी-लेयर एलिवेशन (Depth): एम्बिएंट और डायरेक्ट लाइट को मिलाकर आधुनिक और जीवंत डेप्थ बनाना।

5.ग्लासमोर्फिज्म (Glassmorphism): `backdrop-filter`, पारदर्शी हाइलाइट बॉर्डर और फॉलबैक्स।

6.60 FPS एनीमेशन सीक्रेट: लैगी `box-shadow` ट्रांजिशन को GPU-एक्सेलरेटेड स्यूडो-एलिमेंट से बदलना।

📐 `box-shadow` के सभी 6 पैरामीटर्स का पूरा विश्लेषण

ज्यादातर शुरुआती डेवलपर्स केवल 3 वैल्यूज का उपयोग करते हैं जिससे परछाई गंदी और अप्राकृतिक दिखती है। आधुनिक डिजाइन सिस्टम (Tailwind, Stripe, Apple) इन 6 पैरामीटर्स का इस्तेमाल करते हैं:

// संपूर्ण सिंटैक्स संरचना

box-shadow: inset 0px 12px 24px -6px rgba(15, 23, 42, 0.25);

1. [inset] (वैकल्पिक)दिशा

इसके बिना शैडो बॉक्स के बाहर गिरती है। `inset` लगाने पर शैडो बॉक्स के अंदरूनी फ्रेम में गिरती है — दबे हुए बटन (pressed state) के लिए उत्तम।

2. X-Offset (0px)क्षैतिज

क्षैतिज विस्थापन। पॉजिटिव मान शैडो को दाईं ओर ले जाता है; नेगेटिव बाईं ओर। प्राकृतिक रोशनी के लिए X को हमेशा `0px` रखें।

3. Y-Offset (12px)लंबवत

वर्टिकल दूरी। पॉजिटिव मान शैडो को नीचे की ओर गिराता है (जैसे छत की लाइट)। जितना अधिक Y-ऑफसेट होगा, कार्ड उतना ही ऊंचा तैरता दिखेगा।

4. Blur Radius (24px)मुलायमपन

गॉसियन ब्लर। `0px` होने पर परछाई का किनारा बिल्कुल कठोर दिखता है। जितना ज्यादा ब्लर होगा, परछाई उतनी ही मुलायम और प्राकृतिक बिखरेगी।

5. Spread Radius (-6px)माप

सीनियर डिजाइनरों का सीक्रेट! नेगेटिव मान शैडो को ब्लर करने से पहले चारों तरफ से अंदर सिकोड़ लेता है, जिससे अगल-बगल भद्दे काले धब्बे नहीं बनते।

6. Color (रंग)टोन

कभी भी सॉलिड ब्लैक `#000000` का उपयोग न करें! पारदर्शी `rgba(15, 23, 42, 0.08)` या ब्रांड कलर के हल्के शेड का उपयोग करें।

⭕ बॉर्डर-रेडियस ज्यामिति और नेस्टेड कॉर्नर का गोल्डन फॉर्मूला

एक नौसिखिए और अनुभवी डिजाइनर के काम में अंतर तुरंत कोनों की बनावट से पकड़ में आ जाता है। जब किसी गोल कोने वाले कार्ड के अंदर कोई दूसरी गोल चीज (जैसे तस्वीर या बैज) रखी हो, तो अंदरूनी रेडियस हमेशा बाहर वाले से छोटा होना चाहिए!

संकेंद्रित कोनों (Concentric Corners) का नियमInner Radius = Outer Radius - Padding

❌ नौसिखिए की गलती (समान रेडियस)

कार्ड का `border-radius: 20px; padding: 12px;` है और अंदरूनी तस्वीर पर भी `border-radius: 20px;` लगा दिया गया।

कोने के मोड़ पर खाली जगह पिचक कर बेहद पतली हो जाती है। अंदरूनी मोड़ और बाहरी मोड़ एक-दूसरे से बेमेल लगते हैं।

✅ प्रोफेशनल फॉर्मूला (संकेंद्रित वक्र)

बाहरी रेडियस (20px) - पैडिंग (12px) = अंदरूनी रेडियस: 8px।

दोनों वक्रों का केंद्र बिंदु बिल्कुल एक ही होता है! पूरे मोड़ के दौरान पैडिंग का गैप बिल्कुल समानांतर (parallel) और खूबसूरत रहता है।

border-radius: 50%;

जब चौड़ाई और ऊंचाई बराबर हो तो यह बिल्कुल गोल चक्र (Circular Avatar) बनाता है।

border-radius: 9999px;

कैप्सूल या पिल बैज! टेक्स्ट कितना भी लंबा क्यों न हो जाए, दोनों किनारे हमेशा अर्धवृत्ताकार रहते हैं।

border-radius: 40px / 20px;

स्लैश सिंटैक्स! यह क्षैतिज और लंबवत रेडियस अलग-अलग तय करके प्राकृतिक अण्डाकार (Squircle) आकार बनाता है।

💻 लाइव ग्लासमोर्फिज्म और शैडो प्लेग्राउंड

Interactive Live Editor— Edit HTML directly on the left to see live preview on the right

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Borders, Shadows & Glassmorphism</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      min-height: 100vh;
      font-family: system-ui, -apple-system, sans-serif;
      /* Vibrant mesh gradient background for glassmorphism */
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
      padding: 30px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }

/* Floating Frosted Glass Card */
    .glass-card {
      width: 100%;
      max-width: 360px;
      padding: 28px;
      /* Frosted glass technique */
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      /* Multi-layered soft ambient shadow */
      box-shadow: 
        0 20px 40px -15px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      color: #ffffff;
      text-align: center;
    }

.badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.5);
      margin-bottom: 14px;
    }

.title {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.desc {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 20px;
    }

.cta-btn {
      display: block;
      width: 100%;
      padding: 12px;
      font-size: 14px;
      font-weight: 700;
      color: #312e81;
      background: #ffffff;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s, box-shadow 0.2s;
    }

.cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
  </style>
</head>
<body>
  <div class="glass-card">
    <span class="badge">Modern UI Glass</span>
    <h2 class="title">Glassmorphism Card</h2>
    <p class="desc">
      Notice how the vibrant colors behind this card blur smoothly through the semi-transparent glass panel.
    </p>
    <button class="cta-btn">Unlock Premium</button>
  </div>
</body>
</html>

Click & type to editHTML5

Browser Preview

🌄 मल्टी-लेयर एलिवेशन: Stripe और Tailwind का सीक्रेट

वास्तविक दुनिया में कोई भी वस्तु सिर्फ एक ही बिंदु से आने वाली रोशनी से नहीं चमकती। हवा और फर्श से टकराकर भी हल्की रोशनी फैलती है। इसी वास्तविकता को CSS में दर्शाने के लिए दो शैडोज़ को कॉमा लगाकर एक साथ लिखा जाता है:

लेयर का रोल	box-shadow मान	दृश्य प्रभाव
1. एम्बिएंट संपर्क शैडो (Ambient)	0 1px 3px 0 rgba(0,0,0,0.1)	बारीक और हल्की संपर्क रेखा जो वस्तु को सतह से जोड़कर रखती है ताकि वह हवा में कटी-फटी न लगे।
2. डायरेक्ट मुख्य शैडो (Key Light)	0 20px 25px -5px rgba(0,0,0,0.1)	गहरा और मुलायम वर्टिकल फैलाव जो यह दर्शाता है कि कार्ड बैकग्राउंड से कितनी ऊंचाई (Z-index) पर तैर रहा है।

पूर्ण 2-लेयर एलिवेशन कोड:

.elevated-card {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),     /* लेयर 1: बारीक संपर्क परछाई */
    0 20px 25px -5px rgba(0, 0, 0, 0.1);   /* लेयर 2: वातावरण में फैली ऊंचाई */
}

✨ परफेक्ट ग्लासमोर्फिज्म के 4 अनिवार्य घटक

ग्लासमोर्फिज्म धुंधले कांच (Frosted Glass) जैसा अनुभव देता है। यदि इन 4 घटकों में से एक भी छूट जाए, तो प्रभाव फीका और प्लास्टिक जैसा दिखने लगता है:

1. अर्ध-पारदर्शी बैकग्राउंडbackground: rgba(255, 255, 255, 0.18);

यह कांच के आर-पार रंगों को गुजरने देता है। कभी भी सॉलिड सफेद न लगाएं; ओपेसिटी हमेशा 0.15 से 0.25 के बीच रखें।

2. बैकड्रॉप ब्लर फ़िल्टरbackdrop-filter: blur(16px);

कांच के पीछे मौजूद आकृतियों को धुंधला कर देता है जिससे आगे लिखा हुआ टेक्स्ट बिल्कुल स्पष्ट पढ़ा जा सके।

3. 1px पारदर्शी हाइलाइट बॉर्डरborder: 1px solid rgba(255, 255, 255, 0.35);

यह असली कटे हुए कांच के चमकीले किनारे जैसा दिखता है और कार्ड को बैकग्राउंड से अलग पहचान देता है।

4. अंदरूनी लाइट रिफ्लेक्शनbox-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;

कांच के अंदरूनी रिफ्लेक्शन को दर्शाने वाला इनसेट शैडो, जो इसे त्रि-आयामी (3D) मोटाई देता है।

कोड का पंक्ति-दर-पंक्ति विश्लेषण

backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);

कार्ड के पीछे के पिक्सल को ब्लर करता है। iOS Safari (iPhone) पर इसे काम कराने के लिए `-webkit-` प्रीफिक्स लगाना अनिवार्य है!

border: 1px solid rgba(255, 255, 255, 0.35);

कांच का 1px चमकीला किनारा बनाता है। पारदर्शी सफेद होने के कारण यह पीछे के ग्रेडिएंट रंगों के साथ अपने आप घुल-मिल जाता है।

box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);

नेगेटिव स्प्रेड `-15px` यह पक्का करता है कि परछाई कार्ड के नीचे शांति से रहे और दाएँ-बाएँ भद्दे धब्बे न छोड़े।

.badge { border-radius: 9999px; }

मॉडर्न पिल बैज बनाता है। शब्द छोटा हो या बड़ा, दोनों किनारे हमेशा बिल्कुल गोल बने रहते हैं।

🧠 अपनी समझ की जाँच करें: CSS Borders & Shadows

Q1CSS नियम `box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);` में नेगेटिव मान `-5px` क्या दर्शाता है?

Q2`filter: blur(10px);` और `backdrop-filter: blur(10px);` में सबसे बड़ा अंतर क्या है?

Q3यदि किसी कार्ड में `border-radius: 24px;` और `padding: 16px;` हो, तो उसके अंदर मौजूद तस्वीर का `border-radius` कितना होना चाहिए ताकि कोने सममित (concentric) दिखें?

Q4सीनियर डेवलपर्स होवर पर सीधे `box-shadow` को एनिमेट करने (जैसे `transition: box-shadow 0.3s`) से क्यों बचते हैं, और इसके बदले क्या तकनीक अपनाते हैं?

🛠️

प्रैक्टिस चैलेंज: 3D ग्लो बटन तैयार करें

दाएँ हाथ के लाइव कोड एडिटर में `.cta-btn` बटन पर एक रंगीन ग्लो और बटन दबाने वाला प्रेस इफेक्ट जोड़ें:

स्टेप 1: .cta-btn:hover में एक चमकदार ब्रांड शैडो जोड़ें: box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);।
स्टेप 2: .cta-btn:active स्यूडो-क्लास जोड़ें जिसमें transform: translateY(1px); और इनसेट शैडो box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset; हो।
स्टेप 3: लाइव प्रिव्यू में बटन पर क्लिक करके दबाए रखें — देखें कि कैसे बटन एक असली कीबोर्ड की तरह अंदर की ओर दबता महसूस होता है!

💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें

.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5); } .cta-btn:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset; }

सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न

❌ गलती: फोकस इंडिकेटर के लिए Border का उपयोग करना

कीबोर्ड फोकस दर्शाने के लिए कभी भी `border` न लगाएं! फोकस होने पर बॉर्डर की चौड़ाई बदलने से आसपास का पूरा कंटेंट 2px हिल जाता है (लेआउट जिटर)। हमेशा outline: 2px solid #6366f1; outline-offset: 2px; का इस्तेमाल करें, जो बिना लेआउट हिलाए WCAG एक्सेसिबिलिटी मानकों को पूरा करता है।

✅ प्रो टिप: 60 FPS स्मूथ शैडो एनीमेशन ट्रिक

कार्ड होवर को बिना किसी लैग के एनिमेट करने के लिए, भारी शैडो को .card::after पर position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; के साथ पहले ही रेंडर कर लें। होवर करने पर केवल `opacity: 1` करें — ब्राउज़र इसे सीधे GPU पर 120fps की मक्खन जैसी गति से एनिमेट करेगा!

💬 Interview Q: `border`, `outline`, और `box-shadow: 0 0 0 2px color` में क्या अंतर है?

Border: बॉक्स मॉडल का हिस्सा है। जगह घेरता है, एलिमेंट का आकार बदलता है, `border-radius` का पालन करता है और बदलने पर रीफ्लो (reflow) करता है।
Outline: बॉक्स मॉडल के बाहर रहता है। कोई जगह नहीं घेरता, रीफ्लो नहीं करता, और `outline-offset` की सुविधा देता है।
Box-Shadow रिंग (`0 0 0 2px`): शून्य जगह घेरता है, पूरी तरह `border-radius` के अनुसार मुड़ता है, और कॉमा लगाकर कई रंगों के छल्ले एक साथ बनाए जा सकते हैं।

💬 Interview Q: `backdrop-filter` कई बार स्क्रीन पर रेंडर क्यों नहीं होता या पारदर्शी क्यों नहीं दिखता?

इसके तीन मुख्य कारण होते हैं:

WebKit प्रीफिक्स गायब होना: iOS Safari पर -webkit-backdrop-filter: blur(...) अनिवार्य है। इसके बिना बैकग्राउंड ब्लर नहीं होता।
स्टैकिंग कॉन्टेक्स्ट समस्या: यदि पैरेंट पर opacity < 1 या filter लगा हो, तो ब्राउज़र नया रेंडरिंग सरफेस बना देता है जिससे ब्लर कट सकता है।
ठोस बैकग्राउंड: यदि बैकग्राउंड सॉलिड व्हाइट (`#ffffff`) है, तो ब्लर सफेद पेंट के नीचे दब जाता है और दिखाई नहीं देता! बैकग्राउंड का पारदर्शी होना जरूरी है।

💬 Interview Q: जब किसी पैरेंट पर `overflow: hidden` लगा हो तो `box-shadow` का क्या होता है?

यदि चाइल्ड एलिमेंट पर `box-shadow` है और उसके पैरेंट पर overflow: hidden; लगा है, तो वह परछाई पैरेंट की दीवार पर पहुंचते ही चाकू से कटी हुई जैसी छंट (clip) जाएगी!

समाधान: शैडो हमेशा सबसे बाहरी कंटेनर पर लगाएं, या पैरेंट में इतनी पर्याप्त पैडिंग रखें कि परछाई बिना कटे आराम से बिखर सके।

अगला लेसनDisplay & Visibility