CSS ছবির শৈলী সেট করা
- পূর্ববর্তী পৃষ্ঠা CSS টুলটিপ
- পরবর্তী পৃষ্ঠা CSS object-fit
কিভাবে CSS এবং ছবির শৈলী সেট করবেন তা শিখুন。
কোণচাপাকার ছবি
ব্যবহার করে: border-radius প্রতিযোগী বৃত্তাকার ছবি তৈরি করুন。
সংক্ষিপ্তসূচি ছবি
ব্যবহার করে: border প্রতিমান্ত্রী প্রতিযোগী সংক্ষিপ্তসূচি তৈরি করুন。
সংক্ষিপ্তসূচি:
উদাহরণ
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
রেসপনসিভ ছবি
রেসপনসিভ ছবি স্ক্রিনের মাপ অনুযায়ী স্বচালিতভাবে সাজানো হবে。
আপনি যদি ছবিটিকে প্রয়োজনীয়ভাবে চুম্বকবিন্যস্ত করতে চান কিন্তু প্রথমদিকের সাইজের থেকে বড় করতে নয়, তাহলে নিচের কোডটি যোগ করুন:
উদাহরণ
img {
max-width: 100%;
height: auto;
}
সুঝাওয়া:আমাদের CSS RWD টিউটোরিয়াল রেসপনসিভ ওয়েব ডিজাইন নিয়ে আরও জানতে আমাদের
মধ্যস্থানীকৃত ছবি
ছবিটি মধ্যস্থানীকরণ করতে, বাম-ডান বাহ্যিক মার্গিনটি সেট করুন: auto এটা একটি ব্লক ইলেমেন্ট হিসাবে সেট করো:
উদাহরণ
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
পলোরোয়াইড ছবি / কার্ড
সোনা যলা
লাল যলা
উদাহরণ
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
স্বচ্ছ চিত্র
opacity এই অ্যাট্রিবিউটের মান 0.0 - 1.0 এর মধ্যে। মান নিচের দিকে যাওয়ার সাথে সাথে ট্রান্সপারেন্সি বাড়ে:
opacity 0.2
opacity 0.5
opacity 1 (ডিফল্ট)
উদাহরণ
img {
opacity: 0.5;
}
চিত্র টেক্সট
চিত্রের মধ্যে টেক্সট অবস্থান কিভাবে করা যায়:
উদাহরণ
আপনার নিজেই চেষ্টা করুন:
চিত্র ফিল্টার
CSS filter এই অ্যাট্রিবিউটটি ইলেকট্রনিক বস্তুকে ভিস্যুয়াল ইফেক্ট (যেমন ভুলা ও সত্ত্বকতা) যোগ করে।
নোট:Internet Explorer বা Edge 12 filter অ্যাট্রিবিউটটি সমর্থন করে না।
উদাহরণ
সমস্ত চিত্রের রঙকে সাদা-কালো (100% গ্রেসেলেইট) করুন:
img {
filter: grayscale(100%);
}
সুঝাওয়া:আমাদের ওয়েবসাইট পরিদর্শন করুন: CSS ফিল্টার রেফারেন্স ম্যানুয়েল، CSS ফিল্টার সম্পর্কে আরও তথ্য জানুন।
চিত্র হভিং-এর ওভারলে
মাউস হভিং-এর ওভারলে প্রভাব তৈরি করুন:
চিত্র উল্টান
চিত্রের উপর মাউস নিয়ে যান:
উদাহরণ
img:hover {
transform: scaleX(-1);
}
প্রতিক্রিয় চিত্রভাণ্ডার
আমরা CSS-এর মাধ্যমে অস্থির চিত্র প্রদান করতে পারি।
এই উদাহরণে, আমরা মিডিয়া কোয়াইয়ার ব্যবহার করে বিভিন্ন স্ক্রিন আকারের চিত্রকে পুনর্গঠন করি। প্রভাব দেখার জন্য ব্রাউজার উইন্ডোর আকার সংযোজন করুন:
উদাহরণ
.responsive {}}
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {}}
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {}}
width: 100%;
}
}
সুঝাওয়া:আমাদের CSS RWD টিউটোরিয়াল এখানে রেসপনসিভ ওয়েব ডিজাইন সম্পর্কে আরও জানুন
ইমেজ মডাল (Image Modal)
এটি CSS এবং JavaScript কিভাবে একসঙ্গে কাজ করে একটি উদাহরণ
প্রথমে, CSS দ্বারা মডাল উইন্ডো (ডায়লগ) তৈরি করুন এবং এটিকে ডিফল্টভাবে লুকানো রাখুন。
এরপর, যখন ব্যবহারকারী ছবিটির উপর ক্লিক করেন, JavaScript দ্বারা মডাল উইন্ডো দেখানো হবে এবং মডালের ভিতরে ছবি দেখানো হবে:
- পূর্ববর্তী পৃষ্ঠা CSS টুলটিপ
- পরবর্তী পৃষ্ঠা CSS object-fit
