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

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

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

 

সিএসএস অপাসিটি বা সচ্ছতা


সিএসএস-এ কোনো এলিমেন্টকে উজ্জ্বল বা অনুজ্জ্বল অথবা সচ্ছ বা অসচ্ছ করতে opacity প্রোপার্টি ব্যবহার করবো।


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

কোনো ইমেজকে সচ্ছ বা অসচ্ছ করতে আমরা opacity প্রোপার্টি ব্যবহার করতে পারি। এই ক্ষেত্রে আমরা 0.0 থেকে 1.0 পর্যন্ত ভ্যালু নিতে পারবো। এখানে ভ্যালু যত কম হবে তত বেশি অসচ্ছ বা ট্রান্সপারেন্ট হয়ঃ

opacity 0.3

opacity 0.5

opacity 1
ডিফল্ট

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>image Tranparency</title>
<style>
img {
    opacity: 0.5;
    /*ইন্টারনেট এক্সপ্লোরার ৮ এর পূর্বের ভার্সনের জন্য */
    filter: alpha(opacity=50); 
}
</style>
</head>
<body>

<h1>ইমেজ Tranparency</h1>
<p>একটি এলিমেন্টে নির্দিষ্ট ট্রান্সপেরেন্সির জন্য opacity প্রোপার্টি। নিম্ন মানের জন্য অধিক ট্রান্সপেরেন্সিঃ</p>
<p>ইমেজে 50% opacity :</p>
<img src="../css_examples/satt_bangla1.jpg" alt="natural beauty" width="100" height="80">

</body>
</html>

ফলাফল




ট্রান্সপারেন্ট হোভার ইফেক্ট

এখন আমরা opacity এবং :hover এই দুইটি প্রোপার্টিকে একত্রে ব্যবহার করে আমরা ইমেজে হোভারের মধ্যে opacity ইফেক্ট দিবঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>image Tranparency</title>
<style>
img {
    opacity: 0.6;
    filter: alpha(opacity=50); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
img:hover {
    opacity: 1.5;
    filter: alpha(opacity=100); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
</style>
</head>
<body>

<h1>ইমেজ Transparency</h1>
<p> opacity প্রোপার্টির সাথে :hover সিলেক্টর ব্যবহার করলে, পরে  mouse-over এ opacity পরিবর্তন হয়ঃ</p>
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
<img src="../css_examples/satt_bangla1.jpg" alt="natural bauty" width="100" height="80">
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">

</body>
</html>

ফলাফল



এই ইমেজ গুলোতে হোভার করলে ইমেজ গুলো অসচ্ছ দেখাবে। এই উদাহরণটি আগের উদাহরনের ঠিক বিপরীত করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>image Tranparency</title>
<style>
img {
  opacity: 0.7;
    filter: alpha(opacity=50); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
</style>
</head>
<body>

<h1>ইমেজ Transparency</h1>
<p>opacity প্রোপার্টির সাথে :hover সিলেক্টর ব্যবহার করলে, পরে  mouse-over এ opacity পরিবর্তন হয়ঃ</p>
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
<img src="../css_examples/satt_bangla1.jpg" alt="natural bauty" width="100" height="80"
><img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">

</body>
</html>

ফলাফল




RGBA মাধ্যমে ট্রান্সপারেন্ট

আপনি যদি একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করতে চান, সেক্ষেত্রে আপনি RGBA ব্যবহার করতে পারেন। RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের opacity নির্দেশ করে। নিচের উদাহরনে শুধু ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করা হয়েছে কিন্তু টেক্সট গুলোতে করা হয়নিঃ

100% opacity

60% opacity

30% opacity

10% opacity

টিপসঃ RGBA কালার সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস কালার অধ্যায়টি দেখুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>Tranparency box</title>
<style>
div {
    background: rgb(89, 142,155);
    padding: 10px;
}
div.first {
    background: rgba(76, 175, 80, 0.2);
}
div.second {
    background: rgba(76, 175, 80, 0.5);
}
div.third {
    background: rgba(82, 155, 75, 0.7);
}
</style>
</head>
<body>

<h3>Transparent বক্স</h3>
<p> opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p> RGBA কালার ভ্যালু:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>লক্ষ্য করুন কিভাবে opacity প্রোপার্টি ব্যবহার করলে টেক্সট এর background কালার স্বচ্ছতা পায়।</p>
</body>
</html>

ফলাফল




ট্রান্সপারেন্ট টেক্সট বক্স

তারুণ্যই সফলতা, তারুণ্যই স্যাট। তারুণ্যেই গড়বে ডিজিটাল বাংলাদেশ।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>Tranparency box</title>
<style>
div.box {
  background: url(../css_examples/satt_bangla1.jpg) repeat;
  border: 2.5px solid red;
}
div.transparent {
  margin: 40px;
  background-color: LightCyan;
  border: 1px solid aqua;
  opacity: 0.6;
  filter: alpha(opacity=70); /* ইন্টারনেট এক্সপ্লোরার ৮ এর পূর্বের ভার্সনের জন্য */
}
div.transparent p {
  margin: 8%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="box">
<div class="transparent">
<p> transparent বক্সের ভিতরে লেখা।</p>
</div>
</div>
</body>
</html>

ফলাফল