সিএসএস৩ ইমেজ স্টাইলিং-এর জন্য নতুন নতুন বৈশিষ্ট্য (properties) এবং ফিচার সরবরাহ করেছে। এটি ওয়েবপেজে ব্যবহৃত ইমেজগুলোর উপর বিভিন্ন স্টাইল প্রয়োগ করতে সাহায্য করে। সিএসএস৩ এর মাধ্যমে ইমেজ কাস্টমাইজ করা সহজ এবং উন্নত ডিজাইন তৈরি করা যায়।
ইমেজ স্টাইলিংয়ের প্রধান বৈশিষ্ট্য
border-radius
ব্যবহার: ইমেজের কোণ গোলাকার করতে ব্যবহৃত হয়।
img {
border-radius: 50%; /* সম্পূর্ণ গোলাকার */
}
box-shadow
ব্যবহার: ইমেজে শ্যাডো বা ছায়া যোগ করতে ব্যবহৃত হয়।
img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
opacity
ব্যবহার: ইমেজের স্বচ্ছতা নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
img {
opacity: 0.8; /* ১০০% এর মধ্যে ৮০% দৃশ্যমান */
}
filter
ব্যবহার: ইমেজে বিভিন্ন ফিল্টার ইফেক্ট যোগ করতে ব্যবহৃত হয়।
img {
filter: grayscale(100%); /* সাদা-কালো ইফেক্ট */
filter: blur(5px); /* ব্লার ইফেক্ট */
}
clip-path
ব্যবহার: ইমেজকে নির্দিষ্ট আকারে কাটছাঁট করতে ব্যবহৃত হয়।
img {
clip-path: circle(50% at 50% 50%); /* ইমেজকে বৃত্ত আকারে কেটে ফেলা */
}
ব্যাকগ্রাউন্ড ইমেজ স্টাইলিং
background-size
ব্যবহার: ব্যাকগ্রাউন্ড ইমেজের আকার নির্ধারণ করতে ব্যবহৃত হয়।
div {
background-image: url('image.jpg');
background-size: cover; /* ইমেজ পুরোপুরি ফিট হবে */
}
background-position
ব্যবহার: ব্যাকগ্রাউন্ড ইমেজের পজিশন নির্ধারণ করতে ব্যবহৃত হয়।
div {
background-image: url('image.jpg');
background-position: center; /* ইমেজের কেন্দ্র ফোকাস করবে */
}
background-repeat
ব্যবহার: ইমেজ রিপিট হবে কিনা তা নির্ধারণ করতে ব্যবহৃত হয়।
div {
background-image: url('image.jpg');
background-repeat: no-repeat; /* রিপিট বন্ধ */
}
background-clip
ব্যবহার: ব্যাকগ্রাউন্ড ইমেজকে নির্দিষ্ট বক্সের মধ্যে সীমাবদ্ধ করতে ব্যবহৃত হয়।
div {
background-image: url('image.jpg');
background-clip: content-box;
}
উদাহরণ: ইমেজ স্টাইলিং
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
width: 300px;
height: 300px;
background-image: url('example.jpg');
background-size: cover;
background-position: center;
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
.styled-image {
width: 100%;
border-radius: 50%;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.styled-image:hover {
filter: none;
}
</style>
</head>
<body>
<div class="image-container"></div>
<img class="styled-image" src="example.jpg" alt="Styled Image">
</body>
</html>
ব্রাউজার সমর্থন
সিএসএস৩ ইমেজ স্টাইলিং বৈশিষ্ট্যগুলোর বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত। তবে কিছু বৈশিষ্ট্য যেমন clip-path বা filter পুরোনো ব্রাউজারে কাজ নাও করতে পারে। এ জন্য ব্রাউজার কম্প্যাটিবিলিটি যাচাই করা গুরুত্বপূর্ণ।
| ফিচার | সমর্থিত ব্রাউজার |
|---|---|
border-radius | সকল আধুনিক ব্রাউজার |
box-shadow | সকল আধুনিক ব্রাউজার |
filter | Chrome 53+, Firefox 35+, Edge 12+ |
clip-path | Chrome 55+, Firefox 53+ |
সিএসএস৩ ইমেজ স্টাইলিং-এর মাধ্যমে ইমেজকে কাস্টমাইজ করা ও আধুনিক ওয়েব ডিজাইন তৈরিতে অনেক সহজ এবং কার্যকরী হয়েছে।
Read more
