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

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

হোম-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

 

রেস্পন্সিভ ইমেজ - Responsive Images


width প্রোপার্টি

ইমেজের width প্রোপার্টির ভ্যালু 100% ব্যবহার করে ইমেজকে রেস্পন্সিভ করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="images/satt_bangla.jpg" width="100%" height="780px">
<p> ইমেজকে স্ক্রল করার জন্য ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয়।
  </p>
</body>
</html>

ফলাফল



উপরের উদাহরণে ইমেজটিকে তার প্রস্থের চেয়ে বড় করা যায়। এই সমস্যা সমাধানের একটি ভালো উপায় max-width প্রোপার্টি ব্যবহার করা।


max-width প্রোপার্টি

ইমেজের max-width প্রোপার্টির মান 100% দেওয়া হলে ইমেজটিকে ইচ্ছে করলে ছোট করতে পারবো, কিন্তু এর আকারের চেয়ে বড় করা যাবে নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>এইচটিএমএল উদাহরণ</title>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="images/satt.jpg" width="460" height="345">
<p> ইমেজকে স্ক্রল করার জন্য ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করা হয় যখন প্রস্থ 460px এর কম হয়।</p>
</body>
</html>

ফলাফল



ওয়েব পেজে ইমেজের ব্যবহার

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
 </style>
 </head>
 <body>

 <div class="header">
 <h1>ঢাকা </h1>
 </div>

 <div class="row">
 <div class="col-3 col-s-3 menu">
 <ul>
 <li>ফ্লাইট </li>
 <li>সিটি </li>
 <li>দ্বীপসমুহ </li>
 <li>খাদ্য </li>
 </ul>
 </div>

 <div class="col-6 col-s-9">
 <h1>সিটি </h1>
 <p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
 ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়। </p>
 <img src="images/dhaka.jpg" width="460" height="345">
 </div>

 <div class="col-3 col-s-12">
 <div class="aside">

 <p>ঢাকা বাংলাদেশের রাজধানী। দেশের কাজ কর্মের সিংহ ভাগই এখানে সম্পুর্ন হয়।
  ঢাকাকে মসজিদ ও রিক্সার শহর হিসাবেও ডাকা হয়। জনবহুল শহর হিসাবে  বিশ্বে ২য়।
    
 প্রাচীন স্থাপত্ত্ব সহ বহু ঐতিহ্যবাহী স্থান দেখা যায় এই ছোট্ট শহরে। </p>

 </div>
 </div>

 </div>

 <div class="footer">
 <p>ব্রাউজার উইন্ডোতে মাপ পরিবর্তন করতে কিভাবে সাড়াদেয় তা দেখাতে রেসাইজ ব্যবহার করা হয়। </p>
 </div>
</body>
</html>
 
 

ফলাফল




ব্যাকগ্রাউন্ড ইমেজ

ব্যাকগ্রাউন্ড ইমেজকে স্কেলিং এবং রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন মেথড দেখবোঃ

১. যদি background-size প্রোপার্টির মান "contain" হয়, ব্যাকগ্রাউন্ড ইমেজটি DIV এলিমেন্টের এরিয়ার মধ্যে সেট থাকবে এবং ইমেজটি তার প্রস্থ এবং দৈর্ঘ্যের আনুপাতিক হার ঠিক রাখবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url("images/satt.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid teal;
}
</style>
</head>
<body>

<p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়।
    </p>

<div></div>
</body>
</html>

ফলাফল




২. যদি background-size প্রোপার্টির মান 100% 100% হয়, ব্যাকগ্রাউন্ড ইমেজ সমগ্র DIV এলিমেন্ট দখল করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
div {
    width: 100%;
    height: 400px;
    background-image: url(''images/satt.jpg);
    background-size: 100% 100%;
    border: 1px solid teal;
}
  </style>
  </head>
  <body>

  <p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়।  </p>

  <div>  </div>
</body>
</html>

ফলাফল




