ইউজার ইন্টারফেস সম্পর্কিত 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-এ সরাসরি লেখা নয় এমন অলংকৃত কন্টেন্ট বা সহায়ক তথ্য নিয়ন্ত্রণ করা।

এই উদাহরণে, "Note: " এলিমেন্টের আগে যোগ করা হয়েছে এবং "(End)" পরে যোগ করা হয়েছে। এগুলি যথাক্রমে ::before এবং ::after সিউডো-এলিমেন্ট ব্যবহার করে।

`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 প্রপার্টি কেবল সিউডো-এলিমেন্টের জন্য প্রযোজ্য, সাধারণ এলিমেন্টের জন্য নয়।
এটি DOM-এ যোগ করা হয় না, তাই এটি সরাসরি JavaScript দিয়ে পরিচালনা করা যায় না।
এটি লেআউটে প্রভাব ফেলতে পারে, তাই এটি সাধারণত অলংকৃত বা সহায়ক তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়।

`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 একটি আই-বিম কার্সর যা এমন এলাকায় প্রদর্শিত হয় যেখানে টেক্সট সিলেক্ট করা যায়।

`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`

ডিফল্ট মান হল 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 উপাদানের জন্য ব্যবহৃত হয়। প্রতিটি মান নির্ধারণ করে কোন নির্দিষ্ট অংশ (যেমন fill, stroke, ইত্যাদি) পয়েন্টার ইভেন্টগুলিতে প্রতিক্রিয়া জানাবে কি না। এটি সাধারণ HTML উপাদানের সাথে সাধারণত ব্যবহৃত হয় না।

ব্যবহারের মূল পয়েন্টসমূহ

pointer-events প্রোপার্টিটি কীভাবে ব্যবহার করার উদাহরণ এখানে রয়েছে।

যে উপাদানগুলি আপনি নিষ্ক্রিয় করতে চান সেগুলি নির্বাচন করা
- none মানটি বাটন বা লিঙ্কগুলির মতো উপাদানগুলি সাময়িকভাবে নিষ্ক্রিয় করতে উপকারী।
ওভারলিড উপাদানের সাথে ব্যবহার
- যখন position প্রোপার্টিটি 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 Video

৩ডি অ্যানিমেশন সম্পর্কিত 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`