সিএসএস ৩ এনিমেশন

«পূর্ববর্তী

পরবর্তী »

সিএসএস(৩) এনিমেশন

আপনি জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অধিকাংশ এইচটিএমএল এলিমেন্টকে সিএসএস(৩) এনিমেশন দ্বারা প্রাণবন্ত করে তুলতে পারেন।

এনিমেশন
Animation

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

নিচের টেবিলে @keyframes এবং সকল এনিমেশন প্রোপার্টি গুলো দেওয়া হলোঃ

@keyframes

এনিমেশনের জন্য সিএসএস প্রোপার্টি গুলো নির্ধারণ করে।

animation

এনিমেশনের সকল প্রোপার্টিগুলো সেট করার একটি সংক্ষিপ্ত প্রোপার্টি।

animation-delay

এনিমেশন শুরু হওয়ার বিলম্ব সময় নির্ধারণ করে।

animation-direction

এনিমেশনের দিকে নির্ধারণ করে।

animation-duration

এনিমেশন সম্পূর্ণ হওয়ার সময়-কাল নির্ধারণ করে।

animation-fill-mode

যখন এনিমেশনটি বন্ধ আছে অর্থাৎ এনিমেশনটি শেষ বা শুরু হতে দেরি হচ্ছে তখন এলিমেন্টের জন্য স্টাইল নির্ধারণ করে।

animation-iteration-count

এনিমেশনটি কতবার চলবে তা নির্ধারণ করে।

animation-name

এনিমেশনের একটি নাম নির্ধারণ করে যা এলিমেশনের সাথে @keyframes প্রোপার্টির লিংক করে।

animation-play-state

এনিমেশনটি চলমান নাকি বন্ধ থাকবে তা নির্ধারণ করে।

animation-timing-function

এনিমেশনে গতিবিধি নির্ধারণ করে।

এনিমেশন কি?

এনিমেশন দ্বারা একটি এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করা যায়। আপনি আপনার ইচ্ছে মত প্রোপার্টিকে যতবার চাইবেন ততবার পরিবর্তন করতে পারবেন।

সিএসএস(৩) এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে আপনাকে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হবে। আর এই প্রোপার্টি গুলো keyframes এর মধ্যে রাখতে হবে। যা পরবর্তিতে এনিমেশন ঘটার সময় আপনার এলিমেন্ট গুলোর স্টাইল পরিবর্তন করবে।

@keyframes এর নিয়ম

কোনো এলিমেন্টে এনিমেশন করতে হলে এর স্টাইল গুলো পরিবর্তন করতে হয়। আর এই পরিবর্তিত স্টাইল গুলো আমরা @keyframes এর ভিতর নির্দিষ্ট করে দিব। আর এই স্টাইল গুলোই এনিমেশনের সময় কাজ করবে।

@keyframes দ্বারা তৈরি এনিমেশনকে কাযে লাগাতে হলে আপনাকে অবশ্যই এটিকে animation প্রোপার্টি দ্বারা যে কোনো এলিমেন্টের সাথে বাইন্ড করতে হবে।

নিচের উদাহরণে দেখা যাবে এনিমেশনটিকে একটি <div> এলিমেন্টের সাথে বাইন্ড করা হয়েছে। এই এনিমেশনটি ৪ সেকেন্ডের যেখানে <div> এলিমেন্টির ব্যাকগ্রাউন্ড কালার লাল থেকে ধীরে ধীরে হলুদ কালারে পরিবর্তন হতে দেখা যাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: teal;
    animation-name: example;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
}
@keyframes example {
    from {background-color: maroon;}
    to {background-color: orangered;}
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    from {background-color: maroon;}
    to {background-color: orangrred;}
}

</style>
</head>
<body>

<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>
<p><b>নোট:</b>এনিমেশন শেষ হওয়ার পর এটি আবার পূর্বের স্টাইলে ফিরে যায়।</p>

</body>
</html>

ফলাফল

সর্তকতাঃ যদি animation-duration প্রোপার্টি ব্যবহার করা না হয় তবে এনিমেশনটির কোন প্রভাব থাকবেনা। কারণ এটির ডিফল্ট মান 0 থাকে।

উপরের উদাহরণে আমরা @keyframes এর মধ্যে "from" এবং "to" এই দুইটি কীওয়ার্ড দ্বারা এনিমেশনটি ডিফাইন করেছিলাম। এছাড়াও আমরা শতকরা(%) হারে এনিমেশনের মান ডিফাইন করতে পারি। এক্ষেত্রে এনিমেশনটি 0% থেকে শুরু করবে এবং 100% এ সম্পূর্ণ করবে।

শতকরা(%) ব্যবহার করে আপনি অনেক জটিল এবং কঠিন এনিমেশন তৈরি করতে পারেন।