৩. যদি background-size প্রোপার্টির মান "cover" সেট করা হয়, ব্যাকগ্রাউন্ড ইমেজ এলিমেন্টের সম্পূর্ণ এরিয়া দখল করবে। "cover" ব্যবহারের কারণে অানুপাতিক হার ঠিক থাকবে এবং ইমেজের কিছু অংশ বাদ পরতে পারেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('images/satt_joy.jpg');
    background-size: cover;
    border: 1px solid teal;
}
</style>
</head>
<body>

<p>ব্রাউজার উইন্ডোর প্রতিক্রিয়া দেখার জন্য মাপ পরিবর্তন করা হয়। </p>

<div></div>
</body>
</html>

ফলাফল




ডিভাইসভেদে ভিন্ন ইমেজ প্রদর্শন

আমরা একটি বড় ইমেজকে কম্পিউটারে প্রদর্শনের জন্য ব্যবহার করি এবং ঐ বড় ইমেজকেই ছোট ডিভাইসের জন্য ছোট আকারে প্রদর্শন করি। যেহেতু আমরা ছোট ডিভাইসের জন্য ছোট আকারের ইমেজ প্রদর্শন করবো তাহলে একটি বড় ইমেজ ব্যবহার করে পেজ লোড হওয়ার সময় বৃদ্ধি করার কোন মানে হয় না।

আমরা মিডিয়া কুয়েরি ব্যবহার করে ছোট ডিভাইসের জন্য একটি ছোট আকারের ইমেজ ব্যবহার করতে পারি, এতে আমাদের পেজের পারফরমেন্স অনেক বৃদ্ধি পাবে।

নিচে একই ইমেজকে দুইটি ডিভাইসে প্রদর্শনের জন্য দুইটি আকারে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image:url(images/satttt.jpg);
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('images/nilgiri.jpg');
    }
}
</style>
</head>
<body>

<p style="margin-top:360px;"> ব্রাউজারের width পরিবর্তন করলে ব্যাকগ্রাউন্ড ইমেজ 400PX  এ পরিবর্তিত হবে।
    </p>

</body>
</html>

ফলাফল



আপনি মিডিয়া কুয়েরিতে min-width এর পরিবর্তে min-device-width ব্যবহার করতে পারেন, ইহা ব্রাউজারের প্রস্থের পরিবর্তে ডিভাইসের প্রস্থ পরিমাপ করবে। তখন আপনি ব্রাউজারের আকার পরিবর্তন করলেও ইমেজ পরিবর্তন হবে নাঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
/* For device width smaller than 400px: */
body {
    background-repeat: no-repeat;
    background-image: url('images/satttt.jpg');
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
       background-image: url('images/nilgiri.jpg');
    }
}
 </style>
 </head>
 <body>

</body>
</html>

ফলাফল




এইচটিএমএল(৫) <picture> এলিমেন্ট

এইচটিএমএল(৫) এর <picture> এলিমেন্ট ব্যবহার করে আপনি একাধিক ইমেজ যোগ করতে পারবেন।

<picture> এলিমেন্ট <video> এবং <audio> এলিমেন্টের মতই কাজ করে। আপনি এক সাথে একাধিক উৎস সেট করতে পারেন এবং প্রথম যে উৎসের ফাইলটি ব্রাউজারের সাথে মানানসই হবে সেটিই ব্যবহার করা হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 </head>
 <body>

 <picture>
  <source src="images/chandpur.jpg" media="(max-width: 400px)">
   <source src="images/satt_bangla.jpg">
   <img src="images/satt_joy.jpg" alt="Banladesh" style="width:auto;">
 </picture>

 <p>ব্রাউজারের width পরিবর্তন করলে ব্যাকগ্রাউন্ড ইমেজ 400PX  এ পরিবর্তিত হবে।  </p>
</body>
</html>

ফলাফল



srcset এট্রিবিউটটি বাধ্যতামূলক এবং ইহাই ইমেজের উৎসগুলো ডিফাইন করে।

যেসব ব্রাউজারে <picture> এলিমেন্ট সাপোর্ট করেনা, তাদের জন্য আপনাকে <img> এলিমেন্টটি ডিফাইন করতে হবে।