Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। Icon Buttons এবং Icon Menus ওয়েব পেজে ব্যবহৃত গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান যা ব্যবহারকারীর অভিজ্ঞতাকে সহজ এবং আকর্ষণীয় করে তোলে। Pure.CSS নিজে আইকন বাটন বা আইকন মেনু তৈরি করার জন্য সরাসরি স্টাইল প্রদান না করলেও, আপনি Font Awesome বা অন্য কোনো আইকন লাইব্রেরি ব্যবহার করে এগুলি তৈরি করতে পারেন। এখানে আমরা Font Awesome আইকন এবং Pure.CSS ক্লাসের সাহায্যে Icon Buttons এবং Icon Menus তৈরি করার কিছু উদাহরণ দেখব।
১. Icon Buttons with Pure.CSS:
Icon Buttons এমন বাটন যা আইকন এবং কিছু টেক্সট বা শুধুমাত্র আইকন দিয়ে তৈরি হয়। সাধারণত, Font Awesome অথবা অন্য আইকন লাইব্রেরি ব্যবহার করে এই বাটনগুলোকে তৈরি করা হয়।
উদাহরণ ১: Simple Icon Button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Icon Button Example</title>
<style>
.icon-button {
background-color: #0078d4;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background-color 0.3s;
}
.icon-button i {
margin-right: 8px; /* Space between icon and text */
}
.icon-button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<button class="pure-button icon-button">
<i class="fas fa-thumbs-up"></i> Like
</button>
</body>
</html>
বিশ্লেষণ:
- pure-button: এটি Pure.CSS এর একটি বেসিক ক্লাস যা বাটনের প্রাথমিক স্টাইল প্রদান করে।
- icon-button: এটি কাস্টম ক্লাস যা আইকন এবং টেক্সট দিয়ে তৈরি একটি বাটন। এখানে Font Awesome আইকন ব্যবহার করা হয়েছে (
fa-thumbs-up), এবংmargin-rightদ্বারা আইকন এবং টেক্সটের মধ্যে একটি স্পেস দেওয়া হয়েছে। - :hover স্টাইল ব্যবহার করে বাটনের হোভার অবস্থায় ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
২. Icon Menus with Pure.CSS:
Icon Menus সাধারণত একাধিক আইকন সহ একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়। Font Awesome আইকন ব্যবহার করে সহজেই একটি আইকন মেনু তৈরি করা যায়।
উদাহরণ ২: Simple Icon Menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Icon Menu Example</title>
<style>
.icon-menu {
list-style-type: none;
padding: 0;
display: flex;
gap: 10px;
}
.icon-menu li {
background-color: #0078d4;
padding: 10px;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s;
}
.icon-menu li:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<ul class="icon-menu">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-search"></i></li>
<li><i class="fas fa-envelope"></i></li>
<li><i class="fas fa-cogs"></i></li>
</ul>
</body>
</html>
বিশ্লেষণ:
- icon-menu: এটি একটি unordered list যা আইকন মেনুর জন্য ব্যবহৃত হয়। আইটেমগুলিকে একে অপরের মধ্যে কিছু স্পেস (
gap: 10px) রাখা হয়েছে। - li: প্রতিটি আইটেমকে একটি বৃত্তাকার ব্যাকগ্রাউন্ড দেওয়া হয়েছে, যেখানে Font Awesome আইকন ব্যবহার করা হয়েছে (যেমন
fa-home,fa-search,fa-envelope,fa-cogs)। - :hover: আইটেমগুলির উপর মাউস রাখলে ব্যাকগ্রাউন্ড কালার পরিবর্তন হয়।
৩. Dropdown Icon Menu:
এখানে আমরা একটি ড্রপডাউন মেনু তৈরি করতে পারি, যেখানে আইকন ট্যাপ করলে সাব মেনু প্রদর্শিত হবে।
উদাহরণ ৩: Dropdown Icon Menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Dropdown Icon Menu</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0078d4;
min-width: 160px;
border-radius: 5px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 10px 0;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown-content a:hover {
background-color: #005fa3;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown i {
font-size: 30px;
color: #0078d4;
cursor: pointer;
padding: 10px;
border-radius: 50%;
transition: background-color 0.3s;
}
.dropdown i:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<div class="dropdown">
<i class="fas fa-bars"></i>
<div class="dropdown-content">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
বিশ্লেষণ:
- dropdown: এটি একটি ড্রপডাউন মেনুর মূল কনটেইনার। আইকন (এখানে Font Awesome
fa-bars) প্রদর্শিত হয়, এবং মাউস হোভার করার সময় ড্রপডাউন মেনু খোলার জন্য .dropdown-content ক্লাস ব্যবহার করা হয়। - :hover: মাউস ড্রপডাউন আইকনে রাখলে মেনু প্রদর্শিত হয়।
- dropdown-content a: ড্রপডাউন মেনু আইটেমগুলির জন্য স্টাইল, যেখানে হোভার ইফেক্টও রয়েছে।
Pure.CSS এবং Font Awesome বা অন্য আইকন লাইব্রেরি ব্যবহার করে আপনি সহজেই Icon Buttons এবং Icon Menus তৈরি করতে পারেন। এগুলি ওয়েবসাইটে ইন্টারঅ্যাক্টিভ উপাদান হিসেবে কাজ করে এবং ব্যবহারকারী অভিজ্ঞতাকে আরও উন্নত করে তোলে। Hover Effects এবং Dropdown Menus স্টাইল করতে কাস্টম CSS ব্যবহার করা হয়েছে, যা আপনার ডিজাইনকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে।
Read more
