সিএসএস৩ ছবি - Css3 Images


সিএসএস এর বিভিন্ন প্রোপার্টি যেমন - border-radius, opacity ইত্যাদি ব্যাবহার করে ওয়েব পেজে ব্যাবহৃত ছবি গুলোকে বিভিন্ন ভাবে স্টাইল করা যায়। নিচে এরকম কিছু ব্যাবহারিক উদাহরন দেখুন।

Example of CSS rounded-corner
Example of CSS rounded-corner

border-radius প্রোপার্টি

সিএসএস border-radius প্রোপার্টি ব্যবহার করে যে কোনো ছবির কোণ অর্থাৎ corner গুলো কে গোলাকার আকৃতি প্রদান করা যায়।

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে border-radius প্রোপার্টি ব্যবহার ব্যাবহার করা হয়েছে। এর ফলে ছবিটির কোন বা corner গুলো গোলাকার হবে।

উদাহরণ

img.rounded-corner {
   border-radius: 10px;
   }

কোড এডিটর


border-radius প্রোপার্টির মান বা value সতকরা বা percentage অর্থাৎ " % " পদ্ধতি ব্যাবহার করে নির্ধারণ করে ছবিকে সম্পূর্ণ বৃত্তাকার করা যায়। তবে এক্ষেত্রে ছবিটি দৈর্ঘ্যে ও প্রস্থে সমান হতে হবে।

Example of CSS rounded-corner

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে border-radius প্রোপার্টি ব্যবহার করে ছবিকে বৃত্ত বানানো হয়েছে।

উদাহরণ

.circle-img {
   border-radius: 50%;
   }

কোড এডিটর



opacity প্রোপার্টি

সিএসএস এর 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 /*
   }

কোড এডিটর



box-shadow প্রোপার্টি

সিএসএস 3.0 এর box-shadow প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট, যেমন - image এলিমেন্ট অর্থাৎ <img /> ট্যাগ ইত্যাদির চারিপাশে ছায়া বা shadow তৈরি করা যায়।

নিচে box-shadow প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখুন।


ওপরের উদাহরনের জন্য box-shadow প্রোপার্টি ব্যবহারনিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

img {
   box-shadow: 2px 4px 9px 6px teal;
   }

কোড এডিটর



রেসপন্সিভ ছবি

রেসপন্সিভ ছবি গুলো সংক্রিয়ভাবেই বিভিন্ন আকারের স্ক্রীনে ঠিক মত প্রদর্শিত হতে পারে। এক্ষেত্রে কোন ছবির আকার আসল আকার থেকে ছোট করা যায়, কিন্তু বড় করা যায় না। সিএসএস এর max-widthheight প্রোপার্টি ব্যাবহার করে কোন ছবিকে রেস্পন্সিভ করা যায়।

max-widthheight প্রোপার্টি ব্যাবহার করে নিচে একটি উদাহরণ দেখুন।

উদাহরণ

img {
   max-width: 100%;
   height: auto;
   }

কোড এডিটর



ছবির অবস্থান

সিএসএস এর displaymargin প্রোপার্টি ব্যাবহার করে কোন ছবিকে ওয়েব পেইজের মাঝখানে স্থাপন করা যায়। এর জন্য প্রথমে ছবিটিকে block এলিমেন্টে রূপান্তর করতে হবে এবং এর সাথে margin: auto; মান নির্ধারণ করতে হবে। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
   }

কোড এডিটর



filter প্রোপার্টি

সিএসএস এর 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);
  }

কোড এডিটর