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

এই উদাহরণে, "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 প্রপার্টি নিম্নলিখিত মানগুলি গ্রহণ করতে পারে:।

টেক্সট: স্ট্রিংকে "" এর মধ্যে রেখে সরাসরি নির্ধারণ করুন। টেক্সট যোগ করে।
ইমেজ: ইমেজ যোগ করার জন্য url() ফাংশন ব্যবহার করুন।
কাউন্টার: কাউন্টার প্রদর্শনের জন্য counter() ফাংশন ব্যবহার করুন।
অ্যাট্রিবিউট: HTML এলিমেন্টের অ্যাট্রিবিউট মান প্রদর্শনের জন্য attr() ফাংশন ব্যবহার করুন। উদাহরণস্বরূপ, আপনি title অ্যাট্রিবিউট প্রদর্শন করতে পারেন।
none: নির্ধারণ করে যে কোনো কন্টেন্ট প্রদর্শিত হবে না। এটি ডিফল্ট অবস্থা।

ব্যবহারের নোট

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

উদাহরণ

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

`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 প্রোপার্টি যা নির্ধারিত করে যে কোন দিকে একটি উপাদান ব্যবহারকারী দ্বারা পুনরায় আকার দেওয়া যেতে পারে। এই প্রোপার্টিটি ব্যবহার করে, আপনি উপাদানগুলিকে উল্লম্ব বা আনুভূমিকভাবে টেনে পুনরায় আকার দিতে বা একেবারে পুনরায় আকার দেওয়া নিষ্ক্রিয় করতে পারবেন।

এই উদাহরণে, একটি textarea কোন দিকে পুনরায় আকার দেওয়া যেতে পারে তা 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 Video

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