সিএসএস(৩) ইমেজ
সিএসএস(৩) ব্যবহার করে একটি ইমেযে বিভিন্ন ধরনের ডিজাইন করতে পারেন। একটি ইমেজকে রেসপন্সিভ করা থেকে যে কোনো ধরনের ইমেজ গ্যালারি তৈরি করতে পারেন।
গোলাকৃতি ইমেজ
border-radius প্রোপার্টি ব্যবহার করে যে কোনো ইমেজের আকৃতি গোলাকার করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css3 image example</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>পূর্ণ-পরিণত ইমেজ</h2>
<img src="..//css_example/satt_bangla.jpg" alt="natural beayty" width="350" height="250">
<p>border-radius প্রোপার্টি ব্যবহারের মাধ্যমে পূর্ণ-পরিনত ইমেজ তৈরি করা হয়।</p>
</body>
</html>
ফলাফল
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css3 image example</title>
<style>
img {
border-radius: 50px;
}
</style>
</head>
<body>
<h2>পূর্ণ-পরিণত ইমেজ</h2>
<img src="..//css_example/satt_bangla.jpg" alt="natural beayty" width="350" height="250">
<p>border-radius প্রোপার্টি ব্যবহারের মাধ্যমে পূর্ণ-পরিনত ইমেজ তৈরি করা হয়।</p>
</body>
</html>
ফলাফল
থামনেইল ইমেজ
থামনেইল(Thumbnail) ইমেজ তৈরি করার জন্য border প্রোপার্টি ব্যবহার করুন।
থামনেইল ইমেজঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css3 image example</title>
<style>
img {
border: 1.5px solid green;
border-radius: 5px;
padding: 5px;
}
</style>
<body>
<h2>thumbnail ইমেজ</h2>
<p>Border প্রোপার্টি ব্যবহারের মাধ্যমে Thumbnail ইমেজ তৈরি করা হয়।</p>
<img src="..//css_example/satt_bangla.jpg" alt="natural beauty" width="350" height="250">
</body>
</html>
ফলাফল
লিংক হিসেবে থামনেইল ইমেজঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css3 image example</title>
<style>
a {
display: inline-block;
border: 1px solid yellow;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<h2> লিংক হিসেবে thumbnail ইমেজ</h2>
<p>border প্রোপার্টি ব্যবহারের মাধ্যমে Thumbnail ইমেজ তৈরি করা হয়। সম্পূর্ণ ইমেজটিকে এখানে লিংক হিসেবে ব্যবহার করা হয়।</p>
<p>ইমেজটি হোবার ওভার বা ক্লিক করলে এর প্রতিক্রিয়া দেখা যায়।।</p>
<a target="_blank" href="..//css_example/satt_bangla.jpg">
<img src="..//css_example/satt_bangla.jpg" alt="natural beauty" width="350" height="250">
</a>
</body>
</html>
ফলাফল
রেসপন্সিভ ইমেজ
রেসপন্সিভ ইমেজ গুলো সংক্রিয়ভাবে ভাবে বিভিন্ন সাইজের স্কিনের সাথে সংযুক্ত হয়ে যায়।
এটি কিভাবে কাজ করে তা দেখার জন্য আপনার ব্রাউজারের উইন্ডোর সাইজটি ছোট/বড় করে দেখুনঃ
আপনি যদি কোন ইমেজের সাইজ ছোট করতে চান তা পারবেন কিন্তু যদি অরিজিনাল সাইজ থেকে বড় করতে চান তবে তা করতে পারবেন নাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title></title>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>রেস্পন্সিভ ইমেজ</h2>
<p>রেস্পন্সিভ ইমেজ স্বয়ংক্রিয়ভাবে স্ক্রিনের সাথে মিলে যায়।</p>
<p>এর প্রতিক্রিয়া দেখা জন্য ব্রাউজার উইন্ডোকে রিসাইজ করুন।</p>
<img src="..//css_exaples/satt_bangla.jpg" alt="Bangladesh" width="1000" height="300">
</body>
</html>
ফলাফল
পরামর্শঃ রেসপন্সিভ ওয়েব ডিজাইন সম্পর্কে আরও জানতে আমাদের রেস্পন্সিভ ওয়েব ডিজাইন টিউটোরিয়াল দেখুন।
একটি ইমেজ মাঝখানে
একটি ইমেজকে কোনো ওয়েব পেইজের মাঝখানে রাখার জন্য প্রথমত ইমেজটিকে block এলিমেন্টে রূপান্তর করুন এবং এর সাথে margin: auto; প্রোপার্টি ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css3 center image</title>
img {
display: block;
margin: auto;
border:2px solid green;
width:50%
}
</style>
</head>
<body>
<img class="center" src="..//css_example/satt.jpg" alt="SATT">
<p>ইমজটি মাঝখানে থাকবে</p>
</body>
</html>
ফলাফল
ইমেজ টেক্সট
ইমেজের মধ্যে টেক্সট এর অবস্থানঃ
উদাহরণ
নিচের বামে
উপরের বামে
উপরের ডানে
নিচের ডানে
মাঝে
ছবির উপরে বাম কোণে কিছু লেখা যোগ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 250px;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="../css_example/satt.jpg" alt="SATT"
<div class="topleft"> উপরে বামে লেখা </div>
</div>
</body>
</html>
ফলাফল
ছবির উপরে ডান কোণে কিছু লেখা যুক্তকরনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 250px;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="../css_examples/satt.jpg" alt="SATT">
<div class="topright">উপরে ডান লেখা</div>
</div>
</html>
ফলাফল
নিচে দিকে বাম কোণে কিছু লেখা যুক্তকরনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width:250px;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="../css_examples/satt.jpg" alt="SATT">
<div class="bottomleft">নিচে বামে লেখা</div>
</div>
</body>
</html>
ফলাফল
নিচে ডান কোণে কিছু লেখা যুক্তকরনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width:250px;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="../css_examples/satt.jpg" alt="SATT">
<div class="bottomright">নীচে ডান লেখাে</div>
</div>
</body>
</html>
ফলাফল
ছবির মাঝখানে লেখা যুক্তকরনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width:250px;
}
.textcenter {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="container">
<img src="../css_examples/satt.jpg" alt="SATT">
<div class="textcenter">মাঝখানে লেখা</div>
</div>
</body>
</html>
ফলাফল
ইমেজ ফিল্টার
সিএসএস filter প্রোপার্টি ব্যবহার করে একটি ইমেজে বিভিন্ন ইফেক্ট দেওয়া যায়।
শতর্কতাঃ Internet Explorer, Edge 12 অথবা Safari 5.1 ব্রাউজার গুলোতে ফিল্টার প্রোপার্টি ব্যবহার করা যায় না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title></title>
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);}
</style>
</head>
<body>
<p><strong>নোট:</strong> filter প্রোপার্টিটি Internet Explorer,
Edge 12, or Safari 5.1 এবং পূর্বের ভার্সনগুলোতে সাপোর্ট করেনা।</p>
<img src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="blur" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="brightness" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="contrast" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="grayscale" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="huerotate" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="invert" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="opacity" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="saturate" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="sepia" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
<img class="shadow" src="..//examples/satt.jpg" alt="satt" width="300" height="300">
</body>
</html>
ফলাফল
পরামর্শঃ সিএসএস filter সম্পর্কে আরও জানতে আমাদের সিএসএস ফিল্টার রেফারেন্স দেখুন।
রেসপন্সিভ ইমেজ গ্যালারি
সিএসএস(৩) ব্যবহার করে অনেক চমৎকার রেসপন্সিভ ইমেজ গ্যালারি তৈরি করা সম্ভব। রেসপন্সিভ ইমেজ গ্যালারি বিভিন্ন ডিভাইজের স্ক্রিনে বিভিন্ন ভাবে প্রর্দশিত হয়। রেসপন্সিভ ইমেজ গ্যালারির বিভিন্ন স্ক্রিনে প্রভাব দেখার জন্য আপনার ব্রাউজারের উইন্ডো কে ছোট/বড় করে দেখুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<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>
<div class="img">
<a target="_blank" href="..//css_exapmles/chandpur1.jpg">
<img src="..//css_exapmles/chandpur1.jpg" alt="চাঁদপুর সৌন্দর্যের একটি ছবি" width="300" height="200">
</a>
</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>
<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>
<div class="img">
<a target="_blank" href="..//css_exapmles/chandpur1.jpg">
<img src="..//css_exapmles/chandpur1.jpg" alt="চাঁদপুর সৌন্দর্যের একটি ছবি" width="300" height="200">
</a>
</div>
</body>
</html>
ফলাফল
পরামর্শঃ রেসপন্সিভ ওয়েভ ডিজাইন সম্পর্কে আরও জানতে আমাদের রেস্পন্সিভ ওয়েব ডিজাইন টিউটোরিয়াল দেখুন।
ইমেজ মোডাল
এখন আমরা সিএসএস ও জাভাস্ক্রিপ্ট একত্রে ব্যবহার করে একটি ইমেজ মডাল তৈরি করবো। প্রথমত আমরা সিএসএস দ্বারা মডালটি তৈরি করবো এবং ডিফল্ট ভাবে এটি হাইড করে রাখবো।
তারপর ব্যবহারকারী যখন ইমেজটিতে ক্লিক করবে তখন জাভাস্ক্রিপ্টের মাধ্যমে ব্রাউজারের উইন্ডোতে ইমেজ মোডালটি প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>image modal</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>ইমেজ মোডাল </h2>
<p>এই উদাহরণটিতে সিএসএস ব্যবহার করে মোডাল তৈরি করা হয়েছে যা ডিফল্টভাবে লুকায়িত আছে। </p>
<p> আমরা জাভাস্ক্রিপ্ট ব্যবহার করি মোডালকে ট্রিগার করার জন্য
এবং বর্তমান ছবিকে মোডালের ভিতর প্রদর্শণ করার জন্য যখন এটি ক্লিক করা হয়।
আরো লক্ষণীয় "মোডালের ভিতরে image's "alt" attribute এর মান image caption text হিসেবে রাখা হয়। </p>
<p>যদি আপনি কোডটি সঠিকভাবে বুঝতে না পারেন চিন্তা করবেন না।
যখন আপনি সি এস এস করবেন তখন আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়ালে গেলে আপনি আরো অনেক কিছু শিখতে পারবেন। </p>
<img id="myImg" src="../images/satt.jpg" alt="chandpur, Bangladesh" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">× </span>
<img class="modal-content" id="img01">
<div id="caption"> </div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
ফলাফল
×
![]()