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

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

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

 

সিএসএস(৩) মিডিয়া কুয়েরি উদাহরণ


নিম্নের উদাহরণ গুলোতে মিডিয়া কুয়েরি ব্যবহার দেখানো হয়েছে।

নিম্নের উদাহরনে লিস্ট আইটেমের নাম গুলো ই-মেইল লিংক হিসেবে ব্যবহার করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: teal;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
  <li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
  <li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>

</body>
</html>

ফলাফল




যখন ব্রাউজারের স্ক্রিন সাইজ 300px থেকে 500px হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন প্রদর্শন করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: teal;
    text-decoration: none;
    padding: 3px;
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
    ul li a {
        padding-left: 30px;
        background: url(mail.png) left center no-repeat;
    }
}
</style>
</head>
<body>

<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
  <li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
  <li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
  <li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>

</body>
</html>

ফলাফল




যখন ব্রাউজারের স্ক্রিন সাইজ 700px থেকে 900px হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকনের পরিবর্তে টেক্সট প্রদর্শন করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: teal;
    text-decoration: none;
    padding: 3px;
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
    ul li a {
        padding-left: 30px;
        background: url(mail.png) left center no-repeat;
    }
}
@media screen and (max-width: 900px) and (min-width: 700px) {
    ul li a:before {
        content: "ইমেইলঃ ";
        color: black;
    }
}
</style>
</head>
<body>

<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
  <li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
  <li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
  <li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>

</body>
</html>

ফলাফল




যখন ব্রাউজারের স্ক্রিন সাইজ 900px থেকে বেশী হবে তখন প্রত্যকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন এবং টেক্সটের পরিবর্তে ই-মাইলের ঠিকানাটি প্রদর্শন করবে। এইক্ষেত্রে ব্যক্তির নামের সাথে ই-মেইলের ঠিকানা যুক্ত করার জন্য আমরা data- এট্রিবিউটটি ব্যবহার করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>সিএসএস (৩) উদাহরণ</title>
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: teal;
    text-decoration: none;
    padding: 3px;
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px) {
    ul li a {
        padding-left: 30px;
        background: url(mail.png) left center no-repeat;
    }
}
@media screen and (max-width: 900px) and (min-width: 700px) {
    ul li a:before {
        content: "ইমেইলঃ ";
        color: teal;
    }
}
@media screen and (min-width: 901px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 13px;
        color: black;
    }
}
</style>
</head>
<body>

<h2>ব্রাউজারের সাইজ পরিবর্তন করুন!!!</h2>
<ul>
  <li><a data-email="azizurrahman@example.com" href="mailto:sahapran@example.com">আজিজুর রহমান</a></li>
  <li><a data-email="sharif@example.com" href="mailto:saleh@example.com">শরীফ</a></li>
  <li><a data-email="foysal@example.com" href="mailto:imran@example.com">ফয়সাল</a></li>
</ul>

</body>
</html>

ফলাফল