স্বচ্ছতার সাথে সম্পর্কিত 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সেট করা হয়, তাহলে উপাদানটি সম্পূর্ণ অস্বচ্ছ হয়, একেবারে সাধারণ উপাদানের মতো। -
opacityপ্রপার্টিটি যদি0.5সেট করা হয়, তাহলে উপাদানটি আধা স্বচ্ছ হয়ে যায়। -
opacityপ্রপার্টিটি যদি0সেট করা হয়, তাহলে উপাদানটি সম্পূর্ণ স্বচ্ছ হয়ে যায় এবং একদমই দেখা যায় না। -
transitionপ্রপার্টিopacityসেট করা হয়েছে, ফলে যখন মাউস কার্সর উপাদানটির উপর চলে আসে, এটি ২ সেকেন্ড পরে ধীরে ধীরে সম্পূর্ণ স্বচ্ছ হয়ে যায়। -
যদি প্যারেন্ট উপাদানের
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 কার্যকর হয় না।
মানসমূহ
-
যদি
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%হলো ডিম্বাকৃতির কেন্দ্রের অবস্থান।
এই উদাহরণে, এটি উপাদানের কেন্দ্রে একটি ডিম্বাকৃতি নির্দেশ করে, যার প্রস্থ ৫০% এবং উচ্চতা ৩০%।
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-তে
myClipআইডি সহ একটি বৃত্তাকার ক্লিপ পাথ HTML উপাদানে প্রয়োগ করা হয়েছে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।