यूज़र इंटरफ़ेस से संबंधित CSS गुण

Articles

यह लेख यूज़र इंटरफ़ेस से संबंधित CSS गुणों को समझाता है।

आप content, cursor, pointer-events और resize प्रॉपर्टीज़, उनके उपयोग के मामलों और उन्हें लिखने के तरीके के बारे में जान सकते हैं।

YouTube Video

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

css-ui.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-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

यूज़र इंटरफ़ेस संबंधित

`content` प्रॉपर्टी

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

content प्रॉपर्टी का उपयोग सामग्री को जोड़ने के लिए किया जाता है, मुख्यतः ::before या ::after तत्वों में। इस प्रॉपर्टी का उपयोग टेक्स्ट, इमेज, काउंटर आदि को परिभाषित करने के लिए किया जाता है जो सीधे तत्व के अंदर प्रदर्शित नहीं होते। इसका मुख्य उद्देश्य सजावटी सामग्री या पूरक जानकारी को नियंत्रित करना है जो सीधे HTML में नहीं लिखी गई है और इसे स्टाइलशीट के माध्यम से नियंत्रित किया जा सकता है।

इस उदाहरण में, "टिप्पणी: " तत्व से पहले जोड़ा गया है और ")समाप्त)" बाद में जोड़ा गया है। ये क्रमशः ::before और ::after नामक पीseudo-एलीमेंट का उपयोग करते हैं।

`content` प्रॉपर्टी के मान

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

content प्रॉपर्टी निम्नलिखित मान ले सकती है:।

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

पाठ
- आप स्ट्रिंग को सीधे डबल कोट्स ("") में बंद करके टेक्स्ट जोड़ सकते हैं।

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

छवि
- आप url() फ़ंक्शन का उपयोग करके छवि जोड़ सकते हैं।

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

काउंटर
- counter() फ़ंक्शन का उपयोग काउंटर दिखाने के लिए करें।

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

एट्रिब्यूट
- attr() फ़ंक्शन का उपयोग HTML एलिमेंट के एट्रिब्यूट वैल्यू को दिखाने के लिए किया जा सकता है। उदाहरण के लिए, आप title एट्रिब्यूट को प्रदर्शित कर सकते हैं।

1/* None */
2.content-none::before {
3    content: none;
4}

कोई नहीं
- निर्दिष्ट करता है कि कोई सामग्री प्रदर्शित नहीं की जानी चाहिए। यह डिफॉल्ट स्थिति है।

उपयोग के नोट्स

content प्रॉपर्टी का उपयोग करते समय निम्न बिंदुओं का ध्यान रखें:।

content प्रॉपर्टी केवल पीseudo-एलीमेंट्स पर लागू होती है, नियमित तत्वों पर नहीं।
चूंकि इसे DOM में नहीं जोड़ा जाता है, इसे सीधे जावास्क्रिप्ट के माध्यम से नियंत्रित नहीं किया जा सकता।
यह लेआउट को प्रभावित कर सकता है, इसलिए इसे आमतौर पर सजावटी या पूरक जानकारी प्रदर्शित करने के लिए उपयोग किया जाता है।

`cursor` गुण

cursor गुण का उपयोग यह बताने के लिए किया जाता है कि जब माउस पॉइंटर किसी तत्व पर रखा जाए तो कौन सा कर्सर दिखाना है। आप विभिन्न कर्सर शैलियों को निर्दिष्ट कर सकते हैं, और इसका आमतौर पर इंटरैक्टिव तत्वों पर उपयोग यूज़र अनुभव को बेहतर बनाने के लिए किया जाता है।

मुख्य कर्सर प्रकार

कर्सर प्रकारों के रूप में निम्नलिखित मान निर्दिष्ट किए जा सकते हैं:।

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`default`

default सामान्य एरो कर्सर है (ब्राउज़र का डिफ़ॉल्ट कर्सर)।

`pointer`

pointer हाथ के आकार का कर्सर है जो लिंक पर रखा जाने पर दिखता है।

`text`

text एक I-बीम कर्सर है जो उन क्षेत्रों में दिखता है जहां टेक्स्ट चुना जा सकता है।

`move`

- `move` एक क्रॉस-आकार का कर्सर है जिसे तब उपयोग किया जाता है जब तत्व को खींचा जा सकता हो।

`crosshair`

crosshair एक क्रॉसहेयर कर्सर है जो सटीक चयन के लिए होता है।

`not-allowed`

not-allowed उन क्षेत्रों या क्रियाओं के लिए कर्सर है, जो अनुमति नहीं हैं।

