यूज़र इंटरफ़ेस से संबंधित 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>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</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 प्रॉपर्टी निम्नलिखित मान ले सकती है:।

टेक्स्ट: स्ट्रिंग को "" में समेट कर सीधे निर्दिष्ट करें। टेक्स्ट जोड़ता है।
इमेज: इमेज जोड़ने के लिए url() फ़ंक्शन का उपयोग करें।
काउंटर: काउंटर प्रदर्शित करने के लिए counter() फ़ंक्शन का उपयोग करें।
एट्रिब्यूट: HTML तत्वों के एट्रिब्यूट मान प्रदर्शित करने के लिए attr() फ़ंक्शन का उपयोग करें। उदाहरण के लिए, आप title एट्रिब्यूट को प्रदर्शित कर सकते हैं।
none: निर्दिष्ट करता है कि कोई सामग्री प्रदर्शित नहीं की जाएगी। यह डिफॉल्ट स्थिति है।

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

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

उदाहरण

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

यह <p> टैग से पहले एक आइकन जोड़ने का एक उदाहरण है। इस तरह, आप स्टाइल शीट के माध्यम से सामग्री को दृश्यमान रूप से पूरक कर सकते हैं।

`cursor` गुण

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

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

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

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

`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 प्रॉपर्टी का उपयोग करके यह निर्दिष्ट किया गया है कि एक टेक्स्टएरिया को किस दिशा में रिसाइज़ किया जा सकता है।

resize: both; के साथ, एक तत्व को क्षैतिज और लंबवत दोनों दिशाओं में रिसाइज़ किया जा सकता है।
resize: horizontal; के साथ, एक तत्व को केवल क्षैतिज रूप से रिसाइज़ किया जा सकता है।
resize: vertical; के साथ, एक तत्व को केवल लंबवत रूप से रिसाइज़ किया जा सकता है।
resize: none; के साथ, एक तत्व को रिसाइज़ नहीं किया जा सकता है।

मान प्रकार।

resize प्रॉपर्टी को एक मान सौंपा जाता है जो निर्दिष्ट करता है कि एक तत्व को किस दिशा में रिसाइज़ किया जा सकता है। आप निम्न मान निर्दिष्ट कर सकते हैं।

`none`

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

`both`

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

`horizontal`

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

`vertical`

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

`inherit`

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

नोट्स

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

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

YouTube Video

3D एनिमेशन से संबंधित 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 प्रॉपर्टी

मान प्रकार।

none

both

horizontal

vertical

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` प्रॉपर्टी

`none`

`both`

`horizontal`

`vertical`

`inherit`