কম্পিউটার টিউটোরিয়াল

CSS দিয়ে সাধারণ স্টার রেটিং লুক তৈরি করার পদ্ধতি


উদাহরণ

নিচের কোডটি CSS এবং Font Awesome ব্যবহার করে সাধারণ স্টার রেটিং লুক তৈরি করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 30px;
}
.fa {
    font-size: 30px;
    color: grey;
}
.rated {
    color: rgb(255, 0, 0);
    border: 2px solid yellow;
}
</style>
</head>
<body>
<h1>Star Rating Example</h1>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে সাধারণ স্টার রেটিং লুক তৈরি করার পদ্ধতি


  1. CSS দিয়ে সাধারণ স্টার রেটিং লুক তৈরি করার পদ্ধতি

  2. CSS দিয়ে কুপন তৈরি করার পদ্ধতি

  3. CSS দিয়ে খালি সার্কেল তৈরি করার পদ্ধতি

  4. CSS দিয়ে অ্যারো (Arrow) তৈরি