`help`

help एक प्रश्न चिह्न वाला कर्सर है जो उन तत्वों पर दिखता है जो सहायता जानकारी दे सकते हैं।

`wait`

wait एक रेतघड़ी या वृत्ताकार कर्सर है जो प्रसंस्करण स्थिति को दर्शाता है।

`progress`

progress एक कर्सर है जो चल रही प्रक्रिया को दर्शाता है। हालांकि, यह इंगित करता है कि उपयोगकर्ता अन्य क्रियाएं कर सकता है।

`grab`

grab वह कर्सर है जो खींचे जाने योग्य तत्वों को पकड़ने के लिए होता है।

`grabbing`

grabbing वह कर्सर है जो यह दर्शाता है कि कोई तत्व खींचा जा रहा है।

`resize`

resize वह कर्सर है जो तब उपयोग होता है जब किसी विंडो या तत्व का आकार बदला जा सके। दिशा के आधार पर विभिन्न प्रकार होते हैं।

n-resize: ऊपर की ओर इशारा करने वाला एक रिसाइज़ कर्सर।
s-resize: नीचे की ओर इशारा करने वाला एक रिसाइज़ कर्सर।
e-resize: दाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।
w-resize: बाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।
ne-resize: ऊपर दाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।
nw-resize: ऊपर बाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।
se-resize: नीचे दाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।
sw-resize: नीचे बाईं ओर इशारा करने वाला एक रिसाइज़ कर्सर।

कस्टम कर्सर

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

url() का उपयोग करके कस्टम कर्सर निर्दिष्ट करना भी संभव है।

इस उदाहरण में, custom-cursor.png कर्सर के लिए इमेज फाइल है। यदि वह इमेज उपलब्ध नहीं है, तो ब्राउज़र का डिफ़ॉल्ट कर्सर auto के साथ प्रदर्शित होता है।

सारांश

cursor प्रॉपर्टी यह निर्दिष्ट करती है कि जब उपयोगकर्ता किसी तत्व पर हो तो कौन सा कर्सर प्रदर्शित होना चाहिए।
उपयोग के अनुसार कई कर्सर शैलियाँ उपलब्ध हैं, और कस्टम कर्सर भी सेट किए जा सकते हैं।
इंटरैक्टिव तत्वों और प्रतिबंधित संचालन के अनुसार उपयुक्त कर्सर शैलियों का चयन करके, एक अधिक उपयोगकर्ता-अनुकूल UI प्रदान किया जा सकता है।

`pointer-events` प्रॉपर्टी

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

pointer-events प्रॉपर्टी का उपयोग यह नियंत्रित करने के लिए किया जाता है कि कोई तत्व माउस, टच और स्टाइलस जैसे पॉइंटर डिवाइस से घटनाओं को कैसे संभालता है। सामान्यतः, जब किसी तत्व पर क्लिक किया जाता है या उपयोगकर्ता उसे होवर करता है, तो इसे पॉइंटर ईवेंट मिलते हैं, लेकिन इस प्रॉपर्टी का उपयोग करके इस व्यवहार को बदला जा सकता है।

pointer-events-auto वर्ग में, pointer-events प्रॉपर्टी को auto पर सेट किया गया है, जिससे सामान्य क्लिक और होवर ईवेंट्स को संसाधित करने की अनुमति मिलती है। तत्व पर क्लिक किया जा सकता है, इसलिए जब उस पर क्लिक किया जाता है तो एक संदेश प्रदर्शित होता है।
pointer-events-auto वर्ग में, pointer-events प्रॉपर्टी को none पर सेट किया गया है, इसलिए तत्व को पॉइंटर ईवेंट्स नहीं मिलते हैं। भले ही cursor प्रॉपर्टी को pointer पर सेट किया गया हो, माउस कर्सर नहीं बदलता है, और नीचे के अन्य तत्व क्लिक योग्य हो जाते हैं।

मान प्रकार।

pointer-events प्रॉपर्टी यह निर्दिष्ट करती है कि कोई तत्व पॉइंटर ईवेंट प्राप्त करेगा या नहीं और किस प्रकार। आप निम्न मान निर्दिष्ट कर सकते हैं।

`auto`

ऑटो डिफ़ॉल्ट मान है, जहां तत्व सामान्य रूप में पॉइंटर इवेंट प्राप्त करता है।

`none`

जब none निर्दिष्ट किया जाता है, तो तत्व पॉइंटर इवेंट प्राप्त नहीं करता। तत्व क्लिक और होवर जैसी इंटरैक्शन को अक्षम कर देता है, लेकिन नीचे के अन्य तत्व पॉइंटर इवेंट प्राप्त कर सकते हैं।

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

