Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক যা সহজ এবং কার্যকরী স্টাইলিং উপাদান প্রদান করে। Custom Color Schemes এবং Typography ওয়েব ডিজাইনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে, এবং Pure.CSS এর সাথে আপনি সহজেই এগুলি কাস্টমাইজ করতে পারেন। এই সেটিংসের মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও আকর্ষণীয়, ব্র্যান্ড-সুসঙ্গত এবং ব্যবহারকারী-বান্ধব তৈরি করতে পারবেন।
এখানে Custom Color Schemes এবং Typography কাস্টমাইজ করার কিছু উদাহরণ দেওয়া হলো।
১. Custom Color Schemes in Pure.CSS:
Pure.CSS এর মাধ্যমে আপনি সহজেই কাস্টম কালার স্কিম তৈরি করতে পারেন। এর জন্য আপনাকে CSS ব্যবহার করে ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, বর্ডার কালার ইত্যাদি কাস্টমাইজ করতে হবে। নিচে একটি কাস্টম কালার স্কিমের উদাহরণ দেওয়া হলো:
<!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 Color Scheme with Pure.CSS</title>
<style>
/* Custom Colors */
:root {
--primary-color: #3498db; /* Blue */
--secondary-color: #2ecc71; /* Green */
--background-color: #f4f4f4; /* Light Gray */
--text-color: #333; /* Dark Gray */
--button-color: #e74c3c; /* Red */
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.header {
background-color: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
.button {
background-color: var(--button-color);
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #c0392b; /* Darker Red */
}
.content {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="header">
<h1>Custom Color Scheme</h1>
<p>Example of Pure.CSS with Custom Colors</p>
</div>
<div class="content">
<p>This is a content area with custom color scheme applied. You can change the color palette by adjusting the variables defined above.</p>
<button class="button">Click Me</button>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- CSS Variables: এখানে
:rootসিলেক্টর ব্যবহার করে কাস্টম কালার স্কিম তৈরি করা হয়েছে। আপনি এই ভ্যারিয়েবলগুলো (--primary-color,--secondary-color,--background-color, ইত্যাদি) ব্যবহার করে ওয়েবসাইটের বিভিন্ন অংশের রং কাস্টমাইজ করতে পারেন। - Body and Header Styling:
background-color,color, এবং অন্যান্য প্রপার্টি ব্যবহার করে পুরো ওয়েব পেজের রং কাস্টমাইজ করা হয়েছে। - Button Hover Effect: বাটনের রঙ হোভার করার সময় পরিবর্তিত হয়, যা আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করে তোলে।
২. Typography Customization in Pure.CSS:
Typography ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ, এবং Pure.CSS এর সাথে আপনি সহজে আপনার ফন্ট এবং টাইপোগ্রাফি কাস্টমাইজ করতে পারেন। আপনি ফন্ট-ফ্যামিলি, সাইজ, লাইন-হাইট, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারবেন।
a) Customizing Font and Typography:
<!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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<title>Typography Customization</title>
<style>
/* Custom Typography */
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* Bold weight */
color: #3498db; /* Custom Blue */
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
}
.content {
margin-top: 30px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="content">
<h1>Custom Typography</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is an example of custom typography. The font family, size, line height, and margins are all customized for this page.</p>
<p>Notice how each element has distinct styling to create a clean and readable layout.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Font Family: এখানে Google Fonts থেকে Roboto ফন্ট ফ্যামিলি ব্যবহার করা হয়েছে। আপনি অন্য কোনো ফন্টও ব্যবহার করতে পারেন যা আপনার ডিজাইনের সাথে মানানসই হয়।
- Typography Styles:
font-size,line-height,font-weightইত্যাদি কাস্টমাইজ করে শিরোনাম এবং প্যারাগ্রাফের টাইপোগ্রাফি উন্নত করা হয়েছে। - Heading Styles:
h1,h2,h3এর জন্য কাস্টম সাইজ এবং কালার সেট করা হয়েছে যাতে তারা আরও স্পষ্ট এবং পরিষ্কারভাবে দৃশ্যমান হয়।
৩. Responsive Typography with Pure.CSS:
এখন আমরা Pure.CSS এর মাধ্যমে টাইপোগ্রাফি রেসপন্সিভ করতে পারি, যাতে ওয়েব পেজটি বিভিন্ন স্ক্রীন সাইজে আরও ভালো দেখায়। নিচে একটি উদাহরণ দেওয়া হলো:
<!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>Responsive Typography</title>
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
font-size: 2.5rem;
color: #3498db;
}
h2 {
font-size: 2rem;
color: #3498db;
}
p {
font-size: 1rem;
line-height: 1.6;
color: #333;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem; /* Smaller font on smaller screens */
}
h2 {
font-size: 1.5rem; /* Smaller font on smaller screens */
}
p {
font-size: 0.9rem; /* Adjust paragraph size */
}
}
</style>
</head>
<body>
<h1>Responsive Typography</h1>
<h2>Heading 2</h2>
<p>This is an example of responsive typography using Pure.CSS. The font sizes are adjusted based on the screen size, making the layout look great on both large and small devices.</p>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- Responsive Font Sizes:
@mediaকুয়েরি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজে হেডিং এবং প্যারাগ্রাফের ফন্ট সাইজ কাস্টমাইজ করা হয়েছে। - Mobile-Friendly Design: ছোট স্ক্রীনের জন্য ফন্ট সাইজ কমিয়ে দেওয়া হয়েছে, যা ডিজাইনকে আরও মোবাইল-ফ্রেন্ডলি এবং ব্যবহারকারী-বান্ধব করে তোলে।
Pure.CSS ব্যবহার করে আপনি সহজেই Custom Color Schemes এবং Typography কাস্টমাইজ করতে পারেন। CSS ভ্যারিয়েবলস, Google Fonts, এবং Pure.CSS এর সাহায্যে আপনি আপনার ওয়েব পেজের ডিজাইনকে একেবারে আপনার ব্র্যান্ডের রঙ এবং টাইপোগ্রাফির সাথে মানিয়ে নিতে পারেন। এছাড়া, responsive typography সেটিংস ব্যবহার করে বিভিন্ন ডিভাইসে ওয়েব পেজটি সুন্দরভাবে প্রদর্শিত হয়।
Read more
