সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - border-radius, opacity ইত্যাদি ব্যাবহার করে ওয়েব পেজে ব্যাবহৃত ছবি গুলোকে বিভিন্ন ভাবে স্টাইল করা যায়। নিচে এরকম কিছু ব্যাবহারিক উদাহরন দেখুন।
সিএসএস border-radius প্রোপার্টি ব্যবহার করে যে কোনো ছবির কোণ অর্থাৎ corner গুলো কে গোলাকার আকৃতি প্রদান করা যায়।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে border-radius প্রোপার্টি ব্যবহার ব্যাবহার করা হয়েছে। এর ফলে ছবিটির কোন বা corner গুলো গোলাকার হবে।
img.rounded-corner {
border-radius: 10px;
}
border-radius প্রোপার্টির মান বা value সতকরা বা percentage অর্থাৎ " % " পদ্ধতি ব্যাবহার করে নির্ধারণ করে ছবিকে সম্পূর্ণ বৃত্তাকার করা যায়। তবে এক্ষেত্রে ছবিটি দৈর্ঘ্যে ও প্রস্থে সমান হতে হবে।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে border-radius প্রোপার্টি ব্যবহার করে ছবিকে বৃত্ত বানানো হয়েছে।
.circle-img {
border-radius: 50%;
}
সিএসএস এর Opacity প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে খুব সহজ ভাবে স্বচ্ছ বা transparent এফেক্ট দেয়া যায়। Opacity প্রপার্টির মান বা value হতে পারে 0.0 থেকে 1.0 পর্যন্ত। কোন এইচটিএমএল এলিমেন্ট কে সবথেকে বেশী transparent করতে হলে সর্বনিম্ন মান ব্যবহার করতে হবে।
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর Opacity প্রোপার্টি ব্যবহার করা হয়েছে।
img {
opacity: 0.4;
}
IE এর আগের সংস্করণ গুলো Opacity প্রোপার্টি সমর্থন করে না। তাই সকল ব্রাউজারে সমর্থন অর্থাৎ cross brawser
compatability এর জন্য IE এর ক্ষেত্রে filter:alpha(opacity=x) প্রোপার্টি ব্যবহার
করতে হয়।
opacity:x প্রপার্টির মান বা value হতে পারে 0 থেকে 100 পর্যন্ত। কোন এইচটিএমএল এলিমেন্টকে সব থেকে বেশী transparent করতে হলে সর্বনিম্ন
মান অর্থাৎ 0 ব্যবহার করতে হবে।
filter:alpha(opacity=x) প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
img {
opacity: 0.4;
filter:alpha(opacity=40)*/ For IE /*
}
সিএসএস 3.0 এর box-shadow প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট, যেমন - image এলিমেন্ট অর্থাৎ <img /> ট্যাগ ইত্যাদির চারিপাশে ছায়া বা shadow তৈরি করা যায়।
নিচে box-shadow প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন।
ওপরের উদাহরনের জন্য box-shadow প্রোপার্টি ব্যবহার করে নিচের সিএসএস স্টাইল কোড গুলো দেখুন।
img {
box-shadow: 2px 4px 9px 6px teal;
}
রেসপন্সিভ ছবি গুলো সংক্রিয়ভাবেই বিভিন্ন আকারের স্ক্রীনে ঠিক মত প্রদর্শিত হতে পারে। এক্ষেত্রে কোন ছবির আকার আসল আকার থেকে ছোট করা যায়, কিন্তু বড় করা যায় না। সিএসএস এর max-width ও height প্রোপার্টি ব্যাবহার করে কোন ছবিকে রেস্পন্সিভ করা যায়।
max-width ও height প্রোপার্টি ব্যাবহার করে নিচে একটি উদাহরণ দেখুন।
img {
max-width: 100%;
height: auto;
}
সিএসএস এর display ও margin প্রোপার্টি ব্যাবহার করে কোন ছবিকে ওয়েব পেইজের মাঝখানে স্থাপন করা যায়। এর জন্য প্রথমে ছবিটিকে block এলিমেন্টে রূপান্তর করতে হবে এবং এর সাথে margin: auto; মান নির্ধারণ করতে হবে। নিচে একটি উদাহরণ দেখুন।
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
সিএসএস এর filter প্রোপার্টি ব্যবহার করে কোন ছবিতে বিভিন্ন ভিজুয়াল ইফেক্ট, যেমন - ব্লার, স্যাচুরেসন ইত্যাদি দেওয়া যায়।
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
নোট - Internet Explorer, Edge 12 এবং Safari 5.1 ওয়েব ব্রাউজার গুলোর এবং এদের পূর্ববর্তী সংস্করণ বা version filter প্রোপার্টি সমর্থন করে না।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে বিভিন্ন ভিজুয়াল ইফেক্ট, যেমন - ব্লার, স্যাচুরেসন ব্যবহার করে ছবিকে বিভিন্ন স্টাইল করা হয়েছে।
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {
-webkit-filter: blur(4px);filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(250%);filter: brightness(250%);
}
.contrast {
-webkit-filter: contrast(180%);filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7); filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
সিএসএস 3.0 এর transform প্রোপার্টি ব্যাবহার করে মাউস হোভার এ কোন ছবি কে ফ্লিপ করতে নিচের সিএসএস স্টাইল কোড ব্যবহার করা যেতে পারে।
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
শেয়ার করুন
