কম্পিউটার

কিভাবে CSS ব্যবহার করে তালিকায় বুলেট অ্যানিমেট করবেন


একটি ক্রমবিহীন তালিকায় বুলেট স্টাইল করতে, আমরা তালিকা-শৈলী por

ব্যবহার করতে পারি

সিনট্যাক্স

CSS li-শৈলী সম্পত্তির সিনট্যাক্স নিম্নরূপ −

li {
   list-style: /*value*/
}

উদাহরণ

নিম্নলিখিত উদাহরণগুলি সিএসএস লি-স্টাইল প্রপার্টি চিত্রিত করে।

<!DOCTYPE html>
<html>
   <head>
      <style>
         li {
            margin: 3px 0;
            padding: 2%;
            width: 28%;
            line-height: 1.2%;
            list-style: none;
            border-radius: 5% 0 0 5%;
            box-shadow: -10px 2px 4px 0 chartreuse;
            color: cornflowerblue;
         }
         li:hover {
            box-shadow: -10px 2px 4px 0 blue!important;
            font-size: 1.4em;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
      </ul>
   </body>
</html>

এটি নিম্নলিখিত আউটপুট দেয়

কিভাবে CSS ব্যবহার করে তালিকায় বুলেট অ্যানিমেট করবেন

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <style>
         ol {
            list-style: none;
            counter-reset: li;
            overflow: hidden;
         }
         li {
            margin-right: 10%;
            padding: 2%;
            width: 15%;
            float: left;
            line-height: 1.2%;
            font-weight: bold;
            counter-increment: li;
            box-shadow: inset 2px 14px 10px lightblue;
         }
         li:hover {
            box-shadow: inset 6px 14px 10px lightgreen!important;
            font-size: 1.4em;
         }
         li::before {
            content: counter(li);
            color: seagreen;
            display: inline-block;
            width: 40%;
            margin-left: -2em;
         }
      </style>
   </head>
   <body>
      <ol>
         <li>a</li>
         <li>b</li>
         <li>c</li>
      </ol>
   </body>
</html>

এটি নিম্নলিখিত আউটপুট দেয়

কিভাবে CSS ব্যবহার করে তালিকায় বুলেট অ্যানিমেট করবেন


  1. কিভাবে সিএসএস ব্যবহার করে আইকন দিয়ে একটি ফর্ম তৈরি করবেন?

  2. সিএসএস ব্যবহার করে বুলেট ছাড়াই কীভাবে একটি ক্রমহীন তালিকা তৈরি করবেন?

  3. সিএসএস দিয়ে তালিকার জন্য বুলেটের রং কীভাবে পরিবর্তন করবেন?

  4. কিভাবে CSS ক্লিপ-পাথ ব্যবহার করে একটি ত্রিভুজ তৈরি করবেন