সিএসএস Animatable এর উদাহরণ পেজ
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
bottom: 0px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {bottom: 300px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {bottom: 300px;}
}
</style>
</head>
<body>
<p> bottom প্রোপার্টি ধীরে ধীরে ০ থেকে ৩০০ পিক্সেল এবং পুনরায় ০ পিক্সেলে ফিরে আসেঃ<p>
<div id="thisDiv">
<h1>SATT</h1>
</div>
<p>সিএসএস এ bottom এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার(৯) এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 100px;
height: 100px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {box-shadow: 10px 20px 30px green;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {box-shadow: 10px 20px 30px green;}
}
</style>
</head>
<body>
<p> box-shadow প্রোপার্টি ধীরে ধীরে পরিবর্তন হচ্ছেঃ<p>
<div id="thisDiv">
<h1>SATT</h1>
</div>
<p>box-shadow সিএসএস এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার(৯) এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
width: 100px;
height: 100px;
background-color: coral;
color: white;
position: absolute;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {clip: rect(0px, 50px, 50px, 0px);}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {clip: rect(0px, 50px, 50px, 0px);}
}
</style>
</head>
<body>
<p>clip প্রোপার্টি সিএসএস এর মাধ্যমে এনিমেটেড করা হয়েছে , কিন্তু এনিমেশন প্রত্যাশিত কাজ করছে না। </p>
<p><b>নোট:</b> সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার(৯) এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<div id="thisDiv">
<h1>SATT</h1>
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
width: 300px;
color: yellow;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {color: green;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {color: green;}
}
</style>
</head>
<body>
<p> টেক্সট এর কালার ধীরে ধীরে হলুদ থেকে নীল এবং পুনরায় হলুদ কালারে ফিরে আসছেঃ <p>
<div id="thisDiv">
<h1> এটি হেডিং </h1>
<p> এটি প্যারাগ্রাফ </p>
</div>
<p> color প্রোপার্টি সিএসএস এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b>সিএসএস এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
width: 500px;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-count: 5;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {column-count: 5;}
}
</style>
</head>
<body>
<p> কলামের সংখ্যা ধীরে ধীরে ১ থেকে ৫ এবং পুনরায় ১ এ ফিরে আসেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে
শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়। এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p>column-count প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> column-count প্রোপার্টির এনিমেশন ফায়ারফক্সে সাপোর্ট করে না।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টানেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-gap: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {column-gap: 100px;}
}
</style>
</head>
<body>
<p>কলামের গ্যাপ ধীরে ধীরে নরমাল থেকে ১০০ পিক্সেল এবং পুনরায় নরমালে ফিরে আসছেঃ <p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়।
সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী।
ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন।
এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে
শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়। এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
<p> column-gap প্রোপার্টি CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> column-gap প্রোপার্টির এনিমেশন ফায়ারফক্সে সাপোর্ট করে না।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 1px outset yellow;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-column-rule: 1px outset yellow;
-webkit-column-count: 3;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
column-count: 3;
column-rule: 1px outset yellow;
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-rule: 50px outset green; }
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-moz-column-rule: 50px outset green; /* Firefox */
column-rule: 50px outset green;
}
}
</style>
</head>
<body>
<p> column-rule সব column-rule প্রোপার্টির একটি শর্টহেন্ড প্রোপার্টি।</p>
<p> column-rule-color এবং column-rule-width CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<p> কলাম এবং রোল এর মধ্যে ধীরে ধীরে পরিবর্তন হচ্ছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী। ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন। এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়। এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 15px outset yellow;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-column-rule: 15px outset yellow;
-webkit-column-count: 3;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
column-count: 3;
column-rule: 15pxpx outset yellow;
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-rule-color: green;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-moz-column-rule-color: green; /* Firefox */
column-rule-color: green;
}
}
</style>
</head>
<body>
<p>কলাম-রুল-কালার হচ্ছে<em>এনিমেটেবল</em>CSS </p>
<p><b>নোট:</b> ইন্টারনেট এক্সপ্লোরার 9 এবং earlier versions এ CSS এনিমেশন কাজ করবে না।</p>
<div id="thisDiv">
শিক্ষা, সংস্কৃতি ও ক্রীড়া বিষয়ক তৎকালিন মন্ত্রী অধ্যাপক ইউসুফ আলী ১৯৭২ সালের ১৫ জুলাই বাংলাদেশ ফুটবল ফেডারেশন, বাফুফে প্রতিষ্ঠা করেছিলেন। শুরুতে তিনিই ছিলেন বাফুফের প্রথম সভাপতি। আর ওয়ারী ক্লাব-এর আবুল হাসেম ছিলেন সংগঠনের প্রথম সাধারণ সম্পাদক। ১৯৭৩ সালে ফুটবলের আঞ্চলিক সংস্থা এএফসি এবং ১৯৭৪-এ আন্তর্জাতিক সংস্থা ফিফা-এর সদস্য পদ পায় বাংলাদেশ ফুটবলের ফেডারেশনের সর্বোচ্চ সংস্থা। ১৯৮২-৮৬ ও ১৯৯৮-২০০২ সালে দু’দফায় বাংলাদেশ এএফসি’র কার্যনির্বাহী সদস্য নির্বাচিত হয়। অবসরপ্রাপ্ত মেজর হাফিজউদ্দিন আহমেদ ১৯৯০-৯৪ এর জন্য এএফসি’র সহ-সভাপতিও নির্বাচিত হন। ফুটবল ফেডারেশন সেই ১৯৪৮ সাল থেকে ঢাকা ফুটবল লীগ চালিয়ে আসছে। বাংলাদেশ স্বাধীন হওয়ার পরও সেই লীগ ধারাবাহিকতা ধরে রেখেছে। একটা সময় ঢাকার ফুটবল লীগগুলো সমর্থক ও জনপ্রিয়তা পায়। প্রিমিয়ার লীগ, প্রথম বিভাগ, দ্বিতীয় বিভাগ, এবং তৃতীয় বিভাগ নামে এই লীগগুলো এখনও প্রচলিত।
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 1px outset yellow;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-column-count: 3;
-webkit-column-rule: 1px outset yellow;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
column-count: 3;
column-rule: 1pxpx outset yellow;
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-rule-width: 50px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-moz-column-rule-width: 50px; /* Firefox */
column-rule-width: 50px;
}
}
</style>
</head>
<body>
<p> column-rule-width টি <em> এনিমেশন করে </em> CSS এর মধ্যে ।</p>
<p><b>নোট:</b> CSS এনিমেশনটি ইন্টারনেট এক্সপ্লোরার 9 এবং তার নতুন ভার্সনটিকে সাপোর্ট করে না ।</p>
<p> ধীরে ধীরে কলামের ভিতর width টি পরিবর্তন হবে , 1px থেকে 50px, এবং আবার 1px এ ফিরে আসবে :<p>
<div id="thisDiv">
সুন্দরবন হলো বঙ্গোপসাগর উপকূলবর্তী অঞ্চলে অবস্থিত একটি প্রশস্ত বনভূমি যা বিশ্বের প্রাকৃতিক বিস্ময়াবলীর অন্যতম। পদ্মা, মেঘনা ও ব্রহ্মপুত্র নদীত্রয়ের অববাহিকার বদ্বীপ এলাকায় অবস্থিত এই অপরূপ বনভূমি বাংলাদেশের খুলনা, সাতক্ষীরা, বাগেরহাট, পটুয়াখালি ও বরগুনা জেলা জুড়ে বিস্তৃত। সমুদ্র উপকূলবর্তী নোনা পরিবেশের সবচেয়ে বড় ম্যানগ্রোভ বন হিসেবে সুন্দরবন বিশ্বের সর্ববৃহৎ অখণ্ড বনভূমি।[২]। ১০,০০০ বর্গ কিলোমিটার জুড়ে গড়ে ওঠা সুন্দরবনের ৬,০১৭ বর্গ কিলোমিটার[৩] রয়েছে বাংলাদেশে।[৪] সুন্দরবন ১৯৯৭ খ্রিস্টাব্দে ইউনেস্কো বিশ্ব ঐতিহ্যবাহী স্থান হিসেবে স্বীকৃতি লাভ করে। এর বাংলাদেশ ও ভারতীয় অংশ বস্তুত একই নিরবচ্ছিন্ন ভূমিখণ্ডের সন্নিহিত অংশ হলেও ইউনেস্কোর বিশ্ব ঐতিহ্যের তালিকায় ভিন্ন ভিন্ন নামে সূচিবদ্ধ হয়েছে; যথাক্রমে “সুন্দরবন” ও “সুন্দরবন জাতীয় উদ্যান” নামে। সুন্দরবনকে জালের মত জড়িয়ে রয়েছে সামুদ্রিক স্রোতধারা, কাদা চর এবং ম্যানগ্রোভ বনভূমির লবণাক্ততাসহ ক্ষুদ্রায়তন দ্বীপমালা। মোট বনভূমির ৩১.১ শতাংশ, অর্থাৎ ১,৮৭৪ বর্গকিলোমিটার জুড়ে রয়েছে নদীনালা, খাঁড়ি, বিল মিলিয়ে জলাকীর্ণ অঞ্চল।[৩] বনভূমিটি, স্বনামে বিখ্যাত রয়েল বেঙ্গল টাইগার ছাড়াও নানান ধরণের পাখি, চিত্রা হরিণ, কুমির ও সাপসহ অসংখ্য প্রজাতির প্রাণীর আবাসস্থল হিসেবে পরিচিত। জরিপ মোতাবেক ৫০০ বাঘ ও ৩০,০০০ চিত্রা হরিণ রয়েছে এখন সুন্দরবন এলাকায়। ১৯৯২ সালের ২১শে মে সুন্দরবন রামসার স্থান হিসেবে স্বীকৃতি লাভ করে।
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
/* Firefox */
-moz-column-width: 300px;
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-webkit-column-width: 300px;
-webkit-animation: mymove 5s infinite;
/* স্ট্যান্ডার্ড সিনট্যাক্স */
column-width: 300px;
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-column-width: 100px;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
}
</style>
</head>
<body>
<p>column-width প্রোপার্টিটি <em>এনিমেশন</em> CSS এর মধ্যে পড়ে ।</p>
<p><strong> নোট:</strong> IE 9 এবং তার নতুন ভার্সনটি column-rule প্রোপার্টিকে সাপোর্ট করে না ।</p>
<p>ধীরে ধীরে কলামের width টি 300px থেকে 100px, এবং 300px এ ফিরে আসে :<p>
<div id="thisDiv">
সুন্দরবন হলো বঙ্গোপসাগর উপকূলবর্তী অঞ্চলে অবস্থিত একটি প্রশস্ত বনভূমি যা বিশ্বের প্রাকৃতিক বিস্ময়াবলীর অন্যতম। পদ্মা, মেঘনা ও ব্রহ্মপুত্র নদীত্রয়ের অববাহিকার বদ্বীপ এলাকায় অবস্থিত এই অপরূপ বনভূমি বাংলাদেশের খুলনা, সাতক্ষীরা, বাগেরহাট, পটুয়াখালি ও বরগুনা জেলা জুড়ে বিস্তৃত। সমুদ্র উপকূলবর্তী নোনা পরিবেশের সবচেয়ে বড় ম্যানগ্রোভ বন হিসেবে সুন্দরবন বিশ্বের সর্ববৃহৎ অখণ্ড বনভূমি।[২]। ১০,০০০ বর্গ কিলোমিটার জুড়ে গড়ে ওঠা সুন্দরবনের ৬,০১৭ বর্গ কিলোমিটার[৩] রয়েছে বাংলাদেশে।[৪] সুন্দরবন ১৯৯৭ খ্রিস্টাব্দে ইউনেস্কো বিশ্ব ঐতিহ্যবাহী স্থান হিসেবে স্বীকৃতি লাভ করে। এর বাংলাদেশ ও ভারতীয় অংশ বস্তুত একই নিরবচ্ছিন্ন ভূমিখণ্ডের সন্নিহিত অংশ হলেও ইউনেস্কোর বিশ্ব ঐতিহ্যের তালিকায় ভিন্ন ভিন্ন নামে সূচিবদ্ধ হয়েছে; যথাক্রমে “সুন্দরবন” ও “সুন্দরবন জাতীয় উদ্যান” নামে। সুন্দরবনকে জালের মত জড়িয়ে রয়েছে সামুদ্রিক স্রোতধারা, কাদা চর এবং ম্যানগ্রোভ বনভূমির লবণাক্ততাসহ ক্ষুদ্রায়তন দ্বীপমালা। মোট বনভূমির ৩১.১ শতাংশ, অর্থাৎ ১,৮৭৪ বর্গকিলোমিটার জুড়ে রয়েছে নদীনালা, খাঁড়ি, বিল মিলিয়ে জলাকীর্ণ অঞ্চল।[৩] বনভূমিটি, স্বনামে বিখ্যাত রয়েল বেঙ্গল টাইগার ছাড়াও নানান ধরণের পাখি, চিত্রা হরিণ, কুমির ও সাপসহ অসংখ্য প্রজাতির প্রাণীর আবাসস্থল হিসেবে পরিচিত। জরিপ মোতাবেক ৫০০ বাঘ ও ৩০,০০০ চিত্রা হরিণ রয়েছে এখন সুন্দরবন এলাকায়। ১৯৯২ সালের ২১শে মে সুন্দরবন রামসার স্থান হিসেবে স্বীকৃতি লাভ করে।
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#thisDiv {
border: 1px solid teal;
-webkit-animation: mymove 5s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 5s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {-webkit-columns: 100px 5;}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-moz-columns: 100px 5; /* Firefox */
columns: 100px 5;
}
}
</style>
</head>
<body>
<p> column-count এবং column-width প্রোপার্টিগুলো ঠিক করার জন্য columns প্রোপার্টি একটি শর্টহ্যান্ড প্রোপার্টি।</p>
<p> column-count এবং column-width CSS এর মাধ্যমে এনিমেটেড করা হয়েছে।</p>
<p> <b>নোট:</b> column-count প্রোপার্টির এনিমেশন ফায়ারফক্সে সাপোর্ট করে না।</p>
<p><b>নোট:</b> CSS এনিমেশন ইন্টারনেট এক্সপ্লোরার ৯ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<p>columns প্রোপার্টি ধীরে ধীরে পরিবর্তন হচ্ছেঃ<p>
<div id="thisDiv">
১৯২১ সালে তদানীন্তন ব্রিটিশ ভারতে অক্সব্রিজ শিক্ষা ব্যবস্থা অনুসরণে এটি স্থাপিত হয়। সূচনালগ্নে বিভিন্ন প্রথিতযশা বৃত্তিধারী ও বিজ্ঞানীদের দ্বারা কঠোরভাবে মান নিয়ন্ত্রিত হবার প্রেক্ষাপটে এটি প্রাচ্যের অক্সফোর্ড নামে স্বীকৃতি পায়।
বাংলাদেশের উচ্চ শিক্ষিত সম্প্রদায়ের প্রায় দুই-তৃতীয়াংশ এই বিশ্ববিদ্যালয়ের ছাত্র-ছাত্রী। ঢাকা বিশ্ববিদ্যালয়ের শিক্ষকবৃন্দ সবচেয়ে বেশিসংখ্যক বাংলাদেশ বিজ্ঞান একাডেমি পদক লাভ করেছেন। এছাড়াও, এটি বাংলাদেশের সর্ববৃহৎ ও একমাত্র বিশ্ববিদ্যালয় হিসেবে এশিয়াউইকের পক্ষ থেকে শীর্ষ ১০০ বিশ্ববিদ্যালয়ে জায়গা করে নেয়। এখানে প্রায় ৩৩,৫০০ ছাত্র-ছাত্রী এবং ১,৮০৫ জন শিক্ষক রয়েছে৷
</div>
</body>
</html>
ফলাফল
animatable এর উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-animation: mymove 7s infinite; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
animation: mymove 7s infinite;
}
/* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
@-webkit-keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
/* স্ট্যান্ডার্ড সিনট্যাক্স */
@keyframes mymove {
50% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
}
</style>
</head>
<body>
<p> ইমেজের কালার কাল ও সাদা (100% grayscale) এ ধীরে ধীরে পরিবর্তন হচ্ছে এবং পুনরায় আগের কালারে ফিরে আসছে :<p>
<img src="satt_bangla1.jpg" alt="satt" width="300" height="300">
<p> filter প্রোপার্টি CSS এর মাধ্যমে <em>এনিমেটেবল </em> করা হয়েছে।</p>
<p><strong>নোট:</strong> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
