কম্পিউটার

কিভাবে CSS দিয়ে একটি অ্যানিমেটেড সার্চ ফর্ম তৈরি করবেন?


নিম্নলিখিত কোডটি CSS-এর সাথে একটি অ্যানিমেটেড অনুসন্ধান ফর্ম তৈরি করে -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
   box-sizing: border-box;
}
input[type=text] {
   width: 170px;
   font-size: 16px;
   background-color: white;
   padding: 12px 20px 12px 40px;
   transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
   width: 100%;
}
</style>
</head>
<body>
<h1>Animated search form example</p>
<form>
Search:
<input type="text" name="search" placeholder="Search Here...">
</form>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি অ্যানিমেটেড সার্চ ফর্ম তৈরি করবেন?

সার্চ বক্সে ক্লিক করলে -

কিভাবে CSS দিয়ে একটি অ্যানিমেটেড সার্চ ফর্ম তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ইনলাইন ফর্ম তৈরি করবেন?

  2. কিভাবে CSS দিয়ে কার্ড তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  4. কিভাবে CSS দিয়ে তীর তৈরি করবেন?