Pure.CSS দিয়ে একটি Custom Theme তৈরি করা খুবই সহজ এবং এটি আপনাকে একটি খুব লাইটওয়েট, কাস্টমাইজেবল, এবং দ্রুত লোডিং ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Pure.CSS নিজেই একটি মিনিমালিস্টিক CSS ফ্রেমওয়ার্ক, তাই এটি বিভিন্ন থিম এবং স্টাইলিং কাস্টমাইজ করার জন্য খুবই উপযুক্ত। এখানে, আমরা একটি Custom Theme তৈরি করার জন্য কিছু কাস্টম স্টাইলিং এবং কাস্টম CSS প্রপার্টি ব্যবহার করব।
1. Pure.CSS এর জন্য Custom Theme তৈরি করা:
প্রথমে, আমরা একটি basic HTML structure তৈরি করব এবং তারপর Pure.CSS এর ক্লাসগুলি কাস্টমাইজ করব, যেমন নেভিগেশন বার, বাটন, ফর্ম, এবং অন্যান্য উপাদান।
Custom Theme Example for Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Theme with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Theme Styling */
/* Background and Overall Layout */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
/* Navbar Styles */
.navbar {
background-color: #2C3E50;
padding: 10px 20px;
text-align: center;
}
.navbar a {
color: #ecf0f1;
text-decoration: none;
padding: 10px 20px;
font-size: 18px;
transition: background-color 0.3s ease;
}
.navbar a:hover {
background-color: #34495e;
color: white;
}
/* Custom Button Styles */
.pure-button-custom {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease;
}
.pure-button-custom:hover {
background-color: #2980b9;
}
/* Form Styles */
.form-container {
max-width: 500px;
margin: 30px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.form-container input,
.form-container button {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
}
.form-container button {
background-color: #2C3E50;
color: white;
cursor: pointer;
}
.form-container button:hover {
background-color: #34495e;
}
/* Footer Styles */
footer {
background-color: #2C3E50;
color: white;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<!-- Main Content -->
<div class="form-container">
<h2>Sign Up</h2>
<form class="pure-form pure-form-stacked">
<input type="text" placeholder="Enter your name" required>
<input type="email" placeholder="Enter your email" required>
<button type="submit" class="pure-button pure-button-custom">Submit</button>
</form>
</div>
<!-- Footer -->
<footer>
<p>© 2024 My Custom Theme</p>
</footer>
</body>
</html>
ব্যাখ্যা:
- Navbar Styling:
.navbar: একটি কাস্টম নেভিগেশন বার তৈরি করা হয়েছে, যার ব্যাকগ্রাউন্ড কালার#2C3E50এবং টেক্সট কালার#ecf0f1করা হয়েছে। হোভার ইফেক্টেbackground-colorপরিবর্তন করা হয়েছে।
- Button Customization:
.pure-button-custom: Pure.CSS এর ডিফল্ট বাটনের ক্লাসকে কাস্টমাইজ করে বাটনটির ব্যাকগ্রাউন্ড কালার#3498dbএবং হোভার ইফেক্টের জন্য#2980b9ব্যবহার করা হয়েছে।
- Form Customization:
.form-container: একটি সেন্টারড ফর্ম তৈরি করা হয়েছে যেখানেmax-width: 500pxব্যবহার করে ফর্মের প্রস্থ সীমিত করা হয়েছে। ফর্মের উপাদানগুলি যথাযথ মার্জিন, প্যাডিং এবং রেডিয়াস সহ সাজানো হয়েছে।.form-container input, .form-container button: ইনপুট এবং বাটনের মধ্যে সমান প্যাডিং এবং সীমানা দেওয়া হয়েছে।
- Footer Styling:
footer: ফুঁটারের জন্য একটি কাস্টম ডিজাইন দেওয়া হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালার#2C3E50এবং টেক্সট কালারwhite।
2. Adding Colors, Fonts, and Spacing for a Custom Theme
Colors এবং Fonts ব্যবহার করে আপনার কাস্টম থিমের ডিজাইন আরও আকর্ষণীয় এবং ইউনিক করা যেতে পারে। Pure.CSS-এ font-family এবং color schemes কাস্টমাইজ করা খুবই সহজ।
Example of Custom Colors and Fonts:
<style>
/* Global Font Family and Colors */
body {
font-family: 'Arial', sans-serif;
background-color: #ecf0f1; /* Light background */
color: #333; /* Dark text */
}
/* Custom Button with Gradient Background */
.pure-button-custom {
background: linear-gradient(45deg, #ff6b6b, #f7b731);
color: white;
border: none;
padding: 12px 24px;
border-radius: 5px;
font-size: 16px;
transition: background 0.3s;
}
.pure-button-custom:hover {
background: linear-gradient(45deg, #f7b731, #ff6b6b);
}
/* Custom Navbar */
.navbar {
background-color: #34495e; /* Dark blue-gray */
padding: 20px;
font-family: 'Roboto', sans-serif;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
font-size: 18px;
transition: background-color 0.3s ease;
}
.navbar a:hover {
background-color: #7f8c8d;
}
</style>
ব্যাখ্যা:
- Colors: আপনি সহজেই background-color, color, এবং gradient ব্যবহার করে আপনার থিমে বৈচিত্র্য এনে দিতে পারেন। এখানে
linear-gradientব্যবহার করে একটি সুন্দর গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি করা হয়েছে বাটনের জন্য। - Fonts:
font-familyপ্রপার্টি ব্যবহার করে ওয়েব ফন্ট কাস্টমাইজ করা হয়েছে। উদাহরণস্বরূপ, Roboto ফন্ট ব্যবহৃত হয়েছে নেভিগেশন বারের জন্য এবং Arial ফন্ট সারা পেজে ব্যবহার করা হয়েছে। - Spacing: বিভিন্ন উপাদানে padding এবং margin দিয়ে স্পেসিং নিয়ন্ত্রণ করা হয়েছে।
3. Advanced Customization Techniques
Customizing Hover Effects:
Hover ইফেক্ট ব্যবহার করে আপনি বাটন এবং লিঙ্কগুলোকে আরো ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন।
/* Custom Hover Effect */
.pure-button-custom:hover {
transform: scale(1.1); /* Slight zoom on hover */
background-color: #2ecc71; /* Green background on hover */
}
Responsive Layout Customization:
মোবাইল-ফার্স্ট ডিজাইন এবং media queries ব্যবহার করে রেসপনসিভ থিম তৈরি করা যায়।
/* Mobile Responsive Design */
@media (max-width: 600px) {
.navbar {
text-align: center;
}
.form-container {
padding: 15px;
}
}
Pure.CSS এর মাধ্যমে Custom Themes তৈরি করা খুবই সহজ এবং নমনীয়। আপনি font-family, color schemes, spacing, buttons, hover effects, এবং responsive layout কাস্টমাইজ করে আপনার ওয়েবসাইটের জন্য একটি বিশেষ থিম তৈরি করতে পারেন। Pure.CSS এর লাইটওয়েট ফ্রেমওয়ার্ক এবং মডুলার ডিজাইন আপনার থিমের কাস্টমাইজেশনকে দ্রুত এবং সহজ করে তোলে।
Read more
