Icon এবং Css before After এর ব্যবহার
Post No:23
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Icon এবং Css before After এর ব্যবহার সম্পর্কে জানবো।
আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
এক নজরে দেখে নেই, আজ আমরা কি কি শিখবো :
Icon use in css
Before after use in css
Before after hover effect
1. Icon use in css:
আইকন কি ?
আইকন বলতে আমরা সহজেই বুঝি, আইকন এক ধরনের চিহ্ন বা লোগো চিহ্ন বা ইমেজ যা অর্থ প্রকাশ করে |
আইকন কয়ভাবে ব্যবহার করা যায় ?
আমরা আইকন দুইভাবে ব্যবহার করতে পারি | নিচে তা দেয়া হলো:
Html এর মাধ্যমে
Css এর মাধ্যমে
আমরা এখন সিএসএস(css) এর মাধ্যমে কিভাবে আইকন ব্যবহার করতে পারি তা জানব -
আইকন কি নিজে তৈরি করব ?
উত্তর: না |
তাহলে কি আইকন তৈরি করা আছে ?
উত্তর: হ্যাঁ
কোথা থেকে আইকন ব্যবহার করব তা নিচে দেওয়া হল -
এছাড়াও আরো অনেক আইকনের ওয়েবসাইট আছে |
2. Before after use in css:
এখন আমরা before after এর মাধ্যমে font-awesome Brands আইকন ব্যবহার শিখব -
প্রথম ধাপ : html ফাইল এ font-awesome লিঙ্ক করাব
<div class="Labib">
<ul>
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
<li>list-4</li>
<li>list-5</li>
</ul>
</div>
এখানে ক্লাস নাম আপনাকে Labib দিতে হবে না আপনি চাইলে অন্য কোন নাম দিতে পারেন |আবার ul li tag যে নিতে হবে তা কিন্তু না, আপনি চাইলেও অন্য যেকোন ট্যাগ একাধিকবার বা একবার নিতে পারেন |
দ্বিতীয় ধাপঃ
.Labib li::before {
content: "\f39e";
font-family: "Font Awesome 5 Brands";
margin-right: 12px;
color: red;
}
Html ফাইল এ আপনি যে ক্লাস নাম দিয়েছেন সেটি সিলেক্ট করবেন যেমন আমি sorobindu নাম দিয়েছিলাম তাই এখানে sorobindu ul li নাম সিলেক্ট করেছি| তারপর আপনাকে before বা after নিতে হবে | before বা after নিলে অবশ্যই content property লিখতে হবে, একটু উপরে দেখেন আমি কিভাবে content property লিখেছি (content: "\f39e") .
content: "\f39e" এর ব্যবহার-
আপনারা বলতে পারেন content এর মধ্যে যে কোড আছে সেটি কোথায় পাবো ?
এই কোড আমরা https://fontawesome.com/ ওয়েব সাইট থেকে পাব | তারপর আপনার যে আইকন প্রয়োজন সেটা লিখে সার্চ দিবেন এবং ওই আইকনের উপর ক্লিক করবেন তাহলে একটা পপ-আপ পাবেন আর ওই পপ-আপ থেকেই আপনার কোড পেয়ে যাবেন | যেমন ফেসবুক লিখে সার্চ দিলে আপনি ফেসবুকের আইকন পেয়ে যাবেন
তারপর আপনার যেটা পছন্দ তার ওপর ক্লিক করবেন তাহলে পপ-আপ টি পেয়ে যাবেন | আমার দুই নাম্বার আইকন পছন্দ তাই আমি দুই নাম্বার আইকন এর ওপর ক্লিক করলাম …আর পপ-আপ টি চলে আসলো
font-family: "Font Awesome 5 Brands" এর ব্যবহার-
এবার আপনাকে font-family property লিখতে হবে এবং font-family এর নাম আপনাকে লিখতে হবে | যেমন: font-family: "Font Awesome 5 Brands"
Font Awesome 5 Brands এই নামটা কোথায় পাবেন ???
চিন্তা করবেন না আপনাকে আমরা সব রিসোর্স দিয়ে দেব ….
https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements এই লিংকটি ভিজিট করলে আপনি font-family পেয়ে যাবেন
margin-right: 12px; এর ব্যবহার-
এই property(margin-right) এবং value(12px) লেখাতে আইকন এর ডানপাশে সামান্য একটু জায়গা বৃদ্ধি পেয়েছে | আপনি চাইলে এই value কমাতে বাড়াতে পারবেন |
color: red; এর ব্যবহার-
এই property(color) এবং value(red) লেখাতে আইকন এর রং লাল হয়েছে | আপনি চাইলে অন্য যেকোন রং দিতে পারেন |
আবার, আমরা before after এর মাধ্যমে font-awesome Free আইকন ব্যবহার শিখব -
উপরে যেমন font-awesome Brands আইকন ব্যবহার দেখলাম, ঠিক একইভাবে আমরা font-awesome Free আইকন এর ব্যবহার করব | শুধুমাত্র font-family: "Font Awesome 5 Brands" এর পরিবর্তে font-family: "Font Awesome 5 Free" লিখতে হবে|
প্রথম ধাপ : html ফাইল এ font-awesome লিঙ্ক করাব
<div class="Labib">
<ul>
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
<li>list-4</li>
<li>list-5</li>
</ul>
</div>
দ্বিতীয় ধাপঃ css ফাইল এ
.Labib ul li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
Font-weight: 900;
margin-right: 12px; color: red;
}
3. Before after hover effect:
বন্ধুরা এখন আমরা শিখবো কিভাবে before after দিয়ে হবার ইফেক্ট তৈরি করা যায় -
প্রথম ধাপ : html ফাইল এ
<div class="Labib">
<a href="#">click me</a>
</div>
দ্বিতীয় ধাপঃ css ফাইল এ
.Labib{
text-align: center;
margin: 60px 0;
}
text-align: center; এর ব্যবহার-
এই property(text-align) and value (center) ব্যবহার করলে আপনার ডেক্সটপ স্কিনের লেফট থেকে রাইট থেকে মাঝে বাটনটা চলে আসবে |
margin: 60px 0; এর ব্যবহার-
এই property(margin) and value (60px 0) ব্যবহার করলে বাটন এর উপরে 60px জায়গা বৃদ্ধি পাবে এবং নিচে 60px জায়গা বৃদ্ধি পাবে আর ডানে বামে কোন জায়গা বৃদ্ধি পাবে না |
.Labib a {
text-decoration: none;
font-size: 24px;
text-transform: capitalize;
background: rgb(242, 172, 172);
color: #000;
padding: 16px 80px;
display: inline-block;
position: relative;
z-index: 1;
transition: 1s;
}
text-decoration: none; এর ব্যবহার-
anchor(a) ট্যাগ ব্যবহার করলে নিচে একটা দাগ আসে সেই দাগ তুলে ফেলার জন্য এই property (text-decoration) এবং value (none) ব্যবহার করতে হয় |
font-size: 24px; এর ব্যবহার-
ইহা ব্যাবহার করে আমরা লেখাকে ছোট-বড় করতে পারি |
text-transform: capitalize; এর ব্যবহার-
ইহা ব্যাবহার করে আমরা প্রতিটা শব্দের প্রথম অক্ষর বড় করতে পারি |
color: #000; এর ব্যবহার-
এই property(color) এবং value(#000) ব্যাবহার করে লেখাগুলোর রং কালো করতে পারি | আপনি চাইলে অন্য যেকোন রং দিতে পারেন |
background: rgb(242, 172, 172); এর ব্যবহার-
ইহা ব্যাবহার করে আমরা ব্যাকগ্রাউন্ড এর রং দিতে পারি | এই রঙ আপনার পছন্দমত দিতে পারেন কোনো নির্দিষ্ট করা নাই যেমন : background: red, background: #dddddd;
padding: 16px 80px; এর ব্যবহার-
ইহা ব্যাবহার করে উপরে-নিচে 16px জায়গা বৃদ্ধি করা হয়েছে এবং ডানে-বামে 80px জায়গা বৃদ্ধি করা হয়েছে |
display: inline-block; এর ব্যবহার-
anchor(a) tag কে প্যাডিং দিলে তা ঠিক মত কাজ করে না এ কারণে display: inline-block দিতে হয় আর display: inline-block দিলে প্যাডিং ঠিকভাবে কাজ করে |
position: relative; এর ব্যবহার-
Before after ব্যবহার করলে অবশ্যই position: relative দিতে হবে | যাকে before after এবং তাকে position: relative দিতে হবে
z-index: 1; এর ব্যবহার-
Z-index : 1 দিয়ে আমরা লেখাকে উপরে নিয়ে আসতে পারি |
transition: 1s; এর ব্যবহার-
বাটন এর উপর মাউস নিলে hover effect যেন খুব সুন্দরভাবে ধীরে ধীরে আসে এর জন্য ইহা ব্যাবহার করা হয় |
.Labib a:hover{
color: aliceblue;
}
বাটন এর ওপর মাউস নিলে যেন লেখাগুলোর কালার পরিবর্তন হয় তাই hover pseudo element ব্যবহার করা হয় |
.Labib a::before {
content: "";
background: rgba(114, 4, 42, 0.852);
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: 1s;
}
বাটন এর ওপর মাউস নিলে যেন লেখাগুলোর ব্যাকগ্রাউন্ড কালার পরিবর্তন হয় তাই before pseudo element ব্যবহার করা হয় |
content: ""; এর ব্যবহার-
Content property ব্যবহার না করলে before কাজ করেনা তাই before দিয়ে কাজ করতে চাইলে অবশ্যই content property ব্যবহার করতে হবে |
z-index: -1; এর ব্যবহার-
position: absolute ব্যবহার করাতে ব্যাকগ্রাউন্ড কালার দিয়ে লেখা ঢেকে যায় তাই z-index: -1 ব্যবহার করে ব্যাকগ্রাউন্ড কে লেখার নিচে নিয়ে আসা যায় |
Left:0 ; এর ব্যবহার-
ব্যাকগ্রাউন্ড কালার যেন বাম পাশ থেকে আসে সে কারণে ইহা ব্যাবহার করা হয়|
এছাড়াও width, height, position: absolute, left:0, top:0 অবশ্যই আপনাকে লিখতে হবে তাছাড়া সঠিকভাবে ব্যাকগ্রাউন্ড পাবে না |
.Labib a:hover::before{
width: 50%;
}
বাটনকে হবার করলে যেন ব্যাকগ্রাউন্ড কালার অর্ধেক পায় তাই width: 50% দেয়া হয়েছে |
.Labib a::after {
content: "";
background: rgba(192, 14, 76, 0.852);
width: 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -1;
transition: 1s;
}
.sorobindu a:hover::after{
width: 50%;
}
এখানে শুধু ব্যাকগ্রাউন্ড কালার আলাদা দেয়া হয়েছে এবং right:0 দেওয়া হয়েছে যাতে background-color ডান পাশ থেকে আসে |
এভাবে before after ব্যবহার করে আমরা খুব সুন্দর হবার ইফেক্ট বানাতে পারি |
