সিএসএস ইমেজ গ্যালারি
আপনি সিএসএস ব্যবহার করে খুব সহজেই চমৎকার ইমেজ গ্যালারি তৈরি করতে পারেন।
এখানে ইমেজের বর্ণনা লিখুন
এখানে ইমেজের বর্ণনা লিখুন
এখানে ইমেজের বর্ণনা লিখুন
এখানে ইমেজের বর্ণনা লিখুন
ইমেজ গ্যালারি
নিম্নের ইমেজ গ্যালারিটি সিএসএস দিয়ে তৈরি করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid red;
}
div.img img {
width: 100%;
height: auto;
}
div.info {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="..//css_exapmles/satt_bangla1.jpg">
<img src="..//css_exapmles/satt_bangla1.jpg" alt="খেলার একটি ছবি" width="300" height="200">
</a>
<div class="info">সবুজশ্যামল বাংলাদেশের গ্রাম বাংলায় খেলার দৃশ্য</div>
</div>
<div class="img">
<a target="_blank" href="..//css_exapmles/chandpur1.jpg">
<img src="..//css_exapmles/chandpur1.jpg" alt="চাঁদপুর সৌন্দর্যের একটি ছবি" width="300" height="200">
</a>
<div class="info">চাঁদপুরের বড় স্টেশোন মোলহেডে অবস্থিত রক্তধারা </div>
</div>
<div class="img">
<a target="_blank" href="..//css_exapmles/satt_bangla1.jpg">
<img src="..//css_exapmles/satt_bangla1.jpg" alt="খেলার একটি ছবি" width="300" height="200">
</a>
<div class="info">সবুজশ্যামল বাংলাদেশের গ্রাম বাংলায় খেলার দৃশ্য</div>
</div>
<div class="img">
<a target="_blank" href="..//css_exapmles/satt_joy.jpg">
<img src="..//css_exapmles/satt_joy.jpg" alt="দূর্ভিক্ষের ছবি"width="300" height="200">
</a>
<div class="info">শিল্পী জয়নুলের আবেদীনের আকা দূর্ভিক্ষের ছবি </div>
</div>
<div class="img">
<a target="_blank" href="..//css_exapmles/chandpur1.jpg">
<img src="..//css_exapmles/chandpur1.jpg" alt="চাঁদপুর সৌন্দর্যের একটি ছবি" width="300" height="200">
</a>
<div class="info">চাঁদপুরের বড় স্টেশোন মোলহেডে অবস্থিত রক্তধারা </div>
</div>
</body>
</html>
ফলাফল
রেস্পন্সিভ ইমেজ গ্যালারি
চলুন আমরা এখন সিএসএস(৩) এর মিডিয়া কুয়েরির মাধ্যমে একটি রেস্পন্সিভ ইমেজ গ্যালারি তৈরি করবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>responsive image galary</title>
<style>
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.info {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.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%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
h2{
text-align: center;
background-color: lightseagreen;
}
</style>
</head>
<body>
<h2>ফলাফল দেখার জন্য স্ক্রিন ছোট/বড় করুন</h2>
<div class="responsive">
<div class="img">
<a target="_blank" href="..//css_examples/chandpur1.jpg">
<img src="..//css_examples/chandpur1.jpg" alt="চাঁদপুর সৌন্দর্যের একটি ছবি" width="300" height="200">
</a>
<div class="info">চাঁদপুরের বড় স্টেশোন মোলহেডে অবস্থিত রক্তধারা </div>
</div>
</div>
<div class="responsive">
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="..//css_examples/satt_bangla1.jpg">
<img src="..//css_examples/satt_bangla1.jpg" alt="খেলার একটি ছবি" width="300" height="200">
</a>
<div class="info">সবুজশ্যামল বাংলাদেশের গ্রাম বাংলায় খেলার দৃশ্য</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="..//css_examples/satt_bangla1.jpg">
<img src="..//css_examples/satt_bangla1.jpg" alt="খেলার একটি ছবি" width="300" height="200">
</a>
<div class="info">সবুজশ্যামল বাংলাদেশের গ্রাম বাংলায় খেলার দৃশ্য</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="..//css_examples/satt_joy.jpg">
<img src="..//css_examples/satt_joy.jpg" alt="দূর্ভিক্ষের ছবি"width="300" height="200">
</a>
<div class="info">শিল্পী জয়নুলের আবেদীনের আকা দূর্ভিক্ষের ছবি </div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>বিভিন্ন স্ক্রিন সাইজে ইমেজের মিল করার জন্য এই উদাহরণটিতে মিডিয়াকুইরিগুলো ব্যবহার করা হয়।স্ক্রিনের প্রশস্থতা যদি 700px
এর চেয়ে বড় হয় তবে এটা পাশাপাশি চারটি ইমেজ দেখাবে অথবা যদি 500px থেকে ছোট হয় তবে ইমেজটি ভারটিক্যালি ১০০% নিয়ে নিবে।</p>
<p>আপনি আমাদের সিএসএস টিউটোরিয়াল থেকে মিডিয়া কুইরি এবং রেস্পন্সিভ ওয়েব ডিজাইন সম্পর্কে আরো অনেক কিছু শিখতে পারবেন।</p>
</div>
</body>
</html>
ফলাফল