সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) ইমেজ


সিএসএস(৩) ব্যবহার করে একটি ইমেযে বিভিন্ন ধরনের ডিজাইন করতে পারেন। একটি ইমেজকে রেসপন্সিভ করা থেকে যে কোনো ধরনের ইমেজ গ্যালারি তৈরি করতে পারেন।


গোলাকৃতি ইমেজ

border-radius প্রোপার্টি ব্যবহার করে যে কোনো ইমেজের আকৃতি গোলাকার করতে পারেনঃ


Paris

উদাহরণ

<!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>

ফলাফল



Paris

উদাহরণ

<!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>

ফলাফল




ইমেজ টেক্সট

ইমেজের মধ্যে টেক্সট এর অবস্থানঃ

উদাহরণ

Satt Academy
নিচের বামে
উপরের বামে
উপরের ডানে
নিচের ডানে
মাঝে

ছবির উপরে বাম কোণে কিছু লেখা যোগ

উদাহরণ

<!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>

ফলাফল



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


ইমেজ মোডাল

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

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

Triangle

উদাহরণ

<!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>

ফলাফল