Articles
CSS का परिचय
पारदर्शिता से संबंधित CSS गुण

पारदर्शिता से संबंधित CSS गुण

यह लेख पारदर्शिता से संबंधित CSS गुणों की व्याख्या करता है।

आप opacity, z-index, और clip-path गुणों के उपयोग और सिंटैक्स के बारे में जान सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-opacity.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

फ़िल्टर प्रभाव

opacity गुण 

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

opacity गुण का उपयोग किसी तत्व की पारदर्शिता सेट करने के लिए किया जाता है। यह गुण पूरे तत्व की पारदर्शिता को निर्दिष्ट करता है, जहाँ 0 के करीब मान अधिक पारदर्शी और 1 के करीब मान अधिक अपारदर्शी होते हैं। opacity गुण को एनीमेशन के साथ जोड़कर धुंधला होने और गायब होने के प्रभाव बनाए जा सकते हैं।

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

इस उदाहरण में, सेटिंग्स निम्नलिखित रूप में कॉन्फ़िगर की गई हैं।

  • opacity प्रॉपर्टी को 1 पर सेट करने पर, एलिमेंट पूरी तरह अपारदर्शी (opaque) हो जाता है, बिल्कुल सामान्य एलिमेंट की तरह।

  • opacity प्रॉपर्टी को 0.5 पर सेट करने पर, एलिमेंट अर्ध-पारदर्शी (semi-transparent) हो जाता है।

  • opacity प्रॉपर्टी को 1 पर सेट करने पर, एलिमेंट पूरी तरह से पारदर्शी (transparent) हो जाता है और बिल्कुल भी दिखाई नहीं देता।

  • transition प्रॉपर्टी को opacity पर सेट किया गया है, इसलिए जब माउस कर्सर एलिमेंट पर जाता है, तो यह धीरे-धीरे फीका पड़ जाता है और 2 सेकंड बाद पूरी तरह पारदर्शी हो जाता है।

  • यदि पैरेंट एलिमेंट की opacity प्रॉपर्टी 0.5 है, तो उसके चाइल्ड एलिमेंट्स भी अर्ध-पारदर्शी हो जाते हैं।

z-index गुण 

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

z-index एक गुण है जिसका उपयोग CSS में तत्वों की स्टैकिंग क्रम नियंत्रित करने के लिए किया जाता है। यह गुण निर्दिष्ट करता है कि कोई तत्व अन्य तत्वों के आगे दिखाई देना चाहिए या पीछे।

  • लाल बॉक्स में, z-index को 1 पर सेट किया गया है, इसलिए यह अन्य एलिमेंट्स के सामने दिखाई देता है।
  • नीले बॉक्स में, z-index को 0 पर सेट किया गया है, इसलिए यह लाल बॉक्स के पीछे दिखाई देता है।
  • हरे बॉक्स में, z-index को 2 पर सेट किया गया है, और यह सबसे आगे दिखाई देता है।
  • हल्के नीले बॉक्स में, सबसे बड़ा z-index (4) सेट किया गया है, लेकिन क्योंकि पैरेंट एलिमेंट का z-index 0 है, यह सबसे आगे नहीं दिखता।

मूल तंत्र

z-index प्रॉपर्टी एक संख्यात्मक मान लेती है, जहां उच्च संख्याओं वाले तत्व छोटे संख्याओं वाले तत्वों के सामने प्रदर्शित होते हैं। डिफ़ॉल्ट रूप से, जिन तत्वों के लिए z-index निर्दिष्ट नहीं है, वे HTML में दिखाई देने के क्रम के अनुसार स्टैक होते हैं।

हालांकि, z-index को प्रभावी होने के लिए, तत्व की position प्रॉपर्टी को relative, absolute, fixed, या sticky में से किसी एक पर सेट होना चाहिए। यदि position static है, तो z-index का कोई प्रभाव नहीं पड़ता।

मान (Values)

  • यदि z-index को सकारात्मक संख्या दी जाती है, तो तत्व अधिक सामने की ओर प्रदर्शित होता है। संख्या जितनी बड़ी होगी, तत्व उतना अधिक अन्य तत्वों के सामने प्रदर्शित होगा।

    • यदि z-index को 0 पर सेट किया गया है, तो यह डिफ़ॉल्ट स्टैकिंग क्रम को बनाए रखता है।
    • यदि z-index को 1 पर सेट किया गया है, तो तत्व अन्य तत्वों के सामने एक परत पर प्रदर्शित होता है।

  • यदि z-index को नकारात्मक संख्या दी जाती है, तो तत्व अधिक पीछे की ओर प्रदर्शित होता है। संख्या जितनी छोटी होगी, तत्व उतना अधिक अन्य तत्वों के पीछे प्रदर्शित होगा।

    • यदि z-index को -1 पर सेट किया गया है, तो तत्व अन्य तत्वों के पीछे एक परत में प्रदर्शित होता है।

