সিএসএস৩ ইমেজ - Css3 Images



সিএসএস ৩ ব্যবহার করে কোন ছবিকে বিভিন্ন ভাবে প্রদর্শন করা যায়। কোনকে ছবি রেসপন্সিভ করা থেকে যে কোনো ধরনের ইমেজ গ্যালারি তৈরি করা যায় খুব সহজেই।


গোলাকার ইমেজ

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

নিচের উদাহরণ গুলো দেখুন। এখানে প্রথম ছবিটির কোণগুলোকে গোলাকার করা হয়েছে এবং দ্বিতীয় ছবিটিকে পুরো গোলাকার করে প্রদর্শন করা হয়েছে।

উদাহরণ

.first-img{
border-radius: 8px;
}
.secound-img{
border-radius: 50%;
}




Thumbnail ছবি

থামনেইল(Thumbnail) ছবি তৈরি করার জন্য border প্রোপার্টি ব্যবহার করতে হবে। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

<img src="webschool-logo.jpg" alt="Paris">


নিচে একটি উদাহরণ দেখুন যেখানে একটি Thumbnail ছবি কে লিংক হিসেবে ব্যবহার করা হয়েছে।

উদাহরণ

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="webschool.jpg">
<img src="webschool-logo.jpg" alt="webschool-logo">
</a>




রেসপন্সিভ ইমেজ

রেসপন্সিভ ইমেজ গুলো সংক্রিয়ভাবেই বিভিন্ন আকারের স্ক্রীনে ঠিক মত প্রদর্শিত হতে পারে। এটা কিভাবে কাজ করে তা ভালভাবে বোঝার জন্য ব্রাউজারের উইন্ডোর সাইজটি ছোট/বড় করে দেখুন। যদি কোন ইমেজের সাইজ আসল সাইজ থেকে ছোট করা যায়, কিন্তু বড় করা যায় না।

উদাহরণ

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




কেন্দ্রে ইমেজ স্থাপন

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

উদাহরণ

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




ট্রান্সপারেন্ট ইমেজ

opacity প্রপার্টি ব্যবহার করে কোন ছবিকে সহজেই স্বচ্ছ বা Transparent করা যায়। opacity প্রপার্টির মান 0.0 থেকে 1.0 পর্যন্ত হতে পারে। opacity প্রপার্টির সর্বোচ্চ মানের জন্য ছবি সর্বনিম্ম স্বচ্ছ হবে এবং সর্বনিম্ম মানের জন্য সর্বোচ্চ স্বচ্ছ হবে।
নিচে একটি উদাহরণ দেখুন।

উদাহরণ

img {
opacity: 0.5;
filter: alpha(opacity=50); /* IE8 এবং পূর্বের ভার্সনগুলোর জন্য */
}


নোট - IE8 এবং এর পূর্বের ভার্সন গুলোর জন্য filter:alpha(opacity=x)প্রপার্টি ব্যবহার করতে হবে, যেখানে x এর মান হতে পারে 0 থেকে 100 পর্যন্ত যে কোন সংখ্যা। filter প্রপার্টির সর্বোচ্চ মানের জন্য ছবি সর্বনিম্ম স্বচ্ছ হবে এবং সর্বনিম্ম মানের জন্য সর্বোচ্চ স্বচ্ছ হবে।


ছবিতে টেক্সট

সিএসএস ব্যবহার করে কোন ছবির কোন স্থানে টেক্সট প্রদর্শন করা যায়। নিচে একটি উদাহরণ দেখুন যেখানে একটি ছবির উপরে বা দিকে টেক্সট প্রদর্শন করা হয়েছে। যদি ডান দিকে টেক্সট প্রদর্শন করে হয় তবে topleft ডিভ এলিমেন্টে left এর পরিবর্তে right প্রপার্টি ব্যবহার করতে হবে।

উদাহরণ

<head>
<style>
.container {
position: relative;
}
.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="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>




ইমেজ ফিল্টার

সিএসএস filter প্রোপার্টি ব্যবহার করে কোন ছবিতে বিভিন্ন ভিজুয়াল ইফেক্ট, যেমন - ব্লার, স্যাচুরেসন ইত্যাদি দেওয়া যায়।

উদাহরণ

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}


নোট - Internet Explorer, Edge 12 অথবা Safari 5.1 ব্রাউজারে ফিল্টার প্রোপার্টি ব্যবহার করা যায় না।

নিচে একটি উদাহরণ দেখুন যেখানে বিভিন্ন ভিজুয়াল ইফেক্ট, যেমন - ব্লার, স্যাচুরেসন ব্যবহার করে ছবিকে বিভিন্ন স্টাইল করা হয়েছে।

উদাহরণ

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);}




ফ্লিপ

মাউস হোভার এ কোন ছবি কে ফ্লিপ করতে নিচের কোড ব্যবহার করা যেতে পারে।

উদাহরণ

img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}




ইমেজ মোডাল

এটি জাভাস্ক্রিপ্ট এবং সিএসএস এর সম্মিল্লিত একটি উদাহরণ, যেখানে একটি মডাল তৈরি করা হয়েছে। প্রথমে সিএসএস দ্বারা একটি মডাল উইন্ডো তৈরি করা হয়েছে এবং এটিকে ডিফল্ট ভাবে হাইড করে রাখা হয়েছে।

তারপর ইউজার যখন ইমেজটিতে ক্লিক করবে তখন জাভাস্ক্রিপ্ট ব্যবহার করে ব্রাউজারের উইন্ডোতে ইমেজ মোডালটি প্রদর্শন করা হয়েছে।

উদাহরণ

<head>
<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>
<img id="myImg" src="img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×
<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;
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>








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.