বিষয়বস্তু মার্কেটিং
CSS3 বৈশিষ্ট্যগুলি সম্পর্কে আপনি সচেতন নাও হতে পারেন: ফ্লেক্সবক্স, গ্রিড লেআউট, কাস্টম বৈশিষ্ট্য, রূপান্তর, অ্যানিমেশন এবং একাধিক পটভূমি
ক্যাসকেডিং স্টাইল শীট (সিএসএস) বিকশিত হতে থাকে এবং সর্বশেষ সংস্করণে এমন কিছু বৈশিষ্ট্য থাকতে পারে যা আপনি হয়তো জানেন না। এখানে কোড উদাহরণ সহ CSS3 এর সাথে প্রবর্তিত কিছু প্রধান উন্নতি এবং পদ্ধতি রয়েছে:
- নমনীয় বক্স লেআউট (ফ্লেক্সবক্স): একটি লেআউট মোড যা আপনাকে ওয়েব পৃষ্ঠাগুলির জন্য নমনীয় এবং প্রতিক্রিয়াশীল লেআউট তৈরি করতে দেয়৷ ফ্লেক্সবক্সের সাহায্যে, আপনি সহজেই একটি পাত্রের মধ্যে উপাদানগুলি সারিবদ্ধ এবং বিতরণ করতে পারেন। n এই উদাহরণ,
.container
ক্লাস ব্যবহার করেdisplay: flex
ফ্লেক্সবক্স লেআউট মোড সক্ষম করতে। দ্যjustify-content
সম্পত্তি সেট করা হয়center
পাত্রের মধ্যে শিশু উপাদানটিকে অনুভূমিকভাবে কেন্দ্রে রাখতে। দ্যalign-items
সম্পত্তি সেট করা হয়center
শিশু উপাদানটিকে উল্লম্বভাবে কেন্দ্রে রাখতে। দ্য.item
ক্লাস চাইল্ড এলিমেন্টের জন্য পটভূমির রঙ এবং প্যাডিং সেট করে।
এইচটিএমএল
<div class="container">
<div class="item">Centered Element</div>
</div>
সিএসএস
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
ফল
কেন্দ্রীভূত উপাদান
- গ্রিড বিন্যাস: আরেকটি লেআউট মোড যা আপনাকে ওয়েব পৃষ্ঠাগুলির জন্য জটিল গ্রিড-ভিত্তিক লেআউট তৈরি করতে দেয়। গ্রিডের সাহায্যে, আপনি সারি এবং কলাম নির্দিষ্ট করতে পারেন এবং তারপর গ্রিডের নির্দিষ্ট কক্ষের মধ্যে উপাদানগুলি স্থাপন করতে পারেন। এই উদাহরণে,
.grid-container
ক্লাস ব্যবহার করেdisplay: grid
গ্রিড লেআউট মোড সক্ষম করতে। দ্যgrid-template-columns
সম্পত্তি সেট করা হয়repeat(2, 1fr)
সমান প্রস্থের দুটি কলাম তৈরি করতে। দ্যgap
সম্পত্তি গ্রিড কোষের মধ্যে ব্যবধান সেট করে। দ্য.grid-item
ক্লাস গ্রিড আইটেমগুলির জন্য পটভূমির রঙ এবং প্যাডিং সেট করে।
এইচটিএমএল
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
সিএসএস
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
ফল
আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
- রূপান্তর: CSS3 ওয়েব পৃষ্ঠাগুলিতে রূপান্তর তৈরির জন্য বেশ কয়েকটি নতুন বৈশিষ্ট্য এবং কৌশল চালু করেছে। উদাহরণস্বরূপ, দ
transition
সময়ের সাথে CSS বৈশিষ্ট্যের পরিবর্তনগুলিকে অ্যানিমেট করতে সম্পত্তি ব্যবহার করা যেতে পারে। এই উদাহরণে,.box
ক্লাস উপাদানটির জন্য প্রস্থ, উচ্চতা এবং প্রাথমিক পটভূমির রঙ সেট করে। দ্যtransition
সম্পত্তি সেট করা হয়background-color 0.5s ease
একটি সহজ-ইন-আউট টাইমিং ফাংশন সহ অর্ধ সেকেন্ডের বেশি ব্যাকগ্রাউন্ডের রঙের বৈশিষ্ট্যে পরিবর্তনগুলি অ্যানিমেট করতে। দ্য.box:hover
ক্লাস এলিমেন্টের পটভূমির রঙ পরিবর্তন করে যখন মাউস পয়েন্টার এটির উপরে থাকে, যা ট্রানজিশন অ্যানিমেশনকে ট্রিগার করে।
এইচটিএমএল
<div class="box"></div>
সিএসএস
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
ফল
বাতাসে ভাসিতে থাকা
এখানে!
এখানে!
- অ্যানিমেশন: CSS3 ওয়েব পৃষ্ঠাগুলিতে অ্যানিমেশন তৈরির জন্য বেশ কয়েকটি নতুন বৈশিষ্ট্য এবং কৌশল চালু করেছে। এই উদাহরণে, আমরা ব্যবহার করে একটি অ্যানিমেশন যোগ করেছি
animation
সম্পত্তি আমরা একটি সংজ্ঞায়িত করেছি@keyframes
অ্যানিমেশনের নিয়ম, যা নির্দিষ্ট করে যে বাক্সটি 0 সেকেন্ডের সময়কাল ধরে 90 ডিগ্রি থেকে 0.5 ডিগ্রি পর্যন্ত ঘোরানো উচিত। যখন বাক্সের উপর হোভার করা হয়,spin
বাক্সটি ঘোরাতে অ্যানিমেশন প্রয়োগ করা হয়। দ্যanimation-fill-mode
সম্পত্তি সেট করা হয়forwards
অ্যানিমেশন শেষ হওয়ার পরে তার চূড়ান্ত অবস্থা বজায় রাখা হয়েছে তা নিশ্চিত করতে।
এইচটিএমএল
<div class="rotate"></div>
সিএসএস
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
ফল
বাতাসে ভাসিতে থাকা
এখানে!
এখানে!
- CSS কাস্টম বৈশিষ্ট্য: এই নামেও পরিচিত CSS ভেরিয়েবল, কাস্টম বৈশিষ্ট্য CSS3 এ চালু করা হয়েছিল। তারা আপনাকে CSS-এ আপনার নিজস্ব কাস্টম বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে এবং ব্যবহার করার অনুমতি দেয়, যা আপনার স্টাইলশীট জুড়ে মান সংরক্ষণ এবং পুনরায় ব্যবহার করতে ব্যবহার করা যেতে পারে। CSS ভেরিয়েবল একটি নাম দ্বারা চিহ্নিত করা হয় যা দুটি ড্যাশ দিয়ে শুরু হয়, যেমন
--my-variable
. এই উদাহরণে, আমরা –primary-color নামক একটি CSS ভেরিয়েবল সংজ্ঞায়িত করি এবং এর একটি মান দিই#007bff
, যা একটি নীল রঙ যা সাধারণত অনেক ডিজাইনে প্রাথমিক রঙ হিসাবে ব্যবহৃত হয়। আমরা সেট করতে এই ভেরিয়েবল ব্যবহার করেছিbackground-color
একটি বোতাম উপাদানের বৈশিষ্ট্য, ব্যবহার করেvar()
ভেরিয়েবলের নামে ফাংশন এবং পাসিং। এটি বোতামের পটভূমির রঙ হিসাবে ভেরিয়েবলের মান ব্যবহার করবে।
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- একাধিক পটভূমি: CSS3 আপনাকে একটি উপাদানের জন্য একাধিক ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করতে দেয়, যার অবস্থান এবং স্ট্যাকিং ক্রম নিয়ন্ত্রণ করার ক্ষমতা। ব্যাকগ্রাউন্ড দুটি ছবির সমন্বয়ে গঠিত,
red.png
এবংblue.png
, যা ব্যবহার করে লোড করা হয়background-image
সম্পত্তি প্রথম ছবি,red.png
, উপাদানটির ডান নীচের কোণায় অবস্থিত, যখন দ্বিতীয় চিত্রটি,blue.png
, উপাদানটির বাম উপরের কোণে অবস্থান করা হয়। দ্যbackground-position
সম্পত্তি প্রতিটি ছবির অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়. দ্যbackground-repeat
চিত্রগুলি কীভাবে পুনরাবৃত্তি হয় তা নিয়ন্ত্রণ করতে সম্পত্তি ব্যবহার করা হয়। প্রথম ছবি,red.png
, পুনরাবৃত্তি না করার জন্য সেট করা হয়েছে (no-repeat
), যখন দ্বিতীয় চিত্র,blue.png
, পুনরাবৃত্তি করতে সেট করা হয়েছে (repeat
).
এইচটিএমএল
<div id="multibackground"></div>
সিএসএস
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}