नोट्स

  • z-index पैरेंट तत्व के z-index पर निर्भर करता है। जब किसी पैरेंट तत्व का z-index निर्दिष्ट होता है, तो उस पैरेंट तत्व के भीतर सापेक्ष स्टैकिंग क्रम लागू होता है। इसे स्टैकिंग कॉन्टेक्स्ट कहा जाता है। इसलिए, भले ही चाइल्ड तत्व का z-index ऊंचा हो, यदि पैरेंट तत्व का z-index कम है, तो वह अन्य तत्वों के सामने प्रदर्शित नहीं होगा।

clip-path प्रॉपर्टी

CSS में clip-path एक प्रॉपर्टी है जिसका उपयोग तत्वों को विशिष्ट आकारों में क्लिप करने के लिए किया जाता है। सामान्यतः, तत्व आयताकार बॉक्स के रूप में प्रदर्शित होते हैं, लेकिन clip-path के साथ, तत्वों को वृत्त या बहुभुज जैसे जटिल आकारों में प्रदर्शित किया जा सकता है। यह दृश्य डिज़ाइन या इंटरैक्टिव प्रभाव बनाने के लिए एक बहुत ही उपयोगी उपकरण है।

clip-path प्रॉपर्टी एक तत्व के डिस्प्ले क्षेत्र को सीमित करती है और निर्दिष्ट आकार के बाहर के हिस्सों को छुपाती है। अगले हिस्से में, हम बताएंगे कि सामान्यतः उपयोग किए जाने वाले आकारों को कैसे निर्दिष्ट किया जाए।

मुख्य क्लिपिंग आकार

circle() 
1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() एक तत्व को गोलाकार आकार में क्लिप करता है। आप केंद्र और वृत्त की त्रिज्या निर्दिष्ट करके आकार को नियंत्रित कर सकते हैं।

  • पहला 50% वृत्त की त्रिज्या है (तत्व की चौड़ाई या ऊंचाई के प्रतिशत के रूप में)।
  • इसके बाद का at 50% 50% वृत्त का केंद्र स्थान है (तत्व की चौड़ाई और ऊंचाई के प्रतिशत के रूप में)।

यहाँ, यह तत्व के आयामों के आधे त्रिज्या वाला एक वृत्त निर्दिष्ट करता है, जो तत्व के केंद्र में स्थित है।

ellipse() 
1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse() किसी तत्व को अंडाकार आकार में व्यवस्थित करता है। आप चौड़ाई और ऊंचाई की त्रिज्या, और साथ ही केंद्र स्थान निर्दिष्ट करते हैं।

  • पहला 50% 30% चौड़ाई और ऊंचाई की त्रिज्या है।
  • इसके बाद का at 50% 50% अंडाकार का केंद्र स्थान है।

इस उदाहरण में, यह तत्व में केंद्रित अंडाकार निर्दिष्ट करता है, जिसकी चौड़ाई 50% और ऊंचाई 30% है।

polygon() 
1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() निर्दिष्ट शिखरों के सेट को जोड़कर एक बहुभुज बनाता है। प्रत्येक शीर्ष को तत्व के भीतर सापेक्ष निर्देशांक के साथ निर्दिष्ट किया जाता है।

  • इस उदाहरण में, यह तीन शिखर (शीर्ष केंद्र, निचला दायां, निचला बायां) निर्दिष्ट करता है और इसे एक त्रिभुज में व्यवस्थित करता है। polygon() बहुत लचीला है और किसी भी आकार का निर्माण कर सकता है।
inset() 
1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() तत्व के बाहरी किनारों से अंदर की ओर व्यवस्थित करता है। चारों किनारों से दूरी निर्दिष्ट करके एक आयत परिभाषित करें।

  • 10% शीर्ष किनारे से दूरी है।
  • 20% दाएं किनारे से दूरी है।
  • 30% निचले किनारे से दूरी है।
  • 40% बाएं किनारे से दूरी है।

यह विनिर्देशन एक आयत बनाता है जो तत्व के भीतर सिकुड़ती है।

SVG का उपयोग करके clip-path 

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path न केवल प्राचीन आकार, बल्कि एक SVG <clipPath> तत्व का उपयोग करके जटिल आकार भी व्यवस्थित कर सकता है।

  • इस उदाहरण में, SVG में परिभाषित एक वृत्ताकार क्लिप पाथ, जिसका id myClip है, एक HTML एलिमेंट पर लागू किया गया है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

`object-fit` और `object-position` प्रॉपर्टीज़फिल्टर इफेक्ट्स से संबंधित CSS गुण