Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা সহজ এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। যদিও Pure.CSS নিজে কোনো আইকন প্যাকেজ অন্তর্ভুক্ত করে না, তবে আপনি সহজেই FontAwesome বা অন্যান্য আইকন লাইব্রেরি ইন্টিগ্রেট করতে পারেন। এখানে Pure.CSS এবং FontAwesome ব্যবহার করে Icons যোগ করার পদ্ধতি এবং কাস্টমাইজেশন নিয়ে আলোচনা করা হলো।
1. FontAwesome Integration with Pure.CSS
FontAwesome একটি জনপ্রিয় আইকন লাইব্রেরি যা বিভিন্ন ধরনের আইকন প্রদান করে। আপনি সহজেই FontAwesome যুক্ত করতে পারেন আপনার Pure.CSS প্রকল্পে। নিচে FontAwesome যুক্ত করার এবং Pure.CSS এর সাথে একত্রে আইকন ব্যবহার করার উদাহরণ দেওয়া হলো।
FontAwesome Integration Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<!-- Link to FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Custom Styling for Icons */
.icon-btn {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
display: inline-flex;
align-items: center;
transition: background-color 0.3s;
cursor: pointer;
}
.icon-btn:hover {
background-color: #45a049;
}
.icon-btn i {
margin-right: 8px; /* Spacing between icon and text */
}
</style>
</head>
<body>
<button class="icon-btn">
<i class="fas fa-home"></i> Home
</button>
<button class="icon-btn">
<i class="fas fa-envelope"></i> Contact
</button>
<button class="icon-btn">
<i class="fas fa-cogs"></i> Settings
</button>
</body>
</html>
ব্যাখ্যা:
- FontAwesome CDN: FontAwesome এর আইকনগুলি ব্যবহারের জন্য CDN থেকে CSS ফাইলটি লিঙ্ক করা হয়েছে। এটি FontAwesome এর সমস্ত আইকন স্টাইল এবং ক্লাসগুলিকে লোড করে।
<i>ট্যাগ: FontAwesome আইকনগুলি সাধারণতiট্যাগে রাখা হয়, এবং সঠিক আইকনের ক্লাসের নাম (যেমনfas fa-home) ব্যবহার করা হয়।icon-btnক্লাস: Pure.CSS এর বাটন ক্লাস এবং FontAwesome আইকনের জন্য কাস্টম স্টাইল ব্যবহার করা হয়েছে।inline-flexদিয়ে আইকন এবং টেক্সটকে এক লাইনে আনা হয়েছে, এবংmargin-rightদিয়ে আইকন এবং টেক্সটের মধ্যে স্পেস দেয়া হয়েছে।- Hover Effect:
:hoverপসুডো ক্লাস ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে যখন ব্যবহারকারী বাটনে হোভার করে।
2. Customizing FontAwesome Icons with Pure.CSS
FontAwesome আইকনগুলিকে কাস্টমাইজ করার জন্য Pure.CSS এর সাহায্যে আপনি তাদের সাইজ, রঙ, স্টাইল এবং এফেক্ট পরিবর্তন করতে পারেন।
Customizing Icons Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customize FontAwesome Icons</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<!-- Link to FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Custom Styles for Icon Sizes and Colors */
.icon {
font-size: 40px; /* Custom icon size */
color: #4CAF50; /* Icon color */
transition: transform 0.3s;
}
/* Hover Effect */
.icon:hover {
transform: scale(1.2); /* Icon size grows on hover */
}
/* Icon Button */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f4f4f4;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
}
.icon-btn:hover {
background-color: #ddd;
}
.icon-btn i {
margin-right: 8px;
}
</style>
</head>
<body>
<!-- FontAwesome Icons with Customization -->
<button class="icon-btn">
<i class="fas fa-home icon"></i> Home
</button>
<button class="icon-btn">
<i class="fas fa-envelope icon"></i> Contact
</button>
<button class="icon-btn">
<i class="fas fa-cogs icon"></i> Settings
</button>
</body>
</html>
ব্যাখ্যা:
- Icon Size Customization:
font-size: 40px;ব্যবহার করে আইকনের সাইজ কাস্টমাইজ করা হয়েছে। - Icon Color:
color: #4CAF50;ব্যবহার করে আইকনের রঙ নির্ধারণ করা হয়েছে। - Hover Effect:
:hoverপসুডো ক্লাস ব্যবহার করে আইকনের সাইজ বৃদ্ধি করা হয়েছে যখন ব্যবহারকারী মাউস আইকনের উপর রাখে (এফেক্টটিscale(1.2)ব্যবহার করে তৈরি করা হয়েছে)। - Icon Button Styling: Icon Buttons এর জন্য
icon-btnক্লাস ব্যবহার করা হয়েছে, যা বাটনের মধ্যে আইকন এবং টেক্সট সুন্দরভাবে সজ্জিত করে এবং হোভার ইফেক্ট যোগ করা হয়েছে।
3. Adding Icons to Navbar with FontAwesome and Pure.CSS
FontAwesome আইকনগুলো Navbar বা Menu তে যোগ করা যেতে পারে যাতে তা আরও ইন্টারেক্টিভ এবং সুন্দর দেখায়।
Example of Navbar with FontAwesome Icons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar with FontAwesome Icons</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<!-- Link to FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Navbar Styling */
.navbar {
background-color: #333;
padding: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
font-size: 18px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #4CAF50;
}
.navbar i {
margin-right: 8px; /* Spacing between icon and text */
}
</style>
</head>
<body>
<!-- Navbar with FontAwesome Icons -->
<div class="navbar">
<a href="#"><i class="fas fa-home"></i> Home</a>
<a href="#"><i class="fas fa-info-circle"></i> About</a>
<a href="#"><i class="fas fa-cogs"></i> Services</a>
<a href="#"><i class="fas fa-phone-alt"></i> Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
- Navbar Layout: নেভিগেশন বারটি Flexbox সিস্টেম ব্যবহার করে সজ্জিত করা হয়েছে, যাতে লিঙ্কগুলোর মধ্যে সমান জায়গা থাকে এবং তারা সোজা (horizontal) অবস্থানে থাকে।
- FontAwesome Icons: প্রতিটি লিঙ্কে FontAwesome আইকন যুক্ত করা হয়েছে। যেমন
fa-home,fa-info-circle,fa-cogs,fa-phone-altআইকনগুলো। - Hover Effect:
:hoverপসুডো ক্লাস ব্যবহার করে নেভিগেশন বার আইটেমগুলির ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
FontAwesome এবং Pure.CSS একত্রে ব্যবহার করে আপনি অত্যন্ত সুন্দর এবং ইন্টারেক্টিভ Icons তৈরি করতে পারেন। FontAwesome আপনাকে বিভিন্ন ধরনের আইকন সরবরাহ করে যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসে আরও আকর্ষণ এবং কার্যকারিতা যোগ করে। Pure.CSS এর সাথে FontAwesome ইন্টিগ্রেট করে আপনি responsive এবং user-friendly ওয়েব ডিজাইন তৈরি করতে পারবেন।
Pure.CSS ফ্রেমওয়ার্ক নিজে কোনো ইন-বিল্ট আইকন প্যাক সরবরাহ করে না, তবে আপনি সহজেই অন্যান্য আইকন লাইব্রেরি যেমন FontAwesome ইন্টিগ্রেট করে আপনার ওয়েব পেজে আইকন ব্যবহার করতে পারেন। FontAwesome একটি জনপ্রিয় আইকন প্যাক যা হাজার হাজার আইকন প্রদান করে এবং এটি সহজেই Pure.CSS এর সাথে কাজ করে।
1. Pure.CSS এর সাথে FontAwesome ইন্টিগ্রেশন
FontAwesome একটি বহুল ব্যবহৃত আইকন লাইব্রেরি যা ওয়েব ডিজাইনে আইকন ব্যবহারকে সহজ করে তোলে। এটি টেক্সটের মতো আইকন ব্যবহারের সুবিধা প্রদান করে এবং সেগুলিকে CSS এর মাধ্যমে কাস্টমাইজ করা যায়।
FontAwesome CDN ইনস্টল করা:
প্রথমে FontAwesome সিএনডি (CDN) যুক্ত করুন, যাতে আপনি সরাসরি তাদের আইকন ব্যবহার করতে পারেন।
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
এটি আপনার head ট্যাগের মধ্যে যুক্ত করতে হবে।
2. Pure.CSS এর সাথে Icons ব্যবহার করা
এখন আপনি FontAwesome আইকনগুলি আপনার HTML ডকুমেন্টে ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেয়া হলো, যেখানে Pure.CSS এবং FontAwesome এর সাহায্যে আইকন এবং বাটন তৈরি করা হয়েছে।
Icons Example with Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Button with Icons */
.icon-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.icon-btn i {
margin-right: 8px; /* Space between icon and text */
}
.icon-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<button class="icon-btn">
<i class="fas fa-play"></i> Play
</button>
<button class="icon-btn">
<i class="fas fa-pause"></i> Pause
</button>
<button class="icon-btn">
<i class="fas fa-stop"></i> Stop
</button>
</body>
</html>
ব্যাখ্যা:
- FontAwesome Icons: এখানে FontAwesome এর
fas fa-play,fas fa-pause, এবংfas fa-stopআইকনগুলি ব্যবহার করা হয়েছে। এগুলি FontAwesome আইকন ক্লাস যা বিভিন্ন আইকন প্রদর্শন করবে (প্লে, পজ, স্টপ)। iট্যাগ: FontAwesome আইকনগুলোকেiট্যাগের মধ্যে রাখা হয়েছে।iট্যাগের সাথে FontAwesome ক্লাস ব্যবহার করা হলে, আইকনটি স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়।- Button Styling: Pure.CSS এর
pure-buttonক্লাস ব্যবহার করা হয়নি, তবে স্বয়ংক্রিয়ভাবে CSS দিয়ে আইকনের বাটন তৈরি করা হয়েছে।background-color,border-radius, এবংcursor: pointerএর মাধ্যমে বাটনের স্টাইলিং করা হয়েছে। - Spacing:
margin-right: 8px;ব্যবহার করে আইকন এবং টেক্সটের মধ্যে কিছু স্পেস রাখা হয়েছে।
3. FontAwesome এর সাথে Responsive Icons
Pure.CSS এবং FontAwesome এর সাহায্যে আপনি সহজেই রেসপনসিভ আইকন তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে একটি রেসপনসিভ ইন্টারফেসে আইকন ব্যবহার করা হয়েছে।
Responsive Icons Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Container for Responsive Icons */
.icon-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
/* Icon Styling */
.icon-container i {
font-size: 3rem;
color: #4CAF50;
cursor: pointer;
transition: color 0.3s ease;
}
.icon-container i:hover {
color: #45a049;
}
/* For Small Screens */
@media screen and (max-width: 600px) {
.icon-container i {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="icon-container">
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>
</div>
</body>
</html>
ব্যাখ্যা:
- Flexbox for Icon Container:
display: flex;এবংjustify-content: center;ব্যবহার করে আইকনগুলোকে কেন্দ্রে সজ্জিত করা হয়েছে।gap: 20px;ব্যবহৃত হয়েছে আইকনগুলোর মধ্যে কিছু স্পেস যোগ করতে। - Icon Styling: আইকনের আকার
font-size: 3rem;দিয়ে সেট করা হয়েছে, এবং hover effect যোগ করা হয়েছে যাতে মাউস হোভার করলে আইকনের রং পরিবর্তিত হয়। - Responsive Design:
@media screen and (max-width: 600px)কুয়েরি ব্যবহার করে মোবাইল স্ক্রীনে আইকনের আকার ছোট করা হয়েছে।
4. FontAwesome Icons for Social Media Links
FontAwesome আইকনগুলো Social Media Links এর জন্য ব্যবহার করা হয়, যেমন Facebook, Twitter, LinkedIn ইত্যাদি। নিচে একটি উদাহরণ দেওয়া হলো যেখানে FontAwesome আইকনগুলি সোশ্যাল মিডিয়া বাটন হিসেবে ব্যবহৃত হয়েছে।
Social Media Icons Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Social Media Icon Buttons */
.social-icons a {
color: white;
background-color: #333;
padding: 15px;
margin: 5px;
border-radius: 50%;
font-size: 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
.social-icons a:hover {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="social-icons">
<a href="#" class="pure-button"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="pure-button"><i class="fab fa-twitter"></i></a>
<a href="#" class="pure-button"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>
ব্যাখ্যা:
- FontAwesome Social Media Icons: FontAwesome এর
fab fa-facebook-f,fab fa-twitter, এবংfab fa-linkedin-inআইকনগুলি ব্যবহার করা হয়েছে। - Button Styling:
border-radius: 50%;ব্যবহার করে আইকনগুলোকে গোলাকার বাটনে পরিণত করা হয়েছে।background-colorএবংhovereffect দিয়ে বাটনের রঙ পরিবর্তন করা হয়েছে।
Pure.CSS এর সাথে FontAwesome আইকন ব্যবহারের মাধ্যমে আপনি সহজেই ওয়েব পেজে সুন্দর এবং ইন্টারেক্টিভ আইকন যুক্ত করতে পারেন। FontAwesome এর বিশাল আইকন প্যাক ব্যবহার করে আপনি সোশ্যাল মিডিয়া আইকন, বাটন আইকন, নেভিগেশন আইকন, এবং অন্যান্য গ্রাফিক্যাল উপাদান যোগ করতে পারবেন। Pure.CSS এর সহজ স্টাইলিং সমর্থন দিয়ে আইকনগুলোকে সুন্দরভাবে কাস্টমাইজ করা সম্ভব।
FontAwesome এবং Pure.CSS এর ইন্টিগ্রেশন ওয়েব ডেভেলপমেন্টে খুবই কার্যকরী হতে পারে, বিশেষ করে যখন আপনি ওয়েব পেজে আইকন ব্যবহার করতে চান এবং সেই সাথে Pure.CSS এর হালকা ও কার্যকরী স্টাইলিং ব্যবহারের মাধ্যমে আপনার ওয়েব পেজের ডিজাইন আরও উন্নত করতে চান।
এখানে FontAwesome এবং Pure.CSS কে একত্রিত করার মাধ্যমে কিভাবে সিম্পল ও কার্যকরী ডিজাইন তৈরি করা যায় তার একটি উদাহরণ দেওয়া হলো।
১. FontAwesome এবং Pure.CSS এর Integration Example:
এই উদাহরণে, আমরা Pure.CSS এর স্টাইলিং এবং FontAwesome আইকন ব্যবহার করে একটি সুন্দর ও রেসপন্সিভ নেভিগেশন মেনু তৈরি করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome and Pure.CSS Integration</title>
<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">
<style>
body {
font-family: Arial, sans-serif;
}
.pure-menu {
margin: 20px;
padding: 10px;
background-color: #333;
border-radius: 5px;
}
.pure-menu-item {
display: inline-block;
margin-right: 20px;
padding: 10px;
}
.pure-menu-item a {
color: white;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
}
.pure-menu-item a:hover {
color: #0078d4;
}
.pure-menu-item a i {
margin-right: 8px;
}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<div class="pure-menu-item">
<a href="#"><i class="fas fa-home"></i>Home</a>
</div>
<div class="pure-menu-item">
<a href="#"><i class="fas fa-info-circle"></i>About</a>
</div>
<div class="pure-menu-item">
<a href="#"><i class="fas fa-cogs"></i>Services</a>
</div>
<div class="pure-menu-item">
<a href="#"><i class="fas fa-phone-alt"></i>Contact</a>
</div>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Pure.CSS এর
.pure-menuএবং.pure-menu-itemক্লাস ব্যবহার করা হয়েছে নেভিগেশন মেনু তৈরি করতে। - FontAwesome আইকনগুলি
<i>ট্যাগের মাধ্যমে যোগ করা হয়েছে, যেমনfa-home,fa-info-circle,fa-cogs, এবংfa-phone-alt। - FontAwesome এর আইকনগুলো Pure.CSS মেনু আইটেমের সাথে ফ্লেক্স ডিসপ্লে ব্যবহার করে সেন্টার করা হয়েছে, এবং আইকনের সাথে কিছু মার্জিন যোগ করা হয়েছে যাতে আইকন এবং টেক্সটের মধ্যে যথাযথ স্পেস থাকে।
২. FontAwesome Icons with Buttons and Pure.CSS:
এখানে FontAwesome আইকন সহ Pure.CSS বাটন তৈরি করা হচ্ছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome Icons with Pure.CSS Buttons</title>
<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">
<style>
.button-container {
margin: 50px;
}
.pure-button {
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
display: flex;
align-items: center;
}
.pure-button i {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="button-container">
<button class="pure-button pure-button-primary">
<i class="fas fa-download"></i> Download
</button>
<button class="pure-button pure-button-secondary">
<i class="fas fa-upload"></i> Upload
</button>
<button class="pure-button pure-button-danger">
<i class="fas fa-trash-alt"></i> Delete
</button>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- এখানে FontAwesome আইকনগুলি বিভিন্ন ধরনের বাটনের সাথে ব্যবহার করা হয়েছে।
- Pure.CSS এর pure-button-primary, pure-button-secondary, এবং pure-button-danger ক্লাস ব্যবহার করে ভিন্ন ভিন্ন বাটনের ডিজাইন করা হয়েছে।
- আইকন এবং বাটন টেক্সটের মধ্যে স্পেস দেওয়ার জন্য margin-right যোগ করা হয়েছে।
৩. FontAwesome with Pure.CSS Forms:
এখানে Pure.CSS ফর্ম এবং FontAwesome আইকন ইন্টিগ্রেট করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FontAwesome with Pure.CSS Form</title>
<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">
<style>
.pure-form .pure-input-1-2 {
width: 100%;
padding: 10px;
font-size: 16px;
}
.form-icon {
position: absolute;
left: 10px;
top: 10px;
color: #aaa;
}
.input-container {
position: relative;
}
.input-container input {
padding-left: 30px;
}
</style>
</head>
<body>
<div class="pure-form pure-form-stacked">
<div class="input-container">
<i class="form-icon fas fa-user"></i>
<input type="text" class="pure-input-1-2" placeholder="Username">
</div>
<div class="input-container">
<i class="form-icon fas fa-lock"></i>
<input type="password" class="pure-input-1-2" placeholder="Password">
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- FontAwesome আইকনকে input ফিল্ডের ভিতরে position: absolute ব্যবহার করে স্থাপন করা হয়েছে। এখানে
fa-userএবংfa-lockআইকন ব্যবহার করা হয়েছে। - Pure.CSS এর pure-form-stacked এবং pure-input-1-2 ক্লাসগুলি ব্যবহার করে ফর্মের উপাদানগুলো সুন্দরভাবে স্টাইল করা হয়েছে।
- input-container ডিভে আইকন এবং ইনপুট ফিল্ডকে একত্রিত করা হয়েছে, এবং আইকনের প্যাডিং সমন্বয় করা হয়েছে যাতে ইনপুট ফিল্ডের মধ্যে আইকন এবং টেক্সট একসাথে থাকে।
FontAwesome এবং Pure.CSS এর ইন্টিগ্রেশন আপনার ওয়েব ডিজাইনে আইকন ও স্টাইলিং যোগ করার মাধ্যমে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি FontAwesome এর আইকনগুলি Pure.CSS এর বিভিন্ন স্টাইল ক্লাসের সাথে একত্রিত করে সহজেই সুন্দর এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।
Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপমেন্টের জন্য প্রয়োজনীয় বিভিন্ন স্টাইল প্রদান করে, তবে এটি সরাসরি আইকন স্টাইলিং সম্পর্কিত কোনো প্রি-বিল্ট ক্লাস সরবরাহ করে না। কিন্তু, আপনি CSS এবং Font Awesome বা অন্যান্য আইকন লাইব্রেরি ব্যবহার করে Custom Icon Styling করতে পারেন।
এখানে Custom Icon Styling করার কিছু উদাহরণ দেওয়া হলো, যা Pure.CSS ফ্রেমওয়ার্কের সঙ্গে ব্যবহার করা যেতে পারে।
১. Font Awesome Icons ব্যবহার করে Custom Icon Styling:
Font Awesome একটি জনপ্রিয় আইকন লাইব্রেরি যা সহজেই ওয়েবসাইটে ব্যবহার করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Font Awesome Icons ব্যবহার করা হয়েছে এবং CSS দিয়ে কাস্টম স্টাইলিং করা হয়েছে।
a) Font Awesome Icons ব্যবহার করা:
প্রথমত, আপনাকে Font Awesome এর সিএসএস ফাইলটি আপনার পৃষ্ঠাতে যুক্ত করতে হবে।
<!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/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Custom Icon Styling</title>
<style>
.icon-style {
font-size: 40px;
color: #0078d4;
transition: transform 0.3s ease, color 0.3s ease;
}
.icon-style:hover {
transform: scale(1.2);
color: #005fa3;
}
</style>
</head>
<body>
<div>
<i class="fas fa-heart icon-style"></i> <!-- Heart Icon -->
<i class="fas fa-home icon-style"></i> <!-- Home Icon -->
<i class="fas fa-user icon-style"></i> <!-- User Icon -->
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Font Awesome Icons: এখানে আমরা Font Awesome থেকে তিনটি আইকন (হৃদয়, হোম, ব্যবহারকারী) ব্যবহার করেছি।
- .icon-style ক্লাস: CSS এর মাধ্যমে আইকনগুলির স্টাইল নির্ধারণ করা হয়েছে, যেমন:
- font-size: আইকনের আকার বাড়ানো হয়েছে।
- color: আইকনের প্রাথমিক রঙ নির্ধারণ করা হয়েছে।
- transition: আইকনের স্টাইল পরিবর্তন করার সময় মসৃণ অ্যানিমেশন যুক্ত করা হয়েছে (যেমন হোভার করার সময় স্কেল বৃদ্ধি এবং রঙ পরিবর্তন)।
২. Custom Icon Styling with SVG:
এছাড়া আপনি SVG Icons (Scalable Vector Graphics) ব্যবহার করেও কাস্টম স্টাইলিং করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যেখানে SVG আইকন ব্যবহার করা হয়েছে এবং CSS দিয়ে তার স্টাইলিং করা হয়েছে।
b) SVG Icon Custom Styling:
<!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">
<title>Custom SVG Icon Styling</title>
<style>
.svg-icon {
width: 50px;
height: 50px;
fill: #0078d4;
transition: transform 0.3s ease, fill 0.3s ease;
}
.svg-icon:hover {
transform: scale(1.2);
fill: #005fa3;
}
</style>
</head>
<body>
<div>
<!-- Heart Icon (SVG) -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<!-- Star Icon (SVG) -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 17.27l-5.18 3.09 1.64-6.91-5.46-4.73 6.92-.59L12 2l2.08 6.54 6.92.59-5.46 4.73 1.64 6.91L12 17.27z"/>
</svg>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- SVG Icons: এই উদাহরণে দুটি SVG আইকন ব্যবহার করা হয়েছে (হৃদয় এবং তারকা)। এই আইকনগুলিকে fill প্রপার্টি দিয়ে রঙ দেওয়া হয়েছে।
- .svg-icon ক্লাস: CSS এর মাধ্যমে এই আইকনগুলির আকার এবং রঙ কাস্টমাইজ করা হয়েছে। এছাড়া transition প্রপার্টি দিয়ে আইকনের scale এবং fill পরিবর্তন করার সময় মসৃণ অ্যানিমেশন প্রয়োগ করা হয়েছে।
৩. Icon Button Styling:
আইকন ব্যবহার করে একটি বাটন তৈরি করতে চান? নিচে একটি উদাহরণ দেওয়া হলো যেখানে আইকন এবং বাটন একসঙ্গে ব্যবহার করা হয়েছে:
<!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/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Icon Button Styling</title>
<style>
.icon-button {
background-color: #0078d4;
color: white;
padding: 10px 20px;
font-size: 20px;
border: none;
border-radius: 5px;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.icon-button i {
margin-right: 8px; /* Space between icon and text */
}
.icon-button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<button class="icon-button pure-button">
<i class="fas fa-thumbs-up"></i> Like
</button>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- .icon-button: এই ক্লাসের মাধ্যমে বাটনের জন্য ব্যাকগ্রাউন্ড কালার, প্যাডিং, বর্ডার রেডিয়াস, এবং স্টাইল নির্ধারণ করা হয়েছে।
- i tag: এখানে আইকনটি Font Awesome থেকে নেওয়া হয়েছে এবং এটি বাটনের টেক্সটের আগে রাখা হয়েছে।
- :hover: হোভার করার সময় বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে।
Pure.CSS এর সঙ্গে Font Awesome বা SVG Icons ব্যবহার করে আপনি Custom Icon Styling করতে পারেন। CSS এর মাধ্যমে আপনি আইকনের আকার, রঙ, হোভার ইফেক্ট, বাটন স্টাইলিং ইত্যাদি কাস্টমাইজ করতে পারবেন। এইভাবে আপনি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করতে পারবেন।
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
