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

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

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


width প্রোপার্টি

ভিডিও এলিমেন্টের width প্রোপার্টির মান 100% দিয়ে, ভিডিও প্লেয়ারটিকে রেস্পন্সিভ করা হয় এবং প্লেয়ারটি উপরে ও নিচে বাড়তে/কমতে থাকেঃ

উদাহরণ

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

<video width="400" controls>
  <source src="video/satt_video.mp4" type="video/mp4">
  <source src="video/satt_video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>


<p>  ভিডিও প্লেয়ারের সাইজ কিভাবে পরিবর্তন হয় তা ব্রাউজার উইন্ডোতে দেখা যায়।
    </p>
</body>
</html>

ফলাফল




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

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

উদাহরণ

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

<video width="400" controls>
  <source src="video/satt_video.mp4" type="video/mp4">
  <source src="video/satt_video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>


<p>যখন সাইজ 400px এর নিচে হয়, তখন  ভিডেও প্লেয়ারের সাইজ কিভাবে পরিবর্তন হয় তা ব্রাউজার উইন্ডোতে দেখা যায়।
   </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;
}
video {
    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>
 <video width="400" controls>
   <source src="video/satt_video.mp4" type="video/mp4">
   <source src="video/satt_video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
 </video>
 </div>

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

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

 </div>
 </div>

 </div>

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

ফলাফল