নিম্নের উদাহরণে <div> এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় ৪টি ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
}
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: green;}
    50%  {background-color: teal;}
    100% {background-color: orangered;}
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color: red;}
    25%  {background-color: green;}
    50%  {background-color: teal;}
    100% {background-color: orangered;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

নিম্নের উদাহরণে <div> এলিমেন্টি এনিমেশনের সময় শতকরা(%) মান অনুযাই ব্যাকগ্রাউন্ড কালার এবং অবস্থান উভয় পরিবর্তন হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

বিলম্ব(Delay) এনিমেশন

animation-delay প্রোপার্টি নির্দেশ করে যে এনিমেশনটি কত সময়-কাল পর শুরু হবে।

নিচের উদাহরণে এনিমেশনটি শুরু হতে ২ সেকেন্ড বিলম্ব করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

এনিমেশন পুনরাবৃত্তি

animation-iteration-count প্রোপার্টি একটি এনিমেশন কতবার চলবে তা নির্দেশ করে।

নিম্নের উদাহরণে এনিমেশনটি ৩ বার চলার পর বন্ধ হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

নিম্নের উদাহরণে এনিমেশনটি সব-সময় চলতে থাকবে। আর এর জন্য animation-iteration-count প্রোপার্টি ভ্যালু "infinite" সেট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-iteration-count: infinite; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

এনিমেশন বিপরীত দিক

কোনো এনিমেশনকে বিপরীত দিক হতে চালু করার জন্য animation-direction প্রোপার্টি ব্যবহার করা হয়।

নিম্নের উদাহরণে এনিমেশনটিকে বিপরীত দিক হতে চালু করা হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-iteration-count: 3; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;

}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

নিম্নের উদাহরণে এনিমেশনটিকে প্রথমে সামনের দিকে তারপর বিপরীত দিকে আবার সামনের দিকে চালু করার জন্য animation-direction প্রোপার্টি ভ্যালু "alternate" সেট করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-iteration-count: 3; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

এনিমেশনের বক্ররেখা গতিবিধি

এনিমেশনের বক্ররেখা গতি নিয়ন্ত্রন করার জন্য animation-timing-function প্রোপার্টি ব্যবহার করা হয়।

animation-timing-function প্রোপার্টির ভ্যালু গুলো নিম্নের দেওয়া হলোঃ

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

নিচের উদাহরণে এনিমেশনের কিছু ভিন্ন ভিন্ন গতিবিধি দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 50px;
    background-color: teal;
    color: whitesmoke;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation: mymove 5s infinite;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
#linear {-webkit-animation-timing-function: linear;}
#ease {-webkit-animation-timing-function: ease;}
#ease-in {-webkit-animation-timing-function: ease-in;}
#ease-out {-webkit-animation-timing-function: ease-out;}
#ease-in-out {-webkit-animation-timing-function: ease-in-out;}

#linear {animation-timing-function: linear;}
#ease {animation-timing-function: ease;}
#ease-in {animation-timing-function: ease-in;}
#ease-out {animation-timing-function: ease-out;}
#ease-in-out {animation-timing-function: ease-in-out;}

/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

এনিমেশন সংক্ষিত্ত প্রোপার্টি

নিম্নের উদাহরনে ছয়টি প্রোপার্টির ব্যবহার একত্রে দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation-name: example; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-duration: 4s; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-iteration-count: infinite; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */ 
    -webkit-animation-timing-function: linear; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    -webkit-animation-direction: alternate; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation-name: example;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

সংক্ষিত্ত প্রোপার্টি animation ব্যবহার করে উপরের এনিমেশন এর মতোই ইফেক্ট পাওয়া যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: maroon;
    position: relative;
    -webkit-animation: example 5s linear 2s infinite alternate; /* গুগল ক্রম, অপেরা ও সাফারির জন্য */
    animation: example 5s linear 2s infinite alternate;
}
/* গুগল ক্রম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
@keyframes example {
    0%   {background-color:orangered; left:0px; top:0px;}
    25%  {background-color:grey; left:200px; top:0px;}
    50%  {background-color:teal; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p> এনিমেশন ইফেক্ট দেখতে পেজ রিলোড করুন</p>
<div></div>

</body>
</html>

ফলাফল

বিশেষ দ্রষ্টব্যঃ উপরের উদাহরণগুলো ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্বের ভার্সনে কাজ করে না

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

প্রোপার্টি	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
`@keyframes`	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
`animation`	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

« পূর্ববর্তী

পরবর্তী»

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

সিএসএস ৩ এনিমেশন

সিএসএস(৩) এনিমেশন

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

এনিমেশন কি?

@keyframes এর নিয়ম

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

বিলম্ব(Delay) এনিমেশন

উদাহরণ

ফলাফল

এনিমেশন পুনরাবৃত্তি

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

এনিমেশন বিপরীত দিক

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

এনিমেশনের বক্ররেখা গতিবিধি

উদাহরণ

ফলাফল

এনিমেশন সংক্ষিত্ত প্রোপার্টি

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

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

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

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য