ये मान मुख्य रूप से SVG तत्वों के लिए उपयोग किए जाते हैं। प्रत्येक मान यह निर्धारित करता है कि क्या किसी तत्व के विशिष्ट भाग (जैसे फ़िल, स्ट्रोक, आदि) पॉइंटर इवेंट्स पर प्रतिक्रिया देंगे। यह सामान्य HTML तत्वों के साथ आमतौर पर उपयोग नहीं किया जाता है।

उपयोग के लिए मुख्य बिंदु

पॉइंटर-इवेंट्स प्रॉपर्टी का उपयोग कैसे करें, इसके कुछ उदाहरण यहां दिए गए हैं।

उन तत्वों का चयन करना जिन्हें आप अक्षम करना चाहते हैं
- none मान बटन या लिंक जैसे तत्वों को अस्थायी रूप से अक्षम करने के लिए उपयोगी है।
ओवरले तत्वों के साथ उपयोग
- जब पोजिशन प्रॉपर्टी को absolute पर सेट किया जाता है या z-index प्रॉपर्टी का उपयोग करके तत्वों को स्तरित किया जाता है, तो शीर्ष तत्व पर pointer-events को none पर सेट करने से पॉइंटर इवेंट निचले तत्व पर भेजे जाते हैं।

`resize` प्रॉपर्टी

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

resize प्रॉपर्टी एक CSS प्रॉपर्टी है जो निर्दिष्ट करती है कि उपयोगकर्ता द्वारा एक तत्व को किस दिशा में रिसाइज़ किया जा सकता है। इस प्रॉपर्टी का उपयोग करके, आप तत्वों को वर्टिकल या होरिजॉन्टल रूप से ड्रैग करके रिसाइज़ करने की अनुमति दे सकते हैं, या रिसाइज़िंग को पूरी तरह से अक्षम कर सकते हैं।

मान प्रकार।

‘resize’ प्रॉपर्टी यह निर्दिष्ट करती है कि किसी तत्व को किन दिशाओं में आकार बदलने की अनुमति है। आप निम्न मान निर्दिष्ट कर सकते हैं।

`both`

both निर्दिष्ट करने से तत्व को ऊर्ध्वाधर और क्षैतिज दोनों दिशाओं में रिसाइज़ किया जा सकता है।

`horizontal`

horizontal निर्दिष्ट करने से तत्व को केवल क्षैतिज दिशा (चौड़ाई) में रिसाइज़ किया जा सकता है।

`vertical`

vertical निर्दिष्ट करने से तत्व को केवल ऊर्ध्वाधर दिशा (ऊंचाई) में रिसाइज़ किया जा सकता है।

`none`

none निर्दिष्ट करने से तत्व का रिसाइज़िंग अक्षम हो जाता है। यह डिफ़ॉल्ट मान है।

`inherit`

inherit निर्दिष्ट करने से तत्व अपने पैरेंट से resize प्रॉपर्टी का मान विरासत में ले लेता है।

नोट्स

एक तत्व को रिसाइज़ेबल बनाने के लिए, आपको resize प्रॉपर्टी के साथ-साथ overflow प्रॉपर्टी सेट करनी होगी। रिसाइज़ेबल तत्वों को स्क्रॉलबार की आवश्यकता हो सकती है, और आमतौर पर overflow: auto सेट किया जाता है।
रिसाइज़िंग आमतौर पर div और textarea जैसे ब्लॉक तत्वों के साथ उपयोग की जाती है।

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

YouTube Video

3D एनिमेशन से संबंधित CSS गुण फ्लोट-संबंधित CSS प्रॉपर्टीज़

यूज़र इंटरफ़ेस से संबंधित CSS गुण

YouTube Video

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

यूज़र इंटरफ़ेस संबंधित

content प्रॉपर्टी

content प्रॉपर्टी के मान

उपयोग के नोट्स

cursor गुण

मुख्य कर्सर प्रकार

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

कस्टम कर्सर

सारांश

pointer-events प्रॉपर्टी

मान प्रकार।

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

उपयोग के लिए मुख्य बिंदु

resize प्रॉपर्टी

मान प्रकार।

both

horizontal

vertical

none

inherit

नोट्स

YouTube Video

`content` प्रॉपर्टी

`content` प्रॉपर्टी के मान

`cursor` गुण

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

`pointer-events` प्रॉपर्टी

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

`resize` प्रॉपर्टी

`both`

`horizontal`

`vertical`

`none`

`inherit`