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

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

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

 

সিএসএস ইমেজ স্প্রাইট(Sprite)


ইমেজ স্প্রাইট(Sprite)

ইমেজ স্প্রাইট(Sprite) হলো একটি ছবির মধ্যে একগুচ্ছ ছবি সংগ্রহ করে রাখা।

অসংখ্য ছবি যুক্ত একটি ওয়েবপেজ লোড হতে অনেক সময় নিতে পারে এবং অসংখ্য সার্ভার রিকুয়েস্ট তৈরি করতে পারে।

ইমেজ স্প্রাইটের (Sprite) ব্যবহার সার্ভার রিকুয়েস্টের সংখ্যা কমিয়ে আনে এবং ব্যান্ডউইথ বাচিয়ে দেয়।


ইমেজ স্প্রাইট(Sprite) - সাধারণ উদাহরণ

তিনটি আলাদা ছবি ব্যবহার করার চেয়ে আমরা একটি ছবিতে তিনটি ছবি ব্যবহার করতে পারঃ("icon.gif")

spriteimage

সিএসএস এর সাহায্যে আমরা একটি ছবির যতটুকু প্রদর্শন করে দেখানোর দরকার ততটুকুই দেখাতে পারি।

নিচের উদাহরণে, "icon.gif" ইমেজের কোন অংশটুকু প্রদর্শিত হবে তা সিএসএস দিয়ে নির্ধারণ করে দেয়া হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>image sprite</title>
<style>
#homepage {
    width: 46px;
    height: 44px;
    background: url(..//css_examples/icon.gif) 0 0;
}
#nextpage {
    width: 43px;
    height: 44px;
    background: url(..//css_examples/icon.gif) -91px 0;
}
</style>
</head>
<body>

<img id="homepage" src="..//css_examples/icondot.gif"><br><br>
<img id="nextpage" src="..//css_examples/icondot.gif">				

</body>
</html>

ফলাফল



উদাহরণের ব্যাখ্যা

ইমেজ স্প্রাইট(Sprite) ব্যবহারের এটাই সবচেয়ে সহজ উপায়। নিচে আমরা স্প্রাইট ইমেজে লিঙ্ক ও হোভার ইফেক্টের ব্যবহার দেখাবোঃ


ইমেজ স্প্রাইট(Sprite) এর মাধ্যমে নেভিগেশন লিস্ট তৈরি

নেভিগেশন লিস্ট তৈরির জন্য আমরা "icon.gif" স্প্রাইট(Sprite) ইমেজটি ব্যবহার করবো।

আমরা এখানে এইচটিএমএল লিস্ট ব্যবহার করবো, কারণ ইহা একই সাথে লিংক ও ব্যাকগ্রাউন্ড ইমেজ সাপোর্ট করে

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#listitem {
    position: relative;
}
#listitem li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}
#listitem li, #listitem a {
    height: 44px;
    display: block;
}
#homepage {
    left: 0px;
    width: 46px;
    background: url('..//css_examples/icon.gif') 0 0;
}
#backpage {
    left: 63px;
    width: 43px;
    background: url('..//css_examples/icon.gif') -48px 0;
}
#nextpage {
    left: 129px;
    width: 43px;
    background: url('..//css_examples/icon.gif') -92px 0;
}
</style>
</head>
<body>

<ul id="listitem">
  <li id="homepage"><a href="www.sattacademy.com"></a></li>
  <li id="backpage"><a href="www.sattacademy.com/css"></a></li>
  <li id="nextpage"><a href="www.sattacademy.com/html"></a></li>
</ul>
		

</body>
</html>

ফলাফল



উদাহরণের ব্যাখ্যা

তারপরে ইমেজের প্রত্যেক অংশের জন্য অবস্থান এবং স্টাইল সেট করা হয়েছেঃ


ইমেজ স্প্রাইট(Sprite) - হোভার ইফেক্ট

এখন আমরা নেভিগেশন লিস্টে হোভার ইফেক্ট যোগ করবো।

টিপসঃ :hover সিলেক্টরটি শুধুমাত্র লিংকে নয়, বরং সকল এলিমেন্টেই ব্যবহার করা যায়।

আমাদের নতুন ইমেজটিতে ("iconbg.gif")নেভিগেশনের জন্য তিনটি ইমেজ রয়েছে এবং তিনটি ইমেজ রয়েছে হোভার ইফেক্টের জন্য।

ImgSpite

ইহা একটি সিংগেল ইমেজ অর্থাৎ ছয়টি আলাদা ইমেজ না হওয়ায় ব্যবহারকারী যখন ইমেজের উপর হোভার করবে তখন লোডিংয়ের জন্য সময় নষ্ট হবে না,

হোভার ইফেক্ট যুক্ত করার জন্য আমরা শুধুমাত্র তিন লাইনের কোড যোগ করেছিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title></title>
<style>
#listitem {
    position: relative;
}
#listitem li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}
#listitem li, #listitem a {
    height: 44px;
    display: block;
}
#homepage {
    left: 0px;
    width: 46px;
    background: url('..//css_examples/icon.gif') 0 0;
}
#backpage {
    left: 63px;
    width: 43px;
    background: url('..//css_examples/iconbg.gif') -47px 0;
}
#nextpage {
    left: 129px;
    width: 43px;
    background: url('..//css_examples/iconbg.gif.gif') -91px 0;
}
#homepage a:hover {
    background: url('..//css_examples/iconbg.gif.gif') 0 -45px;
}
# a:hover {
    background: url('..//css_examples/iconbg.gif') -47px -45px;
}
#nextpage a:hover {
    background: url('..//css_examples/iconbg.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="listitem">
  <li id="homepage"><a href="www.sattacademy.com"></a></li>
  <li id="backpage"><a href="www.sattacademy.com/css"></a></li>
  <li id="nextpage"><a href="www.sattacademy.com/html"></a></li>
</ul>

</body>
</html>

ফলাফল



উদাহরণের ব্যাখ্যাঃ