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

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

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

 

সিএসএস (৩) ট্রানজিশন


সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।

উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন

ট্রাঞ্জিশন

সিএসএস(৩) ট্রানজিশন প্রোপার্টি

নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :

transition

এর দ্বারা একটি প্রোপার্টির মধ্যে চারটি ট্রানজিশন প্রোপার্টিকে সেট করা যায়।

transition-delay

ট্রানজিশন ইফেক্ট শুরু হতে বিলম্ব করবে।

transition-duration

ট্রানজিশন শুরু এবং শেষ করার সময় ব্যাপ্তি।

transition-property

ট্রানজিশন ইফেক্টের জন্য সিএসএস প্রোপার্টির নাম যুক্ত করে।

transition-timing-function

ট্রানজিশন ইফেক্ট ট্রানজিশন হওয়ার গতি নির্দেশ করে।


সিএসএস(৩) ট্রানজিশন কিভাবে ব্যবহার করা হয় ?

একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে

  • একটি সিএসএস প্রোপার্টি যেটাতে আপনি ইফেক্ট যুক্ত করতে চান
  • ইফেক্টের সময়কাল।

নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।

নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ <div> এলিমেন্ট। এই <div> এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি ৩ সেকেন্ড অর্থাৎ ইফেক্টটি ৩ সেকেন্ড ধরে কাজ করবে :

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background: green;
    -webkit-transition: width 3s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
    transition: width 3s;
}
div:hover {
    width: 400px;
}
</style>
</head>
<body>
<div></div>
<p> ট্রানজিশন প্রভাব দেখার জন্য ডিভ এলিমেন্টের উপর হোভার করুন। </p>

</body>
</html>

ফলাফল



যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে।

এখন, width প্রোপার্টির একটি নতুন ভ্যালু নির্দিষ্ট করে যখন ব্যবহারকারী তার মাউস <div> এলিমেন্টের উপর নিয়ে যাবেঃ

div:hover {
    width: 400px;
}

লক্ষ্য করুন যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে যায়।


বিভিন্ন প্রোপার্টির ভ্যালু পরিবর্তন

নিচের উদাহরণে width এবং height উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে এখানে width এর জন্য সময়ব্যাপ্তি ৩ সেকেন্ড এবং height এর জন্য ৪ সেকেন্ড নির্ধারণ করা হয়েছে :

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background: green;
    -webkit-transition: width 3s, height 4s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
    transition: width 3s, height 4s;
}
div:hover {
    width: 400px;
    height: 400px;
}
</style>
</head>
<body>

<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>


</body>
</html>

ফলাফল




ট্রানজিশনে বক্ররেখার গতি নির্দিষ্ট

transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্দেশ করা হয়।

transition-timing-function প্রোপার্টির জন্য নিচের ভ্যালুগুলো ব্যবহার করা যেতে পারে :

  • ease - এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ করবে (এটি ডিফল্ট)।
  • linear - এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।
  • ease-in - এনিমেশনটি ধীর গতিতে শুরু হবে।
  • ease-out - এনিমেশনটি ধীর গতিতে শেষ হবে।
  • ease-in-out - এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।
  • cubic-bezier(n,n,n,n) - cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।

নিচের উদাহরণে ব্যবহারযোগ্য কিছু ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে :

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background: green;
    -webkit-transition: width 3s;/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
    transition: width 3s;
}
/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
#linear {-webkit-transition-timing-function: linear;}
#ease {-webkit-transition-timing-function: ease;}
#ease-in {-webkit-transition-timing-function: ease-in;}
#ease-out {-webkit-transition-timing-function: ease-out;}
#ease-in-out {-webkit-transition-timing-function: ease-in-out;}

/* স্ট্যান্ডার্শ সিন্ট্যাক্স */
#linear {transition-timing-function: linear;}
#ease {transition-timing-function: ease;}
#ease-in {transition-timing-function: ease-in;}
#ease-out {transition-timing-function: ease-out;}
#ease-in-out {transition-timing-function: ease-in-out;}

div:hover {
    width: 400px;
}
</style>
</head>
<body>

<div id="linear">linear</div><br>
<div id="ease">ease</div><br>
<div id="ease-in">ease-in</div><br>
<div id="ease-out">ease-out</div><br>
<div id="ease-in-out">ease-in-out</div><br>
<p>প্রতিক্রিয়া দেখার জন্য ডিভ এলিমেন্টের উপর মাউস এর কার্সরটি নিয়ে যান।</p>


</body>
</html>

ফলাফল




বিলম্ব (Delay) ট্রানজিশন ইফেক্ট

transition-delay প্রোপার্টির নির্দেশ করে যে ট্রানজিশন ইফেক্টটি বিলম্বে শুরু হবে

নিচের উদাহরণে ট্রানজিশন ইফেক্টটি শুরু হতে ১ সেকেন্ড বিলম্ব করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background: green;
    -webkit-transition: width 2s; /* সাফারির জন্য  */
    -webkit-transition-delay: 1s; /* সাফারির জন্য */
    transition: width 2s;
    transition-delay: 1s;
}
div:hover {
    width: 400px;
}
</style>
</head>
<body>

<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>

</body>
</html>

ফলাফল




ট্রানজিশন + ট্রান্সফর্মেশন

নিচের উদাহরণে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background:green;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* সাফারির জন্য */
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 350px;
    height: 350px;
    -webkit-transform: rotate(180deg); /* সাফারির জন্য */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>div এলিমেন্টের উপর মাউস হোভার করলে ট্রানজেশন প্রভাব দেখতে পারবেন।</p>



</body>
</html>

ফলাফল




ট্রানজিশনের আরও উদাহরণ

সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলো একটি একটি করে নির্ধারণ করা যায় :

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background:green;
    /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
    -webkit-transition-property: width;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;
    /* স্ট্যান্ডার্ড সিন্ট্যাক্স */
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
div:hover {
    width: 400px;
}
</style>
</head>
<body>

<div></div>
<p> উপরের ডিভ এলিমেন্টে  মাউস নিয়ে গেলে ট্রানজেশনের প্রভাব দেখা যাবে।</p>
<p><b>নোটঃ</b> ট্রানজেশনের প্রভাব ১ সেকেন্ড পর শুরু হবে।</p>
</body>
</html>

ফলাফল



অথবা transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করেও নির্ধারণ করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css transition example</title>
<style>
div {
    width: 120px;
    height: 120px;
    background: green;
    -webkit-transition: width 2s linear 1s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
    transition: width 2s linear 1s;
}
div:hover {
    width: 400px;
}
</style>
</head>
<body>

<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>
</body>
</html>

ফলাফল




নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।


ট্রানজিশনের জন্য ব্রাউজার সাপোর্ট

টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।

ব্রাউজার সাপোর্ট

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-delay 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-property 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-
transition-timing-function 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-