Search code, repositories, users, issues, pull requests...

Fixed

The element is positioned relative to the browser window. এবং element টি একেবারে Fixed থাকে, আমার Document এ হাজার হাজার লাইন Text ও থাকে, তাহলেও fixed element তার Position কোনমতেও Change করবে না। একেবারে ঘারত্যারা যাকে বলে ! :D Fixed Propertyও Absolute এর মত কোন একটা Parent Element এর Child হিসেবে থাকে।

Example of Fixed Property

Relative

The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's left position. অর্থাৎ Relative Element স্বাধীন। তাকে কোন Parent Element এর Under এ থাকতে হবে বিষয় টা সেরকম নয়। যখনি কোন Element এর Property Relative করা হবে, তখন ওই Element এ Left, Right, Top, Down Properties গুলো কাজ করবে।

Example of Relative Property

Sticky

যদি element এ top: 100px; দেয়া হয়, তাহলে এই element যে Position এ Normally থাকার কথা সেই Position এই থাকবে, কিন্তু User যখন Scroll করে ওই Position এর নিচে চলে যাবে, তখন এই Sticky element ও সাথে সাথে নিচে চলে যাবে। আর যখন নিচে যাবে তখন top থেকে 100px নিচে থাকবে। Fixed আর Sticky কখনই এক নয়। Fixed হলে element টি তার Normal Position এ না থেকে তার Parent Element থেকে Left, Right, Top, Bottom Count করবে।

অপরপক্ষে, Sticky Element এ যদি bottom: 100px; দেয়া হয় তাহলে Element টি যে Position এ Normally থাকার কথা সেই Position এই থাকবে, কিন্তু User যখন Scroll করে ওই Position এর উপরে চলে যাবে, তখন এই Sticky Element ও সাথে সাথে উপরে চলে যাবে।

Example of Sticky Property

CSS Z-index Property

How Z-index Works

z-index Property একটি Element এর স্ট্যাক অর্ডার নির্দিষ্ট করে। একটি Element এর Positive বা Negative স্ট্যাক অর্ডার থাকতে পারে।
z-index শুধুমাত্র Positioned Elements (position: absolute, position: relative, position: fixed, or position: sticky) এবং flex-items (যে Elements গুলো Directly display:flex element এর Children) এ কাজ করে।
An element with greater stack order is always above an element with a lower stack order. অর্থাৎ যে Element এর Z-index যত বেশি সে Element Stack এর তত উপরে থাকবে।

Example of Z-index Property

CSS Overflow

How CSS Overflow Property Works

The CSS overflow property controls what happens to content that is too big to fit into an area.
The overflow property has the following values:
- visible - Default. The overflow is not clipped. The content renders outside the element's box.
- hidden - The overflow is clipped, and the rest of the content will be invisible.
- scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content.
- auto - Similar to scroll, but it adds scrollbars only when necessary.
Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it).

Example of CSS Overflow Property

↥ Go to Top

Chapter-12: CSS Float, Display, Alignment

CSS Float
CSS Display
- Concept of Inline Elements
- Inline, Block and Inline-block Examples
CSS Alignment of Elements, Texts and Images

CSS Float Property

CSS float property কোন একটা Element কে তাঁর Container এর ডানে বা বামে নিয়ে যায়। এবং Text বা অন্যান্য Elements যাতে ঐ Floated Element কে Wrap করতে পারে বা জড়িয়ে ধরে থাকতে পারে সেই Permission দেয়।

Note: CSS Float Property is now deprecated in modern web-programming concept.

Float Value

left - The element floats to the left of its container.
right - The element floats to the right of its container.
none - This is default. The element does not float (will be displayed just where it occurs in the text).
inherit - The element inherits the float value of its parent.

CSS Float Property কেন ব্যবহার করা হয়?

সাধারণত একটা Image এর চারপাশে Text কে Wrap করার জন্য।
কোন Inline Element কে Text বা অন্য কোন Element দিয়ে Wrap করার জন্য।
Horizontally কোন Element এর Position Left থেকে Right বা Right থেকে Left করার জন্য।
Horizontally অনেকগুলো Elements কে একটার পর একটা সাঁজাতে।

কি ঘটে যখন কোন Element এ Float Property থাকে?

Normal Document Flow থেকে উঠে যায় এবং এই Element তার Parent এ কোন Height দেয় না। অর্থাৎ আমরা জানি, Parent এর Height হলো Childs এর Height এর যোগফল। কিন্তু Floated Element এর Height Parent এ যোগ হয় না।
Element টি যদি একটি Block Element হয় এবং Width দেয়া না হয় তাহলে আমরা জানি সেটি by default width 100% নেয়। কিন্তু ঐ Element এ যদি Float Property থাকে, তাহলে by default কোন Width থাকে না। সুতরাং কোন Block Element এ Float use করলে অবশ্যই ঐ Element এ width property দেয়া বাধ্যতামূলক।
Element টি যদি Block-ও হয়, তবুও Inline এর মতই আচরণ করে।

Float এবং Position Absolute এর Document Flow তুলনা

কোন Element এ যখন Float বা Position Absolute Property ব্যবহার করা হয়, তখন উভয় ক্ষেত্রেই ঐ Element টি Webpage এর Normal Document Flow থেকে উঠে যায়। তবে Float এবং Position Absolute এর ক্ষেত্রে Element টির Document Flow থেকে উঠে যাওয়ার সামান্য পার্থক্য আছে। কোন Element এ যখন Float ব্যবহার করা হয়, তখন সে Normal Document Flow থেকে 100% উঠে যায় না। এটা আমরা বুঝতে পারি যখন ঠিক তাঁর পরে কোন text থাকে এবং ঐ text তাঁকে Wrap করে বা জড়িয়ে ধরে থাকে কিন্তু Overlap করে না। অপরদিকে কোন Element এ Position Absolute ব্যবহার করলে ঐ Element টি সম্পূর্ণরূপে Normal Document Flow থেকে উঠে যায় এবং তাঁর পরে কোন Element থাকলে সেটা তার নিচে চলে আসে অর্থাৎ Overlap করে।

Floated Element Example:

Absolute Positioned Element:

Example of CSS Float Property (Screenshot)

Another Example:

Example of CSS Float Property (Source Codes)

Another Example of CSS Float Property

Float যেসব প্রবলেম তৈরি করে

কোন একটা Element কে যখন Float property দেয়া হয়, তখন ঐ Element টি তার নিচের সব Elements গুলোকে Affect করে। ধরি, X একটি Element. আমরা যদি চাই ঐ Floated Element টি X element এবং X element এর নিচে যত Element আছে তার উপর কোন প্রভাব ফেলতে পারবে না, তাহলে X Element এ Clear property ব্যবহার করতে হবে। Float এর এই প্রবলেম এর সমাধান হলো Clear Property.

Clear Property

কোন একটা Floated Element এর পাশের Element টির কি হবে সেটা নির্ধারণ করে Clear Property.

The clear property can have one of the following values:

This is default. none - The element is not pushed below left or right floated elements.
left - The element is pushed below left floated elements. অর্থাৎ ধরি A element একটি Floated Element, যার Property float: left দেয়া। ঠিক তার নিচে আছে B element, যার property clear: left দেয়া। তাহলে এই B element টি A element এর নিচে pushed হবে। B element এ যদি clear: left না দেয়া হতো, তাহলে B element টি A element এর কারনে Unexpected bahavior করতো।
right - The element is pushed below right floated elements.
both - The element is pushed below both left and right floated elements. This is safe to use when you are in a confusion between left and 'right'.
inherit - The element inherits the clear value from its parent.

Clearfix Hack

Clearfix Hack কেন ব্যবহার করবো?

একটা Floated Element যদি তার Container এর চেয়ে বড় হয়, তাহলে এটি Overflow করবে। এই প্রবলেম সমাধান করার জন্য।
একটি Element Floated থাকার কারনে তার নিচের Element এ যেন প্রভাব ফেলতে না পারে।

Clearfix কিভাবে তৈরি করা হয়

Floated Element এর Container/Parent Element এর ::after Pseudo Element তৈরি করতে হয়। এই Pseudo Element এ নিচের Code টি বসালে এটি Clearfix হিসেবে কাজ করবে।

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Note: অনেক ক্ষেত্রে আমাদের display: block-ও ব্যবহার করা লাগতে পারে, এটা Requirement এর উপর নির্ভর করবে।

Example of Clearfix

CSS Display Property

Concepts of Inline Element

Inline Elements এ Width এবং Height কাজ করে না। এমনকি margin padding এগুলোও মাঝে মাঝে কাজ করে না। যদি Inline Elements এ Width বা Height এর প্রয়োজন হয় বা Margin Padding দেয়ার দরকার হয়, তাহলে এই Inline Elements কে আমরা চাইলে Inline-block Elements তৈরি করতে পারি। display: inline-block এই property দিলে element টি inline-block element হয়ে যাবে এবং তখন width, height, margin, padding এগুলো কাজ করবে।

Inline, Block and Inline-block Examples

CSS Alignment of Elements, Texts and Images

How to Horizontally Center A Block Element

There are several ways: Way-01: Using Margin Auto

div {
  margin: 0 auto;
}

Way-02: Using Flexbox

.parent-div {
  display: flex;
  justify-content: center;
}
.target-div {
}

Way-03: Using Positioning and Transform

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Way-04: Using Inline-block Concept

.parent-div {
  text-align: center;
}
.target-div {
  display: inline-block;
}

How to Horizontally & Vertically Center A Block Element

There are several ways:

Way-01: Using Flexbox

.parent-div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.target-div {
}

Way-02: Using CSS Grid

.parent-div {
  display: grid;
  place-items: center;
}
.target-div {
}

Way-03: Using Positioning and Transform

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

How to Center Texts Inside An Element

To center the text inside an element, use text-align: center;

How to Center an Image

To center an image, first make it a block element and then use margin: 0 auto

CSS Alignment Examples

⚝ How to Center A Block Element Horizontally Way-01

⚝ How to Center A Block Element Horizontally Way-02

⚝ How to Center A Block Element Horizontally Way-03

⚝ How to Center A Block Element Horizontally Way-04

⚝ How to Center A Block Element Horizontally & Vertically Way-01

⚝ How to Center A Block Element Horizontally & Vertically Way-02

⚝ How to Center A Block Element Horizontally & Vertically Way-03

↥ Go to Top

Chapter-13: CSS Flexbox

CSS Flexbox
The CSS Flexbox Container Properties Summary
A Basic Website Layout Using CSS Flexbox
কিছু গুরুত্বপূর্ণ Flex Items Property

CSS Flexbox

Flexible Box থেকে Flexbox নামকরন।

What is Flexbox?

Flexbox is a CSS box model to easily layout, align and distribute space among items within a container either horizontally or vertically.

অর্থাৎ ফ্লেক্সবক্স হলো একটা CSS Box Model যে Horizontally বা Vertically কতোগুলো ITEMS গুলোকে Layout দেয়, Align করে এবং তাদের মধ্যে Space Distribute করে।

CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage.
Inline, for text.
Table, for two-dimensional table data.
Positioned, for explicit position of an element.

Note: The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container. অর্থাৎ Flexbox Model নিয়ে কাজ করতে হলে আমাদের প্রথম যে কাজটি করতে হবে তা হলো একটি Flex Container তৈরি করা।
একটা Flex Model এর অবশ্যই একটা Flex Container থাকবে অর্থাৎ Flex Items গুলো একটা Parent Element ( যাকে Flex Containerও বলে) থাকবে। এবং ওই Flex Container/Parent Element এর display property এর Value flex থাকবে।
Flex Container এর যারা Direct Child তারা Automatically Flex items হয়ে যাবে।

নিচে একটি Flex Container তৈরি করে দেখানো হলোঃ

এখানে Flex Container হলো Blue Area Element. এবং তিনটি Flex Items হলো 1, 2 এবং 3.

Example: Open in CodePen

Tips

Using rem is good practice than using px.
Using float is deprecated in modern programming. Use flexbox instead.

Flex Direction

flex-direction এর Value, by default থাকে row. flex-direction এর কয়েকটি উদাহরণ নিচে দেওয়া হলোঃ

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-wrap has the following values:

flex-wrap: wrap;
flex-wrap: no-wrap;
flex-wrap: wrap-reverse;

Note: The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. Example: flex-flow: row wrap;

Flex Direction Example

Justify Content Property in Flex

The justify-content: center; flex items গুলোকে Container এর Horizontally Center এ নিয়ে যায়।
The justify-content: flex-start; flex items গুলোকে Container এর শুরুতে নিয়ে যায় (this is default).
The justify-content: flex-end; flex items গুলোকে Container এর শেষে নিয়ে যায় ।
The justify-content: space-around; flex items গুলোর শুরু ও শেষে সমান Space নিয়ে তাদের Horizontally মাঝখানে রাখে ।
The justify-content: space-between; flex items গুলোর শুধু মাঝে সমান Space নিয়ে তাদের Horizontally মাঝখানে রাখে ।

JUSTIFY CONTENT Property in Flex Example

ALIGN ITEMS Property in Flex

The align-items property is used to align the flex items.

align-items: center; flex items গুলোকে Vertically Center এ নিয়ে যায়।
align-items: flex-start; flex items গুলোকে Vertically Top এ নিয়ে যায়।
align-items: flex-end; flex items গুলোকে Vertically Bottom এ নিয়ে যায়।
align-items: stretch; stretches the flex items to fill the container (this is default).
align-items: baseline; aligns the flex items such as their baselines aligns.

ALIGN ITEMS Property in Flex Example

The CSS Flexbox Container Properties Summary

Property	Description
align-content	এটা `align-items` এর মতোই কাজ করে, পার্থক্য হলো `align-items` দিলে Space কে প্রতিটা items এর উপরে নিচে ছড়িয়ে items গুলোকে Vertically Align করে, আর অন্যদিকে `align-content` শুধুমাত্র প্রথম ও শেষ item এর উপরে ও নিচে space দেয়, বাকি items কে space না দিয়েই vertically align করে। align-content vs align-items Example
align-items	Vertically Items গুলোকে Align করে।
display	Element টি কি Type এর সেটা নির্দেশ করে।
flex-direction	এই প্রপার্টি Flex Container এর মধ্যে দিতে হয়। Flex Container এর মধ্যে যে Items গুলো আছে তাদের direction এই প্রপার্টি দ্বারা নির্দেশ করা হয়।
flex-flow	এটি `flex-direction` এবং `flex-wrap` এর একটি shorthand property.
flex-wrap	Flex Items গুলো wrap করবে কি করবে না, সেটা এই প্রপার্টি দ্বারা ঠিক করে দেয়া হয়।
justify-content	`align-items` হলো Vertically items গুলোকে align করে, অন্যদিকে `justify-content` হলো Horizontally items গুলোকে align করে।

Align Content vs Align Items Example

Flexbox At A Glance

কিছু গুরুত্বপূর্ণ Flex Items Property

1. order

order প্রপার্টি একটি Flex Item Property, অর্থাৎ এটি শুধু Flex Items গুলোর ক্ষেত্রে ব্যবহার করা যাবে, Flex Container এ না।
oder Property দিয়ে আমরা Markup Change না করেই, Flex items এর order পরিবর্তন করতে পারি।

2. flex-grow

flex-grow প্রপার্টি একটি Flex Item Property, অর্থাৎ এটি শুধু Flex Items গুলোর ক্ষেত্রে ব্যবহার করা যাবে, Flex Container এ না।
flex-grow: 1 দিলে যতগুলো Items আছে তারা সবাই মিলে Vertically or Horizontally সবটুকু যায়গা নিয়ে Resposive এর মতো behave করবে। অর্থাৎ Browser এর যায়গা টেনে ছোট করলে তারাও ধীরে ধীরে ছোট হবে, Browser এর যায়গা টেনে বড় করলে তারাও ধীরে ধীরে বড় হবে। এক্ষেত্রে, আমরা যদি Items গুলোর Fixed Width করে দেই, তাও তারা Window Size অনুযায়ী Grow করবে ।

3. flex-shrink

flex-shrink flex-grow এর মতোই কাজ করে, শুধু উল্টা ভাবে। এক্ষেত্রে বলে রাখা ভালো যে, যখনই flex-grow: 1 করা হবে তখন flex-shrink এর Valueও 1 হয়ে যাবে Responsive করার জন্য।

4. flex-basis

খুবই গুরুত্বপূর্ণ একটা প্রপার্টি । এইটা দিয়ে আমরা Flex Items এর Width set করতে পারি । এটা অনেকটা min-width এর মতো কাজ করে, কিন্তু min-width এর সাথে এর পার্থক্য হলো, যদি কোন Item এর flex-basis: 200px দেয়া থাকে, তাহলে যদি তার জন্য পর্যাপ্ত যায়গা না থাকে, তাহলে সে ধীরে ধীরে Window Size অনুযায়ী কমতে থাকবে, যেটা min-width এর ক্ষেত্রে কখনই হবে না। তাই Responsive এর জন্য flex-basis খুবই গুরুত্বপূর্ণ একটি Property.

5. flex

flex property হলো flex-grow, flex-shrink এবং flex-basis এর shorthand property. যেমন, flex: 1 1 200px;

Useful Resources to Learn Flexbox More

↥ Go to Top

Chapter-14: CSS Selectors

CSS Selectors

CSS Selectors

What is CSS Selectors?

A CSS selector selects the HTML element(s) you want to style.

Types of CSS Selectors

CSS Selectors কে ৫ ভাগে ভাগ করা যায়ঃ

Simple selectors (select elements based on name, id, class).
Combinator selectors (select elements based on a specific relationship between them).
Pseudo-class selectors (select elements based on a certain state).
Pseudo-elements selectors (select and style a part of an element).
Attribute selectors (select elements based on an attribute or attribute value).

01. Simple Selectors

CONTENTS WILL BE WRITTEN SOON INSHALLAH...

02: Combinator Selectors

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. অর্থাৎ, একটা Selector একের অধিক Simple Selectors নিয়ে তৈরি হতে পারে। এই Simple Selectors দের আমরা চাইলে Combinator দিয়ে Connect করতে পারি।

There are four different combinators in CSS:

Descendant selector (space)
Child selector (>)
Adjacent sibling selector (+)
General sibling selector (~)

Descendant Selector (Space)

Descendant Selector হলো কোন একটা Element এর Under এ যত Child Elements আছে তাদের Select করে। সেই Child এর যদি Child থাকে তাদেরকেও Select করে। যেমন,

div p {
  background-color: yellow;
}

এখানে div element এর মধ্যে যত p element আছে সব select হবে।

Child selector (>)

Child Selector শুধুমাত্র তাদের Immediate Child কে Select করে। Child এর Child কে Select করে না, যেটা Descendant Select করে।

div p {
  background-color: yellow;
}

এখানে div element এর Immediate Child Select হবে, অর্থাৎ p select হবে। এখন যদি এই p এর মধ্যেও আরও p থাকে, সেগুলো select হবে না।

Adjacent Sibling Selector (+)

এই Select টার নামই তার পরিচয়। অর্থাৎ Adjacent Sibling Selector তার প্রথম Sibling কে Select করবে। অর্থাৎ তার পাশে তার অনেক ভাইবোন থাকতে পারে, তাই সে শুধু তার সবচেয়ে কাছে সে ভাই বা বোন লেগে আছে, তাকে Select করবে। যেমন,

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

div + p {
  background-color: yellow;
}

এখানে <p>Paragraph 3. After a div.</p> এবং <p>Paragraph 7. After a div.</p> এই দুটো Selector Select হবে।

General Sibling Selector (~)

General sibling selector (~) তার নিচে থাকা সব ভাইবোনকেই Select করবে। যেমন,

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

div + p {
  background-color: yellow;
}

এখানে <p>Paragraph 3. After a div.</p> , <p>Paragraph 4. After a div.</p> , <p>Paragraph 7. After a div.</p> , <p>Paragraph 8. After a div.</p> এই সবকটি ভাইবোন Select হবে।

03. Pseudo-class Selectors

Pseudo-class Selector বিভিন্ন State বা অবস্থায় ব্যবহার করা হয়। যেমন, এই Selector সাধারণত নিচের ক্ষেত্রে ব্যবহার করা হয়ঃ ১। যখন কোন একটা Element এর উপর মাউস হোভার করা হয়, ২। যখন কোন একটা Link Visit কিংবা Univisted করা হয়, ৩। যখন একটা Element কে Focus করা হয়।

Syntax

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes

Example:

/* unvisited link */
a:link {
  color: #ff0000;
}

/* visited link */
a:visited {
  color: #00ff00;
}

/* mouse over link */
a:hover {
  color: #ff00ff;
}

/* selected link */
a:active {
  color: #0000ff;
}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes: When you hover over the link in the example, it will change color:

a.highlight:hover {
  color: #ff0000;
}

Hover on `<div>`

আমরা যদি একটা Div Element এর উপর Hover করি, তাহলে ঐ Div Element এর কি হবে, সেটা আমরা চাইলে বলে দিতে পারি। যেমন,

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}

Simple Tooltip Hover

Hover over a

element to show a

element (like a tooltip): Example:

<div class="simple-class-hover">
  Hover me this DIV element to show the P element.
  <p class="tool-tip">Tada! I'm here!</p>
</div>

.tool-tip {
  display: none;
  background-color: coral;
}

.simple-class-hover:hover p {
  display: block;
}

Implementation Codes of the Above Topics

CSS - The ':first-child' Pseudo-class

যদি p:first-child এভাবে দেয়া হয়, এর মানে দাঁড়াবে p যেসব Element এর প্রথম Child Element হিসেবে আছে ঐগুলা Select হবে। যেমন,

<div>
  <p>This is Paragraph 1</p>
  <p>This is Paragraph 2</p>
  <p>This is Paragraph 3</p>
</div>
<div>
  <p>This is Paragraph 4</p>
  <p>This is Paragraph 5</p>
  <p>This is Paragraph 6</p>
</div>

p:first-child {
  background-color: bisque;
}

এখানে Paragraph 1 এবং Paragraph 4 Select হবে।

Open Example in CodePen

Match The First `<i>` Element in All `<p>` Elements

আমরা যদি i:first-child এভাবে দেই, তাহলে ঐসব i element select হবে যেগুলো যেকোনো element এর প্রথম child element. কিন্তু যদি p i:first-child এভাবে দেই, তাহলে শুধুমাত্র যেসব p element এর প্রথম child i element আছে, ঐগুলো select হবে।

Example:

<p>This is <i>1st</i> i element. This is <i>2nd</i> i element.</p>
<p>This is <i>3rd</i> i element. This is <i>4th</i> i element.</p>
<div>This is <i>5th</i> i element. This is <i>6th</i> i element.</div>

p i:first-child {
  background-color: red;
}

এখানে লক্ষ্য করুন, Div Element এর মধ্যে যে প্রথম i element আছে, সেটা কিন্তু Select হয় নাই।

Example Source Code: Open in CodePen

Match all `<i>` elements in all first child `<p>` elements

p:first-child i এর অর্থ হলো, কোন একটা P element যদি অন্য কোন element এর first child হয়, তাহলে ঐ p element এর মধ্যে যত i element আছে সব i elements কেই ধরবে ।

Example:

<body>
  <h1>Match all i elements in all first child p elements</h1>
  <div>
    <p>This is <i>1st</i> paragraph. <i>This is another i element</i></p>
    <p>This is <i>2nd</i> paragraph <i>This is another i element</i></p>
  </div>
  <article>
    <p>This is <i>3rd</i> paragraph <i>This is another i element</i></p>
    <p>This is <i>4th</i> paragraph <i>This is another i element</i></p>
  </article>
  <article>
    <p>
      <i>1</i>
      <i>2</i>
      <i>3</i>
    </p>
    <p>
      <i>4</i>
      <i>5</i>
      <i>6</i>
    </p>
  </article>
</body>

p:first-child i {
  color: red;
}

Screenshot:

Example Codes:

Open Example Project in CodePend

All CSS Pseudo Classes

Selector No.	Selector Name	Example	Example Description
01	:root	root	Selects the document's root element
02	:link	a:link	Selects all unvisited links
03	:visited	a:visited	Selects all visited links
04	:hover	a:hover	Selects links on mouse over
05	:active	a:active	Selects the active link.
06	:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
07	:checked	input:checked	Selects every checked `<input>` element
08	:enabled	input:enabled	Selects every enabled `<input>` element
09	:disabled	input:disabled	Selects every disabled `<input>` element
10	:focus	input:focus	Selects the `<input>` element that has focus
11	:in-range	input:in-range	Selects `<input>` elements with a value within a specified range
12	:out-of-range	input:out-of-range	Selects `<input>` elements with a value outside a specified range
13	:valid	input:valid	Selects all `<input>` elements with a valid value
14	:invalid	input:invalid	Selects all `<input>` elements with an invalid value
15	:optional	input:optional	Selects `<input>` elements with no "required" attribute
16	:required	input:required	Selects `<input>` elements with a "required" attribute specified
17	:read-only	input:read-only	Selects `<input>` elements with a "readonly" attribute specified
18	:read-write	input:read-write	Selects `<input>` elements with no "readonly" attribute
19	:empty	p:empty	Selects every `<p>` element that has no children
20	:first-child	p:first-child	Selects every `<p>` elements that is the first child of its parent
21	:last-child	p:last-child	Selects every `<p>` elements that is the last child of its parent
22	:first-of-type	p:first-of-type	Selects every `<p>` element that is the first `<p>` element of its parent
23	:last-of-type	p:last-of-type	Selects every `<p>` element that is the last `<p>` element of its parent
24	:lang(language)	p:lang(it)	Selects every `<p>` element with a lang attribute value starting with "it"
25	:not(selector)	:not(p)	Selects every element that is not a `<p>` element
26	:nth-child(n)	p:nth-child(2)	Selects every `<p>` element that is the second child of its parent
27	:nth-last-child(n)	p:nth-last-child(2)	Selects every `<p>` element that is the second child of its parent, counting from the last child
28	:nth-of-type(n)	p:nth-of-type(2)	Selects every `<p>` element that is the second `<p>` element of its parent
29	:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every `<p>` element that is the second `<p>` element of its parent, counting from the last child
30	:only-of-type	p:only-of-type	Selects every `<p>` element that is the only `<p>` element of its parent
31	:only-child	p:only-child	Selects every `<p>` element that is the only child of its parent

`:target` Pseudo-class

:target এর অর্থ হলো, কোন একটা Anchor Element এর href Attribute এ যে Element এর Id এর নাম দেওয়া থাকবে সেই Element কে Select করবে।

Example:

<body>
  <h1>`:target` Pseudo-class</h1>
  <div>
    <a href="#article-01">Go To Article 01</a>
  </div>
  <div>
    <a href="#article-02">Go To Article 02</a>
  </div>
  <article>
    <h2 id="article-01">Article-01</h2>
    Codejogot is an programming platform. It helps the students learn with fun.
    Codejogot is an programming platform. It helps the students learn with fun.
  </article>
  <article>
    <h2 id="article-02">Article-02</h2>
    During my university life, I used to solve competitive programming problems
    in various online judges such as UVa, CodeForces, TopCoder, HackerRank,
    GeeksforGeeks etc. Till now, I've solved more than 1300 problems in these
    sites. Now-a-days, I spend most of the time in farming, travelling and
    developing my own projects and ideas.
  </article>
</body>

:target {
  border: 2px solid darkorange;
  background-color: bisque;
}

Screenshot

Pseudo-class `:checked`

যে input element এ checked attribute থাকবে ঐ element কে ধরবে। এবার element টি ধরার পর চাইলে এর width and height পরিবর্তন করা যাবে।

Example:

<body>
  <h1>Psedo-class `:checked`</h1>
  <form action="">
    <input type="radio" checked="checked" />
    <label for="">Male</label> <br />
    <input type="radio" />
    <label for="">Female</label> <br />
    <input type="checkbox" checked="checked" />
    <label for="">C++</label> <br />
    <input type="checkbox" />
    <label for="">Python</label>
  </form>
</body>

input:checked {
  height: 20px;
  width: 20px;
}

Screenshot:

Pseudo-class `:enabled` and `:disabled`

:enabled সেই Input Elements দের Select করবে যাদের property disabled নেই। একইভাবে :disabled সেই Input Elements দের Select করবে যাদের property disabled করা আছে।

Example:

<body>
  <h1>`:enabled` and `:disabled` Pseudo-class</h1>
  <form action="">
    <label for="">First Name</label>
    <input type="text" /> <br />
    <label for="">Last Name</label>
    <input type="text" /> <br />
    <label for="">Country</label>
    <input type="text" disabled value="Bangladesh" /> <br />
  </form>
</body>

input[type="text"]:enabled {
  background-color: darkgray;
}

input[type="text"]:disabled {
  background-color: red;
}

Screenshot:

`:focus` Pseudo-class

কোন একটা Input Element এ যখন Click করে Mouse এর Cursor রাখা হয়, তখন :focus Selector টি ঐ Input Element টিকে Select করে।

Example:

<form action="">
  <label for="">Name</label>
  <input type="text" /> <br />
  <label for="">Email</label>
  <input type="email" />
</form>

input:focus {
  background-color: aqua;
}

Screenshot:

`:in-range` and `:out-of-range` Pseudo-class

কোন একটা Input Field এর মধ্যে আমরা যে Value বসাই সেটা যদি Range এর মধ্যে থাকে তাহলে :in-range Selector কাজ করে, অন্যথায় :out-of-range কাজ করে।

Example:

<input type="number" min="5" max="10" value="7" />

input:in-range {
  background-color: green;
  color: white;
}

input:out-of-range {
  background-color: red;
  color: white;
}

Screenshot:

Valid and Invalid Pseud-class

কোন Input Element এ যদি আমরা Valid infortmation দেই তাহলে :valid pseudo-class কাজ করবে, অন্যথায় :invalid Pseudo-class কাজ করবে।

Example:

<label for="">Email</label> <input type="email" />

input:valid {
  border: 2px solid green;
}

input:invalid {
  border: 2px solid red;
}

Screenshot:

Optional and Required Pseudo-class

কোন একটা Input Element এ যদি required attribute না দেয়া থাকে, তাহলে তখন :optional Pseudo-class কাজ করবে ।

Example:

<form action="">
  <label for="">Name</label>
  <input type="text" required /> <br />
  <label for="">Country</label>
  <input type="text" />
</form>

input:optional {
  background-color: beige;
}

Screenshot:

Read-only and Read-write Pseudo-class

কোন একটা Input Element এ যদি readonly attribute দেয়া থাকে, তাহলে :read-only Pseudo-class কাজ করবে। অন্যথায়, read-write Pseudo-class কাজ করবে।

Example:

<form action="">
  <label for="">Name</label>
  <input type="text" /> <br />
  <label for="">Country</label>
  <input type="text" readonly value="Bangladesh" />
</form>

input:read-only {
  background-color: yellow;
}

input:read-write {
  background-color: aliceblue;
}

Screenshot:

Empty Pseudo-class

p:empty Pseudo-class ঐসব p Elements দের Select করে যাদের কোন Children নেই এবং কোন text-ও নেই।

Example:

<p>This is Paragraph 1</p>
<p></p>
<p>This is Paragraph 3</p>

p:empty {
  height: 2rem;
  background-color: red;
}

Screenshot:

Open in CodPen

First-child and Last-child Pseudo-class

যদি p:first-child দেয়া হয়, এর অর্থ হলো কোন p যদি কোন element এর first child হয়, তাহলে ঐ p কে select করবে। একইভাবে, যদি p:last-child দেয়া হয়, এর অর্থ হলো কোন p যদি কোন element এর last child হয়, তাহলে ঐ p কে select করবে।

Example:

<div>
  <p>This is Paragraph 1</p>
  <p>This is Paragraph 2</p>
  <p>This is Paragraph 3</p>
</div>
<article>
  <p>This is Paragraph 4</p>
  <p>This is Paragraph 5</p>
  <p>This is Paragraph 6</p>
</article>
<p>This is Paragraph 7</p>

p:first-child {
  background-color: greenyellow;
}
p:last-child {
  background-color: yellow;
}

Screenshot:

First-of-type and Last-of-type Pseudo-class

p:first-of-type এর অর্থ হলো কোন একটা Parent Element এর যদি অনেকগুলো child elements থাকে, তাহলে প্রথম যে p element পাবে সেটাকে select করবে। এর মানে এটা নয় যে, প্রথম child হতে হবে। একইভাবে, p:last-of-type এর অর্থ হলো কোন একটা Parent Element এর যদি অনেকগুলো child elements থাকে, তাহলে শেষ যে p element পাবে সেটাকে select করবে।

Example:

<body>
  <h1>First-of-type and Last-of-type Pseudo-class</h1>
  <p>this is paragraph 1</p>
  <p>this is paragraph 2</p>
  <h3>this is h3</h3>
  <div>
    <h4>this is h4</h4>
    <p>this is paragraph 4</p>
    <p>this is paragraph 5</p>
    <h3>this is another h3</h3>
  </div>
</body>

p:first-of-type {
  background-color: greenyellow;
}
p:last-of-type {
  background-color: burlywood;
}

Screenshot:

:not Pseudo-class

:not(p) এর মানে হলো, p elements বাদে বাকি সব elements কে select করবে।

Example:

<body>
  <h1>:not() Pseudo-class</h1>
  <p>this is paragraph 1</p>
  <p>this is paragraph 2</p>
  <div>this is a div element</div>
</body>

p {
  color: black;
}

:not(p) {
  color: darkorange;
}

Screenshot:

:nth-child() Pseudo-class

p:nth-child(2) এর অর্থ হলো কোন একটা Parent Element এর 2 নং Child Element যদি p হয়, তাহলে ঐ p কে select করবে।

Example:

<body>
  <h1>nth-child() Pseudo-class</h1>
  <div>
    <h4>this is h4</h4>
    <p>This is Paragraph 1</p>
    <p>This is Paragraph 2</p>
  </div>
  <div>
    <h4>this is another h4</h4>
    <p>This is Paragraph 5</p>
    <p>This is Paragraph 6</p>
  </div>
</body>

p:nth-child(2) {
  color: red;
}

Screenshot:

nth-last-child() Pseudo-class

এটি nth-child() এর মতোই, nth-child() এর সময় Count করতে হতো শুরু থেকে, আর nth-last-child() এর ক্ষেত্রে count করতে হবে শেষ থেকে।

Example:

<body>
  <h1>nth-last-child() Pseudo-class</h1>
  <div>
    <p>This is Paragraph 1</p>
    <p>This is Paragraph 2</p>
    <h4>this is h4</h4>
  </div>
  <div>
    <p>This is Paragraph 5</p>
    <p>This is Paragraph 6</p>
    <h4>this is another h4</h4>
  </div>
</body>

p:nth-last-child(2) {
  color: red;
}

Screenshot:

nth-of-type() Pseudo-class

p:nth-of-type(2) এর অর্থ হলো কোন Parent Element এর 2 নং p element কে select করবে।

আর যদি element এর নাম উল্লেখ করে না দেই, যেমন, :nth-of-type(2) এর অর্থ হলো যেকোনো Parent Element এর 2 নং Child Element কে select করবে।

Example:

<body>
  <h1>nth-of-type Pseudo-class</h1>
  <div>
    <p>This is some text.</p>
  </div>
  <div>
    <p>This is some text.</p>
  </div>
  <div>
    <p>This is some text.</p>
  </div>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Fourth list item</li>
    <li>Fifth list item</li>
  </ul>
</body>

div:nth-of-type(2) {
  color: red;
}
li:nth-of-type(2) {
  color: lightgreen;
}

:nth-of-type(3) {
  color: blue;
}

Screenshot:

nth-of-last-type()

এটি :nth-of-type এর মতোই, পার্থক্য শুধু শেষ থেকে count করতে হবে।

only-of-type Pseudo-class

p:only-of-type এর অর্থ হলো যেসকল Parent Element এর Child কেবলমাত্র একটা p, সেই p কে select করবে। যদি কোন Parent Element এর একাধিক p থাকে, তাহলে তাদের select করবে না।

Example:

<body>
  <h1>only-of-type</h1>
  <div>
    <p>This is Paragraph 1</p>
  </div>
  <div>
    <p>This is Paragraph 2</p>
    <p>This is Paragraph 3</p>
  </div>
</body>

p:only-of-type {
  background-color: lightgreen;
}

Screenshot:

only-child Pseudo-class

p:only-child এর অর্থ হলো যদি কোন Parent Element এর কেবল একটি p element থাকে তাহলে সেটিকে select করবে ।

Example:

<body>
  <h1>Only-child Pseudo-class</h1>
  <div>
    <p>This is Paragraph 1</p>
  </div>
  <div>
    <p>This is Paragraph 2</p>
    <p>This is Paragraph 3</p>
  </div>
</body>

p:only-child {
  background-color: lightpink;
}

Screenshot:

04. All CSS Pseudo Elements

Pseudo Element কি

Pseudo Element হলো একটা Keyword যেটা কোন একটা Selector এর Specific একটা অংশকে Style করে, নতুন কোন Element তৈরি করা ছাড়াই। অর্থাৎ আমরা যে Specific অংশকে Style করতে চাচ্ছি, ঐ অংশকে একটা Element এর মধ্যে নিয়ে Style করা যেত, তবে এক্ষেত্রে নতুন আরও একটি Element তৈরি করা লাগতো। Pseudo Element এর মাধ্যমে আমরা নতুন কোন Element তৈরি করা ছাড়াই ঐ Specific অংশকে ধরতে পারি এবং Style করতে পারি। যেমনঃ কোন একটা Paragraph এর প্রথম লাইন বা প্রথম Letter কে ধরতে আমরা Pseudo Element ব্যবহার করতে পারি।

Note: ::before, ::after এগুলো সবই কিন্তু একেকটা Element. অর্থাৎ CSS এ Div, Span, Section এগুলো যেমন Element তেমনি ঐগুলাও (::before, ::after, ::first-letter) একেকটা Element. এবং by default এগুলো Inline Element.

Selector No.	Selector Name	Example	Example Description
01	::after	p::after	Insert content after `<p>` element
02	::before	p::before	Insert content before `<p>` element
03	::first-letter	p::first-letter	Selects the first letter of `<p>` element
04	::first-line	p::first-line	Selects the first line of `<p>` element
05	::selection	p::selection	Selects the portion of an element that is selected by a user

Example

<body>
  <h1>Pseudo Elements</h1>
  <p>Abdul Alim</p>
  <p>Rafiqul Islam</p>
</body>

p::before {
  content: "Name: ";
}

p::after {
  content: " Country: Bangladesh ";
}

p::first-letter {
  font-size: 5rem;
  color: pink;
}

p::first-line {
  background-color: lightcyan;
}

p::selection {
  background-color: red;
}

Screenshot

Source Codes

Marker Pseudo Element

::marker Pseudo Element টি list items coloring করতে ব্যবহার করা হয়।

Example:

<ul>
  <li>C++</li>
  <li>Java</li>
  <li>Python</li>
  <li>Kotlin</li>
</ul>
<ol>
  <li>Farmer</li>
  <li>Traveller</li>
  <li>Developer</li>
</ol>

::marker {
  color: red;
}

Screenshot:

05. Attribute Selectors

Selector No.	Selector Name	Example	Example Description
01	[attribute]	[target]	Selects all elements with a target attribute
02	[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
03	[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
04	[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"
05	[attribute^=value]	a[href^="https"]	Selects every `<a>` element whose href attribute value begins with "https"
06	[attribute$=value]	a[href$=".pdf"]	Selects every `<a>` element whose href attribute value ends with ".pdf"
07	[attribute*=value]	a[href*="w3schools"]	Selects every `<a>` element whose href attribute value contains the substring "w3schools"

Note: This table has some type because of vs-code extensions, plz visit https://www.w3schools.com/css/css_attribute_selectors.asp for original table.

Example Source Codes

<body>
  <h1>Attribute Selectors</h1>
  <a href="http://google.com" target="_blank" rel="noopener noreferrer"
    >Google</a
  >
  <a href="http://google.com">Google</a>
  <img
    src="/chapter-14/images/logo.png"
    title="Codejogot Logo"
    alt="CodeJogot"
    width="300px"
    height="300px"
  />
  <img
    src="/chapter-14/images/fb-cover.png"
    title=" at Dhaka"
    alt="CodeJogot"
    width="300px"
    height="300px"
  />
</body>

a[target] {
  color: red;
}
/* attribute with value */
a[target="_blank"] {
  background-color: aquamarine;
}
/* title text anywhere */
img[title~="Logo"] {
  border: 2px solid red;
}
/* start with*/
a[href^="http"] {
  font-size: 2rem;
}
/* end with */
img[alt$="Jogot"] {
  border-radius: 50%;
}
/* substring */
a[href*="google"] {
  font-style: italic;
}

Screenshot

Open in Codepen

↥ Go to Top

Chapter-15: CSS Text, Fonts & Icons

CSS Text
CSS Fonts
- Font Family
- Font Style, Weight, Variant, Size
CSS Icons
- How to Use Icons
Assignments
- Problem 01
- Problem 02

CSS Text

Text Alignment & Text Direction Properties

Property Name	Property Values	Role/Task	Example
`text-align`	left, right, center, justify	কোন টেক্সটকে Horizontally Align করার জন্য এই Property ব্যবহার করা যায়।	`text-align: center`. কোন element এ যদি এই প্রপার্টি দেয়া হয়, তাহলে ঐ Element এর সমস্ত টেক্সট মাঝখানে চলে যাবে।
`text-align-last`	left, right, center, justify	কোন Text এর লাস্ট লাইনকে Align করতে ব্যবহার করা হয়।	`text-align-last: right` এটা যদি কোন একটা P element কে দেয়া হয়, তাহলে ঐ P element এর লাস্ট লাইন ডান দিকে align হবে।
`direction`	ltr, rtl
`unicode-bidi`	normal, embed, bidi-override
`vertical-align`	baseline, length, sub, super, top, text-top, middle, text-bottom	inline বা inline-block or table-cell box কে Vertically Align করে

Text Decoration

Text Tranformation

Text Spacing

Text Shadow

CSS Fonts

Font Family

Font Style, Weight, Variant, Size

CSS Icons

Assignments

Problem-01

Problem-02

Chapter-16: CSS Links, Lists, Tables, Display & Max-width

CSS Links
CSS Lists
CSS Tables
CSS Display Propery
CSS Max-width
Assignments on Chapter-16
- Assignment 1
- Assignment 2

CSS Links

আমরা জানি লিংক তৈরি করতে হয় <a> ট্যাগ দিয়ে। HTML এ লিংক তৈরি করার সাথে সাথে By Default কিছু Styles Generate হয়। যেগুলা আমরা CSS দিয়ে Customize করতে পারি।

Four States of Links

Link এর চারটা States আছে। যেগুলো আমরা চারটা Pseudo-class দিয়ে CSS থেকে ধরতে পারি।

a:link - a normal, unvisited link.
a:visited - a link the user has visited.
a:hover - a link when the user mouses over it.
a:active - a link the moment it is clicked.

Note: CSS এ Code লিখার সময় অবশ্যই link এবং visited Pseudo-class এর পর hover Pseudo-class দিতে হবে এবং active hover এর পর দিতে হবে।

Example:

Source Codes:

How To Create Link Boxes/Buttons

a:link,
a:visited {
  background-color: white;
  border: 2px solid black;
  text-decoration: none;
  color: black;
  padding: 8px 24px;
  text-align: center;
  border-radius: 4px;
}

a:hover,
a:active {
  background-color: black;
  color: white;
}

Example:

Source Codes: Open in CodePen

Different Types of Cursors on Links

Example:

Source Codes: Open in CodePen

CSS Lists

HTML এ দুই ধরনের লিস্ট আছে। Ordered List and Unordered List.
Ordered List Bullet দ্বারা মার্ক করা হয়।
Unordered List Number অথবা Letters দ্বারা মার্ক করা হয়।

List Style Type Property

list-style-type Property দিয়ে কোন একটা Marker কি Type এর সেটা বলে দেয়া যায়। যেমনঃ list-style-type: circle, list-style-type: square, list-style-type: upper-roman, list-style-type: lower-alpha.

Example:

Source Codes: Open in CodePen

Image as An Marker

আমরা চাইলে Marker হিসেবে Image বা Gradient-ও ব্যবহার করতে পারি।

Example

Source Codes: Open in CodePen

Item Position

list-style-position মার্কারের Position নির্ধারণ করে।
list-style-position: outside এর অর্থ হলো বুলেট বা মার্কার লিস্ট Items এর বাইরে থাকবে।
list-style-position: inside এর অর্থ হলো বুলেট বা মার্কার লিস্ট Items এর ভিতরে থাকবে।
বুলেট পয়েন্ট ভিতরে না বাইরে আছে, তা আমরা একটা Border অ্যাড করে খুব সহজেই বুঝতে পারি।

Example

Source Codes

How to Remove Default Settings

আমরা যখনি একটা লিস্ট তৈরি করি, তখনই প্রত্যেকটা লিস্ট এর সাথে একটা করে বুলেট এবং কিছু Default Margin Padding অ্যাড হয়, আমরা চাইলে এই সেটিং Remove করতে পারি। সেক্ষেত্রে নিচের Code টা লিখলেই হয়ে যাবেঃ

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

List Style Shortand Property

list-style হলো list-style-type, list-style-position এবং list-style-image এর Shorthand Property. যেমনঃ list-style: square inside url('sqpurple.gif')

CSS Tables

HTML এ <table>, <th>, <tr> এবং <td> Tags গুলো ব্যবহার করে টেবিল তৈরি করা হয়।

Example

Source Codes

CSS Display Propery

Layout Control করার জন্য CSS Display Property অনেক গুরুত্বপূর্ণ ভূমিকা পালন করে।

CSS Max-width

Assignments on Chapter-16

Assignment 1 for Chapter-16

Assignment 2 for Chapter-16

↥ Go to Top

Chapter-17: CSS Image Gallery and Image Sprites

CSS Image Gallery: A Responsive Image Gallery Project
- What We learn While Building This Project

CSS Image Gallery: A Responsive Image Gallery Project

কিভাবে Images নিয়ে কাজ করতে হয় এবং একটা Responsive Image Gallery তৈরি করা যায়, তা নিচের প্রোজেক্ট করার মাধ্যমে আমরা শিখবো ইনশাল্লাহ।

এই প্রোজেক্ট এ আমরা Media Queries ব্যবহার করে Images গুলো কে Rearrange করবো । যেমন, 700px এর চেয়ে বড় Screen এ আমরা চারটা Image কে Side by Side দেখাবো। 700px এর চেয়ে ছোট Screen এ আমরা ২ টা Image কে side by side দেখাবো। এরপর, 500px এর চেয়ে ছোট Screen এ আমরা একটা image কে side by side দেখাবো।

What We learn While Building This Project

এই প্রজেক্টি করার সময় যা যা শিখলামঃ

figcaption এর ব্যবহার ।

Project Screenshot

Chapter-18: Website Layout

How to Create A Website Layout

How to Create A Website Layout

একটা Website Layout তৈরি করতে যে বিষয়টা খেয়াল করতে হবে তা হলো, প্রথমে Website কে উপর থেকে নিচ বরাবর (Row) কয়টা ভাগে ভাগ করা যায়, এরপর দেখতে হবে ঐ প্রতিটা ভাগে আবার উপর থেকে নিচ (row) বা বাম থেকে ডান (column) বরাবর কয়টা ভাগে ভাগ করা যায়। তারপর আবার সেই Sub-section কে আবার প্রথমে দেখতে হবে উপর থেকে নিচ বরাবর ভাগ করা যায় কিনা, যদি না যায়, তাহলে বাম থেকে ডান বরাবর ভাগ করতে হবে, এইভাবে চলতে থাকবে যতক্ষণ পর্যন্ত পুরো Website ভাগ না করা হয়। এভাবে একটি Website এর Layout তৈরি করা হয়। Video তে বিষয়টি আরও ভালোভাবে বর্ণনা করা আছে।

↥ Go to Top

Chapter-19: Visualize and Play with CSS Properties

Very Very helpful link to visualize, practice and play with css properties. Link: https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_grid-template Credit: W3Schools

Note: Practice the properties as more as you can!

↥ Go to Top

Chapter-20: CSS Grid Layout

A Sample Example of CSS Grid Layout Module
Basic Concept And Benefits of CSS Grid Layout
Grid Elements
All CSS Grid Properties
CSS Grid Layout Example-01
Full Responsive with Auto-fit and Minmax in Grid
CSS Grid Tips
Visualize and Play with Grid Properties

A Sample Example of CSS Grid Layout Module

Basic Concept And Benefits of CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS Grid Layout এ Multidimensional Layout অর্থাৎ একইসাথে Row and Column নিয়ে কাজ করা যায়, যেখানে CSS Flexbox হলো One Dimensional, অর্থাৎ শুধু Row বা শুধু Column নিয়ে কাজ করা যায়।
Simpler Markup.
Framework not needed. অর্থাৎ শুধু Multi-dimensional Grid তৈরি করার জন্য কোন Framework ব্যবহার করার দরকার নেই, এই কাজ CSS Grid দিয়ে খুব সহজেই করে ফেলা যায়।
Great Browsers Support.
CSS Grid এক কথায় CSS Flexbox এর বাবা ! :D কারন CSS Grid দিয়ে আমরা Flexbox এর সমস্ত কিছু তো করতে পারবই, plus আরও অনেক Features আমরা ব্যবহার করতে পারবো, বিশেষ করে 2-dimensional (row and column both) Scenario এর ক্ষেত্রে CSS Grid খুব ভালো একটা সমাধান।

Grid Elements

A grid layout consists of a parent element (Grid Container), with one or more child elements. অর্থাৎ একটা Grid Layout এর একটা Parent Element বা Grid Container থাকবে, Grid Container এর Under এ একাধিক Grid Elements থাকবে।
একটা Grid Layout তৈরি করতে Grid Container এর CSS Property তে display: grid; অথবা display: inline-grid দিতে হবে।

All CSS Grid Properties

Property	Syntax	Description
column-gap	column-gap: length\|normal\|initial\|inherit;	The column-gap property sets the gap between the columns. Example: `column-gap: 50px;`
row-gap	row-gap: length\|normal\|initial\|inherit;	The row-gap property sets the gap between the rows. Example: `row-gap: 50px;`
gap	gap: row-gap column-gap;	The gap property is a shorthand property for the row-gap and the column-gap properties. Example: `gap: 25px 50px;`
gird-template-rows	grid-template-rows: none\|auto\|max-content\|min-content\|length\|initial\|inherit;	The `grid-template-rows` property specifies the number and the heights of the rows in a grid layout. Example-01: `grid-template-rows: 50px 100px 70px 120px 150px;` Here, there are 5 rows. 1st row size is 50px, 2nd row size is 100px, 3rd row size is 70px, 4th row size is 120px and 5th row size is 150px. Example-02: `grid-template-rows: auto auto auto;`, means there are 3 rows with equal row size depending on the Grid Containers Height. Example-03: `grid-template-rows: 1fr 2fr 1fr;` , এর অর্থ হলো পুরো আমাদের Window টাকে ৪ ভাগ করবে, ১ ভাগ দিবে প্রথম Row কে, ২ ভাগ দিবে দ্বিতীয় Row কে এবং ১ ভাগ দিবে তৃতীয় Row কে । এটা 100% Responsive.
grid-template-columns	grid-template-columns: none\|auto\|max-content\|min-content\|length\|initial\|inherit;	The `grid-template-columns` property specifies the number and the heights of the columns in a grid layout. Example-01: `grid-template-rows: 50px 100px 70px 120px 150px;` Here, there are 5 columns. 1st column size is 50px, 2nd column size is 100px, 3rd column size is 70px, 4th column size is 120px and 5th column size is 150px. Example-02: `grid-template-columns: auto auto auto;`, means there are 3 columns with equal column size depending on the Grid Containers Width. Example-03: `grid-template-columns: 3fr 2fr 3fr` , এর অর্থ হলো পুরো Window টাকে ৮ ভাগে ভাগ করবে, ৩ ভাগ দিবে প্রথম Column কে, ২ ভাগ দিবে দ্বিতীয় কলামকে এবং ৩ ভাগ দিবে তৃতীয় কলামকে। এটা 100% Responsive.
grid-row-start	grid-row-start: auto\|row-line\|span n;	একটা Grid Element কতো নাম্বার Row-line থেকে শুরু হবে সেটা বলে দেয়া হয় এই প্রপার্টি দ্বারা। এছাড়া একটা Grid Element কতোগুলো Row এর যায়গা নিজে একাই দখল করবে সেটাও বলে দেয়া যায় এই Property দ্বারা। Example-01: `grid-row-start: auto;` এটা By default Property. অর্থাৎ যে Grid Element এই Property set করে দেয়া হোক না কেন, প্রথম Grid Element থেকেই Grid Render হওয়া শুরু করবে। Example-02: `grid-row-start: span 3;` , এই প্রপার্টি যদি 2 নং Grid Element কে দেয়া হয়, তাহলে 2 নং Grid Element তিনটা Row এর সমান যায়গা দখল করবে। Example-03: `grid-row-start: 2;` এই প্রপার্টি যদি 3 নং Grid Element কে দেয়া হয়, তাহলে 3 নং Grid Element 2 নং Row-line এর শুরুতে বসে যাবে। বিষয়টি আরও ভালোভাবে বুঝতে নিচের W3 Schools লিঙ্কটি খুবই কার্যকরী। https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_grid-row-start
grid-row-end	grid-row-end: auto\|row-line\|span n;	Example-01: `grid-row-end: 3;` , এই প্রপার্টি যদি 2 নং Grid Element কে দেয়া হয়, তাহলে 2 নং Grid Element 3 নং Row-line এ End হবে। আরও ভালোমতো Practice and Visualize করতে নিচের লিঙ্কে যাওঃ https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_grid-row-end
grid-column-start	grid-column-start: auto\|span n\|column-line;	The grid-column-start property defines on which column-line the item will start. Example-01: `grid-column-start: 3;`, এই প্রপার্টি যদি ২ নং গ্রিড ইলেমেন্টকে দেয়া হয়, তাহলে সেই গ্রিড ইলেমেন্ট ৩ নং Column-line এ বসে যাবে। তাহলে ২ নং গ্রিড এর জন্য যে নির্ধারিত স্থান ছিলো সেটা কি হবে? সেই স্থান ফাঁকা থাকবে। নিচের লিঙ্কে ভিজুয়ালাইজ করে দেখো : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_grid-column-start
grid-column-end	grid-column-end: auto\|span n\|column-line;	The grid-column-end property defines how many columns an item will span, or on which column-line the item will end. Example-01: `grid-column-end: 3;` এই প্রপার্টি যদি ১ নং গ্রিড ইলেমেন্টকে দেয়া হয়, তাহলে ১ নং গ্রিড ইলেমেন্ট ৩ নং Column-line এ End হবে। নিচের লিংকে ভিজিট করে নিজে নিজে Visualize করে দেখোঃ https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_grid-column-end&preval=5
grid-row	grid-row: grid-row-start / grid-row-end;	Example-01: `grid-row: 1 / 3`, অর্থাৎ যে Element এ এই Property দেয়া হবে, সেই Element টি ১ নং row-line এ শুরু হবে, ৩ নং row-line এ শেষ হবে।
grid-column	grid-column: grid-column-start / grid-column-end;	Example-01: `grid-column: 1 / 3`, অর্থাৎ যে Element এ এই Property দেয়া হবে, সেই Element টি ১ নং column-line এ শুরু হবে, ৩ নং column-line এ শেষ হবে।
grid-area	grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end \| itemname;	Example-01: `grid-area: h;`
grid-template-areas	grid-template-areas: none\|itemnames;	Example-01: `grid-template-areas: "m h h h h h h h h h h h" "m c c c c c c c c c c c" "f f f f f f f f f f f f";`
justify-content	justify-content: start\|end\|center\|space-between\|space-around\|space-evenly;	Example-01: `justify-content: center;` এই Property যখন কোন Container কে দেয়া হবে, তখন ঐ Container এ যতগুলো Items থাকবে তারা সব Horizontally Center এ চলে যাবে।
align-content	align-content: start\|end\|center\|space-between\|space-around\|space-evenly;	Example-01: `align-content: center;` এই Property যখন কোন Container কে দেয়া হবে, তখন ঐ Container এ যতগুলো Items থাকবে তারা সব Vertically Center এ চলে যাবে।

CSS Grid Layout Example-01

Full Responsive with Auto-fit and Minmax in Grid

CSS Grid Tips

Shorthand property of grid-template-rows and grid-template-columns is grid-template: grid-template-rows / grid-template-columns`.
যদি আমরা grid-template-rows: 1fr 1fr 1fr 1fr 1fr দিতে চাই, তাহলে এইভাবে ৫ বার না লিখে সংক্ষেপে grid-template-rows: repeat(5, 1fr) দিতে পারি।

Visualize and Play with Grid Properties

Visualize and Play with Grid Properties Credit: W3Schools

↥ Go to Top

Chapter-21: CSS Gradient

CSS Gradients Introduction
- Basic Concepts of CSS Gradients
- Types of Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Gradients Introduction

Basic Concepts of CSS Gradients

কোন Background এ একাধিক রং ব্যবহার করতে Gradient Use করতে হয়।
CSS Gradient দিয়ে দুই বা ততোধিক রঙের মধ্যে Smooth Transition (এক রং থেকে অন্য রং এ পরিবর্তন হওয়াকে Transition বলে) করা হয়।

Types of Gradients

Linear Gradients (goes down/up/left/right/diagonally).
Radial Gradients (defined by their center).
Conic Gradients (rotated around a center point).

Linear Gradients

Linear Gradients তৈরি করতে অন্তত ২ টি Colors লাগবে। ধরি, background-image: linear-gradient(red, blue); তাহলে লাল রং ধিরে ধিরে নীল রং Transition হবে, উপর থেকে নিচ বরাবর (Top to Bottom), যেটা By default প্রপার্টি, আমরা চাইলে Transition এর Direction পরিবর্তন করতে পারি।

Syntax of Linear Gradients

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction of Linear Gradients

Linear Gradient এর কাজটা হলো একটা Color থেকে ধীরে ধীরে আরেকটা Color তৈরি করা, যেটাকে ইংরেজিতে Transition বলা হচ্ছে। এখন কোন একটা Color কোথা থেকে শুরু করে কোথায় গিয়ে দ্বিতীয় Color এ Transition হবে সেটা আমরা Direction এর মাধ্যমে বলে দিতে পারি।

Direction - Top to Bottom (this is default )

অর্থাৎ আমরা যদি কোন Direction না দেই, তাহলে by default, Top to Bottom এ Transition হবে। অর্থাৎ আমরা যে Color sets গুলা দিয়ে দিবো সেটা by default উপর থেকে নিচের দিকে Transition হবে।

Example: background-image: linear-gradients(red, yellow); . This linear gradient starts red, transitioning to yellow.

Output Screenshot:

Direction - Left to Right

Example: background-image: linear-gradients(to right, red, yellow); The following example shows a linear gradient that starts from the left. It starts red, transitioning to yellow.

Output Screenshot:

Direction - Top Left to Bottom Right

Example: background-image: linear-gradients( to bottom right, red, yellow); The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to yellow.

Output Screenshot:

Direction - 180deg

যদি Direction এর উপর আমরা আরও বেশি Control নিতে চাই, তাহলে আমাদের যে Pre-defined Directions (to bottom, to top, to right, to left, to bottom right, etc.) আছে, এগুলোর বদলে আমরা Angle ব্যবহার করতে পারি। A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom". যেহেতু to bottom হলো by default property, তাই 180deg একইভাবে by default property. অর্থাৎ প্রথম ও দ্বিতীয় Color এর মধ্যে যদি একটা Line টানা যায়, সেই Line ভূমির সাথে 180 Degree কোন করে থাকবে, এইটা by default. এখন আপনি চাইলে এই Degree কম বেশি করতে পারেন।

Example: background-image: linear-gradient(180deg, red, yellow);

Output Screenshot:

Direction - 90deg

Example: background-image: linear-gradient(90deg, red, yellow);

Output Screenshot:

Direction - 0% x% 100%

Example: background-image: linear-gradient(#feffff 0%, #ddf1f9 35%, #a0d8ef 100%);

Output Screenshot:

Direction - 20% 70%

Example: background-image: linear-gradient(red 20%, yellow 70%); এর অর্থ হলো Position 20% থেকে Position 70% পর্যন্ত Red থেকে Yellow Color এ Transition হবে। এবং 0 থেকে 20% Solid Red ও 70% থেকে 100% Solid Yellow Color থাকবে। Position ও Percentage এর বিষয়টা খুব ভালো করে খেয়াল করেন এবং বুঝার চেষ্টা করেন, কারন এই বিষয়ে খুব একটা ভালো Tutorial Online এ নেই বললেই চলে।

Output Screenshot:

Direction - 50% 50%

Example: background-image: linear-gradient(to top right, red 50%, yellow 50%);

খেয়াল করে দেখুন, এখানে 0% থেকে 50% পর্যন্ত Solid red color এবং 50% থেকে 100% পর্যন্ত Solid yellow color থাকবে, কিন্তু Transition হবার মতো কোন যায়গা নেই।

Output Screenshot:

Direction - 20% 20%-80% 80%

Example: background-image: linear-gradient(to top right, red 20%, green 20% 80%, red 80%);

Using Transparency as Direction

অর্থাৎ এখানে আসলে একটা Color ই থাকবে যার Value একদম ০ থেকে বাড়তে বাড়তে ১০০% হবে। এক্ষেত্রে আমরা rgba() function ব্যবহার করতে পারি, এই Function এর Last Parameter এ 0 দেওয়া মানে Full Transparent বা No Color, 1 দেওয়া মানে Full Color (No Transparency).

Example: background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Output Screenshot:

Repeating a linear-gradient

Example: background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

Output Screenshot:

Linear Gradient Source Codes

Radial Gradients

Basic Concept of Radial Gradients

Linear Gradient এর মতোই Radial Gradient তৈরি করতে অন্তত দুইটা Colors প্রয়োজন হয়। Radient Gradient Center থেকে তৈরি হয়।
By default, Radiant Gradient এর আকৃতি Elipse এর মতো।
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default).

By Default Shape of Radial Gradients

Example Code:

background-image: radial-gradient(red, yellow, green);

Screenshot:

Circle Shaped Example of Radial Gradients

background-image: radial-gradient(circle, red, yellow, green);

Screenshot:

Providing The % To Tell Where The Color Should Transition

আমরা চাইলে কোন Color কোথায় থেকে Transition হবে সেটা বলে দিতে পারি । যেমন,

Screenshot:

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

যেমন এখানে Red 5% এবং Yellow 15% এর অর্থ হলো 5% থেকে 15% পর্যন্ত Red ধীরে ধীরে Yellow তে Transition হবে। আবার Yellow 15% এবং Green 60% এর মানে হলো, Yellow 15% থেকে 60% পর্যন্ত Yellow ধীরে ধীরে Green এ Transition হবে। এখানে লক্ষণীয় হলো, 0-5% পর্যন্ত Solid Red Color থাকবে এবং 60%-100% পর্যন্ত Solid Green Color থাকবে।

Screenshot:

Bangladesh Flag Using Radial Gradients

background-image: radial-gradient(circle, red 30%, green 30%);

Screenshot:

Position of Radial Gradients

By default, Radiant Gradient এর Position center center করা থাকে। আমরা চাইলে এই Position কে Change করতে পারি।

Example (Top Center):

background-image: radial-gradient(at top center, red, yellow, green);

Screenshot:

Example: (Right Bottom)

background-image: radial-gradient(at right bottom, red, yellow, green);

Screenshot:

Position at X% Y%

আমরা চাইলে center center লিখার বদলে 50% 50% ও লিখতে পারি, এর মানে হলো Center টা Left থেকে 50% এবং Top থেকে 50%. আবার right bottom লিখার বদলে 100% 100% ও লিখতে পারি। অর্থাৎ Center তখন Left থেকে 100%, Top থেকে 100% Position এ থাকবে. এই লিখার মাধ্যমে আমারা কেবল 0%, 50% ও 100% নিয়ে কাজ করতে পারি, কিন্তু ধরলাম আমরা চাচ্ছি Center টাকে Left থেকে 30% এবং Top থেকে 40% এ নিয়ে যাব, তাহলে কিন্তু আমরা লিখার মাধ্যমে করতে পারবো না, সেক্ষেত্রে আমাদের সরাসরি % দিয়ে করবো।

Example:

background-image: radial-gradient(at 30% 40%, red, yellow, green);

Screenshot:

Position at Closest Side

By default, Radial Gradiant এ আমরা Center এর Position যেটাই দেই না কেন, সে Farthest Corner পর্যন্ত Transition করে, কিন্তু আমরা যদি চাই, Gradient এর বর্তমান Position থেকে সে তার Closest Sides পর্যন্ত Transition করবে তাহলে আমরা সেটা বলে দিতে পারি।

Example:

background-image: radial-gradient(closest-side at 30% 40%, red, yellow, green);

Screenshot:

Position at Farthest Side

আমরা যে Position Set করে দিবো, সেখান থেকে Fartest Side পর্যন্ত Transition হবে।

Example:

background-image: radial-gradient(farthest-side at 30% 40%, red, yellow, green);

Screenshot:

Position at Closest Corner

আমরা যে Position Set করে দিবো, সেখান থেকে Closest Corner পর্যন্ত Transition হবে।

Example:

background-image: radial-gradient(
  closest-corner at 30% 40%,
  red,
  yellow,
  green
);

Screenshot:

Repeating a radial-gradient

Example:

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

এখানে 15% থেকে 100% পর্যন্ত Solid Green Color হতো যদি এটা শুধু radial-gradient হতো, এটা যেহেতু repeating-radial-gradient তাই ঐ 15% থেকে 100% red, yellow and green এর Transition Repeat হবে।

Screenshot:

Transparent Radial Gradient

Example:

background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));

Screenshot:

Using Multiple Radiant Gradients

Example:

background-image: radial-gradient(
    at 50% 0%,
    rgba(255, 0, 0, 0.5),
    rgba(255, 0, 0, 0)
  ), radial-gradient(at 50% 100%, rgba(47, 0, 255, 0.5), rgba(255, 0, 0, 0)),
  radial-gradient(at 100% 50%, rgba(47, 0, 255, 0.5), rgba(255, 0, 0, 0)),
  radial-gradient(at 0% 50%, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0));

Screenshot:

Multiple Radial Gradients with Border Radius 50%

Same as previous example just added border-radius: 50%

Example:

background-image: radial-gradient(
    at 50% 0%,
    rgba(255, 0, 0, 0.5),
    rgba(255, 0, 0, 0)
  ), radial-gradient(at 50% 100%, rgba(47, 0, 255, 0.5), rgba(255, 0, 0, 0)),
  radial-gradient(at 100% 50%, rgba(47, 0, 255, 0.5), rgba(255, 0, 0, 0)),
  radial-gradient(at 0% 50%, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0));
border-radius: 50%;

Screenshot:

Radial Gradients Source Codes of All Examples

Conic Gradients

Introduction To Conic Gradients

By default, Conic Gradient এ Colors গুলো ধীরে ধীরে Clock-wise Transition হয়।
By default, angle is 0deg and position is center.
If no degree is specified, the colors will be spread equally around the center point.

Conic Gradient Syntax

background-image: conic-gradient(
  [from angle] [at position,
  ] color [degree],
  color [degree],
  ...
);

Conic Gradient with Three Colors

Example:

background-image: conic-gradient(red, yellow, green);

Screenshot:

আমরা চাইলে এখানে border-radius: 50%; set করে একে চতুর্ভুজ থেকে বৃত্ত আকৃতি নিয়ে আসতে পারি।

Code:

background-image: conic-gradient(red, yellow, green);
border-radius: 50%;

Screenshot:

কিন্তু এখানে একটা বিষয় লক্ষণীয়, উপরের দিকে Solid Red and Solid Green একসাথে মিশে যাবার কারনে তা স্পষ্ট বুঝা যাচ্ছে, যেহেতু তারা ভিন্ন Color. তাই আমরা যদি প্রথম ও শেষ Color একই দেই, তাহলে সুন্দর একটা Conic Radient তৈরি হবে, এবং দুই Color এর মাঝে যে স্পষ্ট লাইন সেটা আর Visible হবে না।

Code:

background-image: conic-gradient(red, yellow, green, red);
border-radius: 50%;

Screenshot:

Starting Position of Conic Gradient

আমরা চাইলে Conic Gradient কোথা থেকে শুরু হবে সেটা বলে দিতে পারি।

Code:

background-image: conic-gradient(from 45deg, red, yellow, green);
border-radius: 50%;

Screenshot:

Changing the Center

আমরা চাইলে Conic Gradient এর Center-ও পরিবর্তন করতে পারি। By default, Center টি থাকে 50% 50% এ, অর্থাৎ Left থেকে 50%, Top থেকে 50%. আমরা কিভাবে এই Position Change করতে পারি, তা নিচে দেখানো হলো ।

Code:

background-image: conic-gradient(at 60% 40%, red, yellow, green);
border-radius: 50%;

Screenshot:

Changing Both: Starting Position and Center

আমরা চাইলে Conic Gradient এর Center এবং Starting Angle দুটোই পরিবর্তন করতে পারি ।

Code:

background-image: conic-gradient(from 90deg at 60% 40%, red, yellow, green);
border-radius: 50%;

Screenshot:

Using Color Stops Xdeg, Ydeg, Zdeg

একটা উদাহরণ নিয়ে আলোচনা করি, conic-gradient(red 45deg, yellow 190deg, green 300deg), এখানে red 45deg and yellow 190deg এর অর্থ হলো Red Color 45deg থেকে 190deg পর্যন্ত ধীরে ধীরে Red থেকে Yellow তে Transition হবে। এবং 0deg থেকে 45deg পর্যন্ত Solid Red Color থাকবে। একইভাবে, yellow 190deg এবং green 300deg এর মানে হলো, yellow Color 190deg থেকে 300deg পর্যন্ত Yellow থেকে Green তে Transition হবে। এবং 300deg থেকে 360deg Solid green Color থাকবে। এই Cencepts গুলো Linear এবং Radial Gradient এর মতই। একবার ভালোভাবে বুঝলে, সব পানি হয়ে যাবে ! Anyways, এখন উদাহরণ দেখুন, বিষয়গুলো পরিষ্কার হয়ে যাবে।

Code:

background-image: conic-gradient(red 45deg, yellow 190deg, green 300deg);
border-radius: 50%;

Screenshot:

Creating A Beautiful Pie Chart

আমরা যখন yellow 100deg 150deg দিবো, এর মানে হলো Solid Yellow Color 100deg থেকে 150deg পর্যন্ত হবে। এই Technique ব্যবহার করে নিচে আমরা একটা সুন্দর Pie Chart তৈরি করবো।

Code:

background-image: conic-gradient(
  red 45deg,
  yellow 45deg 90deg,
  green 90deg 135deg,
  blue 135deg 180deg,
  orange 180deg 225deg,
  aqua 225deg 270deg,
  purple 270deg 315deg,
  violet 315deg 360deg
);
border-radius: 50%;

Screenshot:

Beautiful Design with 'Background-Size' Property

Code:

background-image: conic-gradient(
  red 45deg,
  yellow 45deg 90deg,
  green 90deg 135deg,
  blue 135deg 180deg,
  orange 180deg 225deg,
  aqua 225deg 270deg,
  purple 270deg 315deg,
  violet 315deg 360deg
);
border-radius: 50%;
background-size: 20px 20px;

Screenshot:

Repeating Conic Gradient

Repeating Conic Gradient, Repeating Linear Gradient এবং Repeating Radial Gradient এর মতোই কাজ করে।

Code:

background-image: repeating-conic-gradient(red 20deg, yellow 30deg 40deg);
border-radius: 50%;

Screenshot:

CSS Gradient Creator

নিচের Website এ গিয়ে আপনার পছন্দের Gradient তৈরি করতে পারেন, এবং Code Copy Paste করে Website এ কাজে লাগাতে পারেন।
https://cssgradient.io/

↥ Go to Top

Chapter-22: CSS 2D and 3D Transforms

Introduction To CSS 2D Transforms
2D Transforms Methods At A Glance
2D Transforms Screenshots
Open 2D Transforms Source Codes in CodePen

Introduction To CSS 2D Transforms

CSS Transform আমাদেরকে কোন একটা element কে Move, Rotate, Scale এবং Skew করতে সাহায্য করে ।
CSS transitions allows you to change property values smoothly, over a given duration.

2D Transforms Methods At A Glance

একনজরে CSS 2D Transform এর Methods গুলোঃ

Method No.	Method Name	Description	Example Description
01	translate()	translate() method, element এর Position পরিবর্তন করে।	transform: translate(50px, 100px); এইটা যদি কোন একটা Div element কে দেয়া হয়, তাহলে ঐ Div element টি 50px Left থেকে Right এর দিকে সরে যাবে এবং 100px Top থেকে Bottom এর দিকে সরে যাবে।
02	rotate()	rotate() method, কোন একটা element কে Clockwise বা Counter-clockwise rotate করে	transform: rotate(20deg); এই প্রপার্টি যদি কোন একটা Div Element কে দেয়া হয়, তাহলে ঐ Div Element, 20deg Clockwise Rotate করবে।
03	scale()	scale() method কোন একটা element এর Size কে Increase বা Decrease করে।	transform: scale(2, 3); এইটা কোন একটা Element এ যদি দেই, এর অর্থ হলো ঐ Element এর Width হবে 2 গুন এবং Height হবে 3 গুন।
04	scaleX()	scaleX() method কোন একটা element এর Width Increase বা Decrease করে।	transform: scaleX(2); এইটা কোন একটা element এর CSS এ যখন দিবো, এর অর্থ হলো ঐ element টির Width দিগুন হবে।
05	scaleY()	scaleY() method কোন একটা element এর Height Increase বা Decrease করে।	transform: scaleY(0.5); এইটা কোন একটা element এর CSS এ যখন দিবো, এর অর্থ হলো ঐ element টির Height অর্ধেক হয়ে যাবে।
06	skewX()	skewX() method, X অক্ষ বরাবর Elements ডান থেকে বাম দিকে বা বাম থেকে ডান দিকে বাঁকিয়ে বা হেলিয়ে ফেলে।	transform: skewX(20deg); এর অর্থ হলো ঐ Element টি X অক্ষ বরাবর ডান থেকে বাম দিকে 20deg হেলে যাবে।
09	skewY()	skewY() method, Y অক্ষ বরাবর কোন element কে উপর থেকে নিচ দিকে বা নিচ থেকে উপর দিকে Y অক্ষ বরাবর হেলে বা বেঁকে যাবে।	transform: skewY(20deg); এর অর্থ হলো ঐ Element টি Y অক্ষ বরাবর উপর থেকে নিচ দিকে বেকে বা হেলে যাবে।
10	skew()	skew() method হলো shorthand property of skewX() and skewY()	transform: skew(20deg, 10deg) এইটা যদি কোন element কে দেয়া হয়, এর মানে হলো ঐ element টি X অক্ষ বরাবর ডান থেকে বাম দিকে 20deg এবং Y অক্ষ বরাবর উপর থেকে নিচ দিকে 10deg হেলে বা বেঁকে যাবে।
11	matrix()	matrix() method হলো একসাথে 6 টা Parameters নেয়। অর্থাৎ matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())	transform: matrix(2, -0.3, 0.2, 0.5, 20, 30); এইটা যদি কোন একটা Element কে দেয়া হয়, তাহলে ঐ Element টির Width দ্বিগুণ হয়ে যাবে, element টি Y অক্ষ বরাবর নিচ থেকে উপর ৩০ ডিগ্রি বেঁকে যাবে, X অক্ষ বরাবর 20 ডিগ্রি ডান থেকে বাম দিকে বেঁকে যাবে, element টির Height অর্ধেক হয়ে যাবে, element টি Left থেকে Right এর দিকে 20px সরে যাবে এবং উপর থেকে নিচের দিকে 30px সরে যাবে।

Tips:

দেখো একটা বিষয় সেটা হলো scaleX() এবং scaleY() এই দুটো methods কখনই ব্যবহার করার দরকার নেই, কারন তোমার কাছে তো scale() method আছে । ধরো তোমার শুধু Width দ্বিগুণ করা দরকার, তাহলে তুমি scale(2, 1) এটা ব্যবহার করলেই হলো, Width দ্বিগুণ হবে, কিন্তু height same থাকবে। একইভাবে, তুমি চাইলে skewX() এবং skewY() ব্যবহার না করে শুধু skew() ব্যবহার করতে পারো।

2D Transforms Screenshots

Open 2D Transforms Source Codes in CodePen

CSS 3D Transforms

3D Transform এ Perspective নামে একটা Property আছে, যা সিনেমা হলে দর্শকের মতো কাজ করে, অর্থাৎ আপনি যত দূর থেকে দেখবেন তত ভালো করে দেখতে পাবেন। Perspective এর Value যত বেশি দেয়া হবে তত খুব ভালো করে 3D Animation বুঝা যাবে।
Persective এর Value বাড়িয়ে বা কমিয়ে আমরা চাইলে সুন্দর সুন্দর Design করতে পারি।

RotateX()

RotateX() Method X অক্ষ বরাবর কোন element কে উপর থেকে নিচের দিকে rotate করে।

Screenshot:

RotateY()

RotateY() Method Y অক্ষ বরাবর কোন Element কে বাম থেকে ডান দিকে Rotate করে।

Screenshot:

RotateZ()

RotateZ() Method Z অক্ষ বরাবর কোন Element কে বাম থেকে ডান দিকে rotate করে।
সবচেয়ে মজার বিষয় হলো, 3D তে RotateZ() method আসলে 2D তে হুবুহু Rotate() method এর মতো কাজ করে।

Screenshot:

Book Opening and Door Opening Effect Using RotateY and Tranform Origin

Screenshot:

Book Opening and Door Opening Live Project

Perspective Origin

Perspective Origin হলো এমন একটি property যেটার মাধ্যমে আমরা নির্ধারণ করে দিতে পারি, কোন Angle থেকে Object বা Element টা দেখা হচ্ছে।

এর Value হিসেবে left bottom, top center , right top ইত্যাদি set করা যায়। By default, center center set করা থাকে।

TranslateZ()

TranslateZ(), Z অক্ষ বরাবর অর্থাৎ Display Monitor থেকে চোখের সামনের দিকে আসতে থাকে । যেমন, যে element এ translateZ(60px) দেয়া হবে এর অর্থ হলো ঐ element টি তার বর্তমান Position থেকে সামনের দিকে অর্থাৎ Monitor থেকে তোমার চোখের সামনের দিকে 60px চলে আসবে । বিষয়টি আরও ভালো করে বুঝার জন্য এটা নিয়ে Dev Tool এ Inspect করো।

Screenshot:

ScaleZ()

scaleZ() একা কাজ করতে পারে না। তার সাথে আরও কোন transform property দিয়ে কাজ করতে হয়।
বিষয়টি আরও ভালো করে বুঝার জন্য এটা নিয়ে Dev Tool এ Inspect করো।

Screenshot:

CSS Tranform Style Property

খুব Important একটা Property এটি। আমরা যখন একটা Parent ও Child উভয় Div কেই 3D Property ব্যবহার করতে যাব, তখন Normally Parent এর 3D property কাজ করলেও Child এর 3D property কাজ করবে না। দুটোকেই কাজ করানোর জন্য transform-style property ব্যবহার করা হয়। By default, transform-style এর value flat দেওয়া থাকে।
transform-style property সবসময় Parent Element কে দিতে হয়, child যতই থাকুক না কেন।

Screenshot:

Random Tips

যখনই এরকম প্রয়োজন হবে যে, একটা Box এর মধ্যে এক বা একাধিক elements যেখানে খুশি সেখানে রাখতে চাই, তাহলে box কে Parent এবং বাকি সবাইকে Child Elements দিতে হবে। আর box কে Position: Relative, এবং Childs দের Position: Absolute দিতে হবে।
বিভিন্ন elements (যেমন ঃ image etc) এগুলোর ক্ষেত্রে best practice হলো vh, vw এবং % use করা, এতে full responsive হয়। Pixel এগুলা একটা fixed area নিয়ে নেয়, এর ফলে ছোট screen এ Unexpected behave করে।
CSS এর কোন কিছু ভালো করে বুঝতে না পারলে, Inspect Element করো। এটা best practice to learn and observe new things.

Backface-visibility Property

কোন একটা 3D Object কে Rotate করলে যদি আমরা চাই যে তার পিছনের দিকটা না দেখাতে তাহলে আমরা backface-visibility: hidden করে দিতে পারি, By default এটি visible থাকে।

↥ Go to Top

Chapter-23: CSS Animations

Introduction to CSS Animation
Keyframe
Some Animations Property and Examples
Specify the Speed Curve of the Animation
Animation Fill Mode Property
Animation Shorthand

Introduction to CSS Animation

CSS Animation দ্বারা আমরা চাইলে JavaScript বা কোন Library ব্যবহার না করেই শুধু CSS ব্যবহার করেই বিভিন্ন Animations তৈরি করতে পারি ।
Animation কাকে বলে? এক বা একাধিক Elements কে এক Style থেকে ধীরে ধীরে অন্য Style এ পরিবর্তন করাকেই Animation বলে।
CSS Animation তৈরি করার জন্য Keyframes ব্যবহার করতে হয়। একটা সুনির্দিষ্ট সময়ে কি রকম Style হবে সেটা নির্ধারণ করাই Keyframe এর কাজ।

Keyframe

CSS Animation তৈরি করার জন্য Keyframes ব্যবহার করতে হয়। একটা সুনির্দিষ্ট সময়ে কি রকম Style হবে সেটা নির্ধারণ করাই Keyframe এর কাজ।

Example:

/* The animation code */
@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

এখানে animation-duration 4 seconds. এই 4 Seconds সময়কে যদি 100% এ ভাগ করি, তাহলে 0% থেকে 0% সময় Background Color Red থাকবে, 0% থেকে 25% সময়ে Background Color Yellow থাকবে, 25% থেকে 50% সময় Blue থাকবে, এবং 50% থেকে 100% সময় পর্যন্ত Background Color Green থাকবে।

Some Animations Property and Examples

animation-delay Property দ্বারা কতক্ষন পর Animation শুরু হবে সেটা বলে দেয়া যায়। যেমন, animation-delay: 4s এর অর্থ হলো 4 seconds পর animations শুরু হবে।
animation-iteration-count দ্বারা বলে দেয়া যায়, Animation টি কতবার চলবে। যেমন, animation-iteration-count: 3 এর অর্থ হলো Animation টি 3 বার চলবে। animation-iteration-count: infinite; এর অর্থ Animation টি কখনই থামবে না, চলতেই থাকবে।
animation-direction এই property এর কয়েকটি Value আছে, যেমন,
- reverse Animation টি 0% থেকে 100% না হয়ে, 100% থেকে 0% , অর্থাৎ উল্টাদিকে Animation হয়।
- alternative ব্যবহার করলে প্রথমে সোজাভাবে তারপর উল্টাভাবে animation হবে। এভাবে যতগুলো Iteration দেয়া থাকবে ততবার চলতে থাকবে। alternative-reverse ব্যবহার করলে প্রথমে উল্টাভাবে তারপর সোজাভাবে animation হতে থাকবে। এভাবে যতগুলো Iteration দেয়া থাকবে ততবার চলতে থাকবে।

Specify the Speed Curve of the Animation

animation-time-function এর কয়েকটি value আছে, সেগুলো হলোঃ

linear , Animation এর শুরু থেকে শেষ পর্যন্ত একই Speed এ থাকবে।
ease , Animation এর শুরুতে ও শেষে Speed Slow থাকে এবং মাঝখানে Speed Fast থাকে, এটা By Default Property.
ease-in, Animation এর শুরুতে Speed Slow থাকে।
ease-out, Animation এর শেষে Speed Slow থাকে।
ease-in-out, Animation এর শুরু থেকে শেষ পর্যন্ত Speed Slow থাকে।

Animation Fill Mode Property

Animation শেষ হবার পর Element টা কোন অবস্থায় থাকবে সেটা animation-fill-mode property দ্বারা বলে দেয়া যায়।
animation-fill-mode by defualt none থাকে ।
animation-fill-mode: forwards এর অর্থ হলো Animation শেষে Element টার State হবে Last Kayframe এর Style.
animation-fill-mode: backwards এর অর্থ হলো Animation শেষে Element টার State হবে First Kayframe এর Style.

Animation Shorthand

animation: name duration timing-function delay iteration-count direction fill-mode;

↥ Go to Top

Project-02: Simple Website Layout with Float

Difficulty: Easy (2/10)

You Will Learn

কিভাবে একটি Website এর Layout তৈরি করতে হয় শুধুমাত্র HTML and CSS এর Basic Concept দ্বারা ও float দ্বারা ।

Project Description

এই প্রজেক্টে আমরা একটা Simple Website Layout বানাবো CSS এর Basic Concept ও Float ব্যবহার করে।

Project Screenshot

Click the following image to view Project

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

↥ Go to Top

Chapter-24: CSS Media Queries, Sass (Syntactically Awesome Stylesheets)

CSS Media Queries
Sass (Syntactically Awesome Stylesheets)
Sass Assignment

CSS Media Queries

1. Introduction to CSS Media Queries

CSS Media Queries হল CSS এর একটি technique যা আমাদের website এর layout এবং content কে বিভিন্ন device এর screen size, resolution, orientation (যেমন landscape বা portrait), ইত্যাদির উপর ভিত্তি করে adjust করতে সাহায্য করে। ধরুন, আপনার একটি webpage আছে যা desktop এ সুন্দরভাবে display হচ্ছে, কিন্তু যখন আপনি mobile এ সেটি দেখেন, তখন সবকিছু খুব ছোট দেখা যায়, বা layout ঠিকমতো fit হয় না। এই সমস্যা সমাধানের জন্য Media Queries ব্যবহার করা হয়, যা বিভিন্ন screen size এবং device অনুযায়ী আলাদা আলাদা CSS rules apply করতে দেয়।

একটি responsive website তৈরি করতে Media Queries অপরিহার্য। Responsive মানে এমন একটি website যা বিভিন্ন device এর screen size অনুযায়ী নিজেকে adjust করে। এটি user experience উন্নত করে এবং website কে আরও user-friendly করে তোলে।

2. Why Use Media Queries?

Media Queries ব্যবহার করার মূল কারণ হলো responsive design তৈরি করা। Responsive design এমন একটি approach, যেখানে একটি website বিভিন্ন device এ (mobile, tablet, desktop) ভিন্ন ভিন্ন ভাবে present হয়, কিন্তু content এবং functionality একই থাকে। কেন Media Queries ব্যবহার করা উচিত:

Responsive Design: আপনার website এর layout এবং elements dynamically পরিবর্তন করা যায় device এর screen size এর উপর ভিত্তি করে।
User Experience উন্নত করা: Mobile এবং tablet user এর জন্য বিশেষ করে Media Queries ব্যবহার করে website এর look এবং feel সুন্দর করা যায়।
Mobile-First Approach: এখনকার দিনে বেশিরভাগ user mobile থেকে website access করে। Media Queries ব্যবহার করে, আমরা mobile-first approach নিতে পারি, যা mobile device এ website কে সুন্দরভাবে display করে।
Performance Optimization: Media Queries ব্যবহার করে unnecessary elements hide করা যায় smaller devices এ, যা website এর performance উন্নত করে।

3. Syntax of Media Queries

Media Queries এর মূল syntax টা খুবই simple। এটিতে @media keyword ব্যবহার করা হয়, এবং আমরা media-type এবং media-features ব্যবহার করে নির্দিষ্ট condition নির্ধারণ করি, যেটির উপর ভিত্তি করে CSS rules apply হবে।

@media media-type and (media-feature) {
  /* CSS rules */
}

media-type: এটি কোন media তে CSS apply হবে তা নির্ধারণ করে। যেমন screen, print ইত্যাদি।
media-feature: এটি device এর screen width, height, resolution, orientation ইত্যাদির উপর নির্ভর করে CSS apply করতে সাহায্য করে।

Example:

/* যদি screen width 600px বা এর কম হয়, তখন background color পরিবর্তন হবে */
@media screen and (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

এখানে @media screen and (max-width: 600px) এর অর্থ, যখন screen এর width 600px বা এর কম হবে তখন CSS rule apply হবে। অর্থাৎ, mobile devices এ এই rule প্রযোজ্য হবে, যেখানে screen এর width সাধারণত ছোট।

4. Common Media Query Features

Media Queries এর মাধ্যমে আমরা বিভিন্ন media features ব্যবহার করে device-specific CSS apply করতে পারি। নিচে কিছু সাধারণ media features আলোচনা করা হলো, যা বিভিন্ন ধরনের devices এর সাথে কাজ করতে সাহায্য করে:

4.1 width and height

width এবং height properties ব্যবহার করে আমরা device এর screen width এবং height অনুযায়ী CSS rules apply করতে পারি।

Example:

/* যদি screen এর max-width 768px হয়, তখন CSS rule প্রযোজ্য হবে */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px; /* Mobile এ font size বড় হবে */
  }
}

ব্যাখ্যা: এই query অনুযায়ী, যদি screen এর width 768px বা তার কম হয় (যেমন tablet), তাহলে body এর font size 16px হবে।

4.2 orientation

orientation property ব্যবহার করে আমরা device এর orientation অনুযায়ী CSS rules apply করতে পারি। Orientation বলতে বোঝায়, device টি portrait mode (উচ্চতা বেশি) নাকি landscape mode (প্রস্থ বেশি) তে আছে।

Example:

/* যদি device landscape orientation এ থাকে, তখন background color lightblue হবে */
@media screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

ব্যাখ্যা: এই CSS rule অনুযায়ী, যখন device টি landscape orientation এ থাকে, তখন body এর background color lightblue হবে।

4.3 resolution

resolution property ব্যবহার করে আমরা high-resolution devices এর জন্য specific styles apply করতে পারি, যেমন Retina displays।

Example:

/* যদি device এর resolution কমপক্ষে 300dpi হয়, তখন images এর width 100% হবে */
@media screen and (min-resolution: 300dpi) {
  img {
    width: 100%; /* High-resolution screen এর জন্য images responsive হবে */
  }
}

4.4 aspect-ratio

aspect-ratio property screen এর width এবং height এর ratio অনুযায়ী CSS rules apply করে।

Example:

/* যদি screen এর aspect ratio 16:9 হয়, তাহলে video element এর max-width 100% হবে */
@media screen and (aspect-ratio: 16/9) {
  video {
    max-width: 100%;
  }
}

ব্যাখ্যা: এই rule অনুযায়ী, 16:9 aspect ratio বিশিষ্ট screens (যেমন টেলিভিশন, widescreen monitors) এ video element 100% width নিবে।

5. Using Multiple Media Queries

Multiple Media Queries একসাথে ব্যবহার করে আমরা একাধিক conditions এর উপর ভিত্তি করে CSS rules apply করতে পারি। Media queries কে chain করা যায় and, or, এবং not operators ব্যবহার করে।

Example:

/* যদি screen এর width 600px থেকে 1200px এর মধ্যে হয়, তাহলে background color lightgreen হবে */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}

ব্যাখ্যা: এখানে screen এর width যদি 600px এবং 1200px এর মধ্যে হয়, তাহলে body এর background color lightgreen হবে। অর্থাৎ, এই range এর মধ্যে থাকা screens এর জন্য এই rule apply হবে।

6. Real-life Example of Using Media Queries

Scenario: Creating a Responsive Layout for Multiple Devices

ধরুন, আপনি এমন একটি webpage তৈরি করতে চান যেখানে mobile, tablet, এবং desktop devices এর জন্য responsive design থাকবে। নিচে একটি উদাহরণ দেওয়া হলো:

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Layout</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      header {
        background-color: #333;
        color: white;
        padding: 10px;
        text-align: center;
      }

      main {
        padding: 20px;
      }

      /* Default styles for desktop devices */
      .container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
      }

      .sidebar {
        background-color: #f4f4f4;
        padding: 20px;
      }

      .content {
        background-color: #e4e4e4;
        padding: 20px;
      }

      /* Styles for tablets (768px or less) */
      @media screen and (max-width: 768px) {
        .container {
          grid-template-columns: 1fr;
        }
      }

      /* Styles for mobile devices (600px or less) */
      @media screen and (max-width: 600px) {
        header {
          font-size: 1.2em;
        }

        main {
          padding: 10px;
        }

        .sidebar,
        .content {
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Responsive Web Design</h1>
    </header>
    <main class="container">
      <aside class="sidebar">
        <h2>Sidebar</h2>
        <p>This is the sidebar content.</p>
      </aside>
      <section class="content">
        <h2>Main Content</h2>
        <p>This is the main content of the page.</p>
      </section>
    </main>
  </body>
</html>

Explanation:

Desktop Layout: Default grid layout ব্যবহার করে sidebar এবং main content কে side-by-side দেখানো হয়েছে।
Tablet Layout: 768px বা এর চেয়ে ছোট screens এর জন্য grid layout কে one-column layout এ পরিবর্তন করা হয়েছে।
Mobile Layout: 600px বা এর চেয়ে ছোট screens এর জন্য padding কমানো হয়েছে এবং header এর font size adjust করা হয়েছে।

Sass (Syntactically Awesome Stylesheets)

Table of Contents

Introduction to Sass
Why Use Sass?
Installation and Setup
Sass Syntax
Real-life Example of Using Sass
SCSS to CSS Conversion: A Project Example
Conclusion

1. Introduction to Sass

Sass (Syntactically Awesome Stylesheets) হলো CSS এর একটি extension, যা CSS code আরও সহজ, maintainable এবং powerful করতে সহায়ক। এটি আপনাকে variables, nesting, mixins, inheritance, functions, এবং আরও অনেক সুবিধা প্রদান করে, যা traditional CSS এ পাওয়া যায় না। এখানে আমরা Sass এর বিভিন্ন ফিচার এবং ব্যবহারিক উদাহরণ আলোচনা করব।

2. Why Use Sass?

বড় বা ছোট যেকোনো project এ Sass ব্যবহার করার অনেক কারণ আছে, বিশেষ করে CSS এর limitations কাটিয়ে ওঠার জন্য। নিচে কিছু কারণ আলোচনা করা হলো:

Code Reuse: Sass এ variables এবং mixins ব্যবহার করে একই ধরনের CSS properties বারবার লিখতে হয় না, আমরা এগুলো একবার define করে অনেক জায়গায় ব্যবহার করতে পারি।

Example:
```
$primary-color: #3498db;   // Variable
$font-size-large: 18px;

body {
    color: $primary-color;
    font-size: $font-size-large;
}
```
Maintainability: বড় projects এ অনেক CSS code থাকে, যা manage করা কঠিন হতে পারে। Sass এর nesting, partials, এবং inheritance এর মতো feature গুলো এই code কে manageable এবং clean করে রাখে।
Modular Code: Partials এবং Import feature গুলো code কে ছোট ছোট modules এ ভাগ করে রাখে, যা large stylesheets তৈরি করার জন্য খুবই উপযোগী।
Efficiency: Sass এর calculations এবং functions ব্যবহার করে CSS values dynamically generate করা যায়, যেমন width বা padding এর উপর ভিত্তি করে অন্য properties change করা।
Better Structure: Nested rules এবং reusable components এর মাধ্যমে complex CSS structure সহজে তৈরি করা যায়।

3. Installation and Setup

Sass ব্যবহার শুরু করার আগে এটি আপনার system এ install করতে হবে। নিচে কয়েকটি পদ্ধতি দেখানো হলো:

Method 1: Install Sass Using Node.js/npm

আপনার system এ Node.js এবং npm install করা থাকলে, নিচের command টি run করুন:
```
npm install -g sass
```
Install করার পর, আপনি terminal এ sass command দিয়ে Sass files কে compile করতে পারবেন:
```
sass input.scss output.css
```
Explanation: এখানে input.scss হচ্ছে Sass file এবং output.css হচ্ছে final CSS file। Sass automatically SCSS file কে CSS এ compile করে দেয়।

Method 2: Using a GUI Preprocessor (Koala, Scout)

যদি আপনি command line ব্যবহার না করতে চান, তাহলে Koala বা Scout এর মতো graphical tools ব্যবহার করতে পারেন, যা সহজে Sass files কে compile করে CSS এ রূপান্তরিত করে।

4. Sass Syntax

Sass এর SCSS syntax সহজে CSS এর মতোই ব্যবহার করা যায়, যেখানে আমরা variables, nesting, mixins, inheritance ইত্যাদি সুবিধা ব্যবহার করতে পারি। নিচে নতুন দুটি টপিক If/Else এবং Loop & Interpolation ব্যাখ্যা করা হয়েছে।

4.1 Nesting

Nesting Sass এর একটি খুবই জনপ্রিয় feature, যেখানে আমরা CSS rules কে HTML structure এর অনুরূপ ভাবে লিখতে পারি। সাধারণত HTML elements একে অপরের মধ্যে nested থাকে, আর Sass এর nesting feature এই relationship কে সহজে প্রকাশ করতে সাহায্য করে।

Example:

nav {
    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            display: inline-block;

            a {
                text-decoration: none;
                color: #333;

                &:hover {
                    color: #000;
                }
            }
        }
    }
}

Explanation:

আমরা HTML structure অনুযায়ী CSS rules কে nested করেছি। এটি CSS code কে পরিষ্কার এবং structured করে।
&:hover selector a element এর hover state handle করছে, যেখানে & current element কে নির্দেশ করছে।

4.2 Variables

Sass এ variables ব্যবহার করে আমরা বারবার একই value লিখতে না গিয়ে একবার define করে multiple জায়গায় ব্যবহার করতে পারি।

Example:

$primary-color: #3498db;  // Primary color variable
$padding-size: 15px;

button {
    background-color: $primary-color;
    padding: $padding-size;
    border: none;
    border-radius: 5px;
    color: white;
}

Explanation:

$primary-color এবং $padding-size নামে variables তৈরি করা হয়েছে।
এরপর, button element এ এগুলো ব্যবহার করা হয়েছে। ফলে, যদি পরে color বা padding change করতে হয়, কেবল variable change করলেই হবে, পুরো code change করতে হবে না।

4.3 Partials and Import

বড় projects এ অনেক CSS code থাকে। এই code কে ছোট ছোট অংশে ভাগ করে manage করার জন্য Partials এবং Import feature খুবই কার্যকর।

Example:

// _variables.scss
$primary-color: #3498db;
$padding-size: 15px;

// _buttons.scss
button {
    background-color: $primary-color;
    padding: $padding-size;
    border: none;
    color: white;
}

// main.scss
@import 'variables';
@import 'buttons';

Explanation:

_variables.scss এবং _buttons.scss নামে দুইটি partial file তৈরি করা হয়েছে।
main.scss file এ এই দুটি partial file কে import করা হয়েছে।
এই পদ্ধতিতে বড় stylesheets গুলোকে ছোট অংশে ভাগ করে রাখা যায়, যা management এবং maintenance সহজ করে।

4.4 Mixins

Mixins Sass এর reusable code block তৈরি করতে ব্যবহৃত হয়। যখন আমরা একই CSS code বারবার লিখতে চাই না, তখন mixins ব্যবহার করে সেই code কে একবার define করে পরে বিভিন্ন জায়গায় apply করা যায়।

Example:

@mixin button-styles($color) {
    background-color: $color;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
}

.primary-btn {
    @include button-styles(#3498db);
}

.secondary-btn {
    @include button-styles(#2ecc71);
}

Explanation:

এখানে button-styles নামে একটি mixin তৈরি করা হয়েছে, যা button এর common styles define করে।
পরে, primary-btn এবং secondary-btn class গুলোতে এই mixin apply করা হয়েছে বিভিন্ন color দিয়ে।

4.5 Inheritance

Sass এ Inheritance ব্যবহার করে আমরা একটি class এর styles অন্য class এ extend করতে পারি। এতে code repetition কমে এবং CSS কে আরো modular করা যায়।

Example:

%button-base {
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
}

.primary-btn {
    @extend %button-base;
    background-color: #3498db;
    color: white;
}

.secondary-btn {
    @extend %button-base;
    background-color: #2ecc71;
    color: white;
}

Explanation:

%button-base নামে একটি placeholder তৈরি করা হয়েছে, যেটি button এর common styles ধারণ করে।
পরে, primary-btn এবং secondary-btn class এ এই placeholder কে extend করা হয়েছে, এবং button-specific styles যোগ করা হয়েছে।

4.6 Functions

Sass এ functions ব্যবহার করে CSS properties এর উপর calculation করা যায়, যা CSS এ সম্ভব নয়। Functions এর মাধ্যমে dynamic CSS তৈরি করা যায়।

Example:

@function calculate-padding($padding, $factor) {
    @return $padding * $factor;
}

.container {
    padding: calculate-padding(10px, 2);  // Returns 20px
}

Explanation:

calculate-padding নামে একটি function তৈরি করা হয়েছে, যা padding এর উপর calculation করে।
পরে container class এ function ব্যবহার করে padding এর value set করা হয়েছে।

4.7 If/Else

Sass এ If/Else statement ব্যবহার করে CSS properties এর উপর conditions apply করা যায়। এটি condition অনুযায়ী different CSS rules apply করতে সাহায্য করে।

Example:

$theme: dark;

body {
  @if $theme ==

 dark {
    background-color: #333;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

Explanation:

এখানে $theme নামে একটি variable তৈরি করা হয়েছে।
If condition এর মাধ্যমে check করা হচ্ছে, যদি $theme এর value dark হয়, তাহলে background এবং color সেট করা হবে। অন্যথায়, else block এর code run হবে।

4.8 Loop & Interpolation

Sass এ loops ব্যবহার করে আমরা repetitive CSS code generate করতে পারি। সাধারণত CSS এ একই code বারবার লিখতে হয়, কিন্তু Sass এর loops এবং interpolation ব্যবহার করে এটি এড়ানো যায়। Sass এর loops দুই প্রকার: for loop এবং each loop। Interpolation এর মাধ্যমে dynamic selectors এবং properties তৈরি করা যায়।

For Loop Example:

@for $i from 1 through 5 {
  .margin-#{$i} {
    margin: #{$i * 10}px;
  }
}

Explanation:

এখানে @for loop ব্যবহার করে 1 থেকে 5 পর্যন্ত একটি loop চালানো হয়েছে।
#{$i} এর মাধ্যমে class name এবং margin dynamically তৈরি করা হয়েছে। এটি output করবে .margin-1, .margin-2, ইত্যাদি।

Each Loop Example:

$colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
  }
}

Explanation:

এখানে @each loop ব্যবহার করে একটি map এর উপর loop চালানো হয়েছে, যেখানে key-value pair ব্যবহার করা হয়েছে।
Interpolation এর মাধ্যমে .btn-primary, .btn-secondary ইত্যাদি class এবং তাদের background-color generate করা হয়েছে।

5. Real-life Example of Using Sass

Scenario: Responsive Navbar Design Using Sass Features

একটি simple responsive navbar তৈরি করা হবে, যেখানে variables, mixins, loops, এবং if/else ব্যবহার করা হবে।

SCSS Code:

// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$breakpoint: 768px;
$menu-items: ("Home", "About", "Services", "Contact");

// Mixin for responsive design
@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

// Navbar Styles
nav {
  background-color: $primary-color;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    
    @include responsive($breakpoint) {
      flex-direction: column;
    }

    @each $item in $menu-items {
      li {
        margin-right: 20px;
        a {
          color: white;
          text-decoration: none;
        }

        &:hover {
          color: $secondary-color;
        }
      }
    }
  }
}

6. SCSS to CSS Conversion: A Project Example

নীচে একটি বড় project এর উদাহরণ দেয়া হলো, যেখানে SCSS থেকে CSS এ কনভার্ট করার পর দেখানো হয়েছে কীভাবে CSS output হবে।

SCSS Code:

// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-large: 18px;
$font-size-small: 14px;
$breakpoint: 768px;

// Mixin for responsive text
@mixin responsive-text {
  font-size: $font-size-large;
  @media (max-width: $breakpoint) {
    font-size: $font-size-small;
  }
}

// Button Styles
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &.primary {
    background-color: $primary-color;
    color: white;
  }

  &.secondary {
    background-color: $secondary-color;
    color: white;
  }

  @include responsive-text;
}

// If/Else Example for theme
$theme: dark;

body {
  @if $theme == dark {
    background-color: #333;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

CSS Output (Compiled from SCSS):

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}
@media (max-width: 768px) {
  button {
    font-size: 14px;
  }
}
button.primary {
  background-color: #3498db;
  color: white;
}
button.secondary {
  background-color: #2ecc71;
  color: white;
}

body {
  background-color: #333;
  color: white;
}

Explanation:

SCSS থেকে CSS এ কনভার্ট করার পরে আমরা দেখতে পাই যে সব SCSS file একত্রিত হয়ে single CSS file তৈরি হয়েছে।
এখানে SCSS এর variables, mixins, এবং nesting automatically CSS rules এ কনভার্ট হয়েছে।

Step 6: Creating a Project with Multiple SCSS Files

নিচে একটি SCSS-based প্রোজেক্ট তৈরি করার পুরো প্রক্রিয়া দেখানো হয়েছে। এই প্রজেক্টে কয়েকটি SCSS file তৈরি করা হয়েছে এবং শেষে সেগুলো main.scss এ import করা হয়েছে।

Project Structure:

project-folder/
│
├── scss/
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _header.scss
│   ├── _footer.scss
│   └── main.scss
│
└── css/
    └── main.css (Generated from main.scss)

Step 1: _variables.scss

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-large: 18px;
$font-size-small: 14px;
$breakpoint: 768px;

Step 2: _mixins.scss

// _mixins.scss
@mixin responsive-text {
  font-size: $font-size-large;

  @media (max-width: $breakpoint) {
    font-size: $font-size-small;
  }
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Step 3: _header.scss

// _header.scss
header {
  background-color: $primary-color;
  padding: 20px;

  h1 {
    color: white;
    @include responsive-text;
  }

  nav {
    ul {
      list-style: none;
      padding: 0;
      display: flex;

      li {
        margin-right: 15px;

        a {
          color: white;
          text-decoration: none;
          
          &:hover {
            color: $secondary-color;
          }
        }
      }
    }
  }
}

Step 4: _footer.scss

// _footer.scss
footer {
  background-color: $secondary-color;
  padding: 20px;
  text-align: center;
  color: white;

  p {
    font-size: $font-size-small;
  }
}

Step 5: main.scss

// main.scss
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';

SCSS to CSS Conversion Command:

sass scss/main.scss css/main.css

Generated CSS (main.css):

header {
  background-color: #3498db;
  padding: 20px;
}

header h1 {
  color: white;
  font-size: 18px;
}

@media (max-width: 768px) {
  header h1 {
    font-size: 14px;
  }
}

header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
}

header nav ul li {
  margin-right: 15px;
}

header nav ul li a {
  color: white;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #2ecc71;
}

footer {
  background-color: #2ecc71;
  padding: 20px;
  text-align: center;
  color: white;
}

footer p {
  font-size: 14px;
}

Sass কিভাবে প্রজেক্টকে সহজ করেছে?

Modular Structure: Sass ব্যবহার করে আমরা প্রজেক্টের CSS কে ছোট ছোট SCSS ফাইলে ভাগ করেছি, যা বড় প্রজেক্ট গুলোকে সহজে manage করতে সাহায্য করে। Header, footer, এবং অন্যান্য section গুলো আলাদা SCSS ফাইলে রাখা হয়েছে, যা কোডকে পরিষ্কার ও রিডেবল করে।
Variables: SCSS এ variables ব্যবহার করে একই value বারবার লিখতে হয়নি। Color এবং font-size এর মতো common values গুলো একবার define করে বিভিন্ন স্থানে ব্যবহার করা হয়েছে।
Mixins এবং Reusability: SCSS এর mixins ব্যবহার করে আমরা বারবার একই CSS properties লিখতে হয়নি। Responsive typography এবং flexbox center করার জন্য mixins তৈরি করা হয়েছে, যা বিভিন্ন স্থানে পুনরায় ব্যবহার করা হয়েছে।

4

. Maintainability: একবার যদি variables বা mixins change করতে হয়, তাহলে পুরো প্রজেক্ট জুড়ে পরিবর্তনটি reflect হয়। ফলে, পুরো প্রজেক্ট manage করা সহজ হয়।

Conclusion

Sass CSS এর উপরে ভিত্তি করে একটি শক্তিশালী extension, যা বড় এবং জটিল projects এর জন্য CSS code কে সহজ, maintainable, এবং reusable করে তোলে। Variables, mixins, functions, loops, এবং conditions এর মাধ্যমে Sass ব্যবহার করে modern, responsive এবং maintainable CSS code তৈরি করা যায়। Beginner দের জন্য এটি CSS এর তুলনায় কিছুটা advanced হলেও, একবার Sass শেখা হয়ে গেলে CSS নিয়ে কাজ করা অনেক সহজ হয়ে যায়।

Sass Assignment

Sass Project: Simple Responsive Card Layout – Step-by-Step Instructions

Step 1: প্রোজেক্ট ফাইল সেটআপ:

একটি নতুন ফোল্ডার তৈরি করুন responsive-card-project নামে।
এর মধ্যে index.html, styles.scss, এবং styles.css নামে তিনটি ফাইল তৈরি করুন।

Step 2: HTML কোড লেখা:

index.html ফাইলে Basic HTML Structure লিখুন।
এরপর card-container নামে একটি ডিভের মধ্যে ৩টি card এলিমেন্ট যোগ করুন। প্রতিটি Card এ একটি Image, Title, Description, এবং একটি Button থাকবে।
স্টাইল করার জন্য styles.css ফাইলটি HTML এ যুক্ত করুন।

Step 3: Sass ভ্যারিয়েবল ডিক্লেয়ার:

styles.scss ফাইলের শুরুতে Color এবং Spacing এর জন্য কিছু Sass Variables ডিক্লেয়ার করুন। যেমন: প্রাইমারি কালার, সেকেন্ডারি কালার, ব্যাকগ্রাউন্ড কালার, প্যাডিং ইত্যাদি।

Step 4: Mixin তৈরি:

একটি Mixin তৈরি করুন যেটা ভিন্ন ভিন্ন ডিভাইসের জন্য মিডিয়া কুয়েরি সেট করতে সাহায্য করবে।
উদাহরণস্বরূপ, একটি Mixin বানান যা 'small' এবং 'medium' ডিভাইসের জন্য Responsive ডিজাইন করবে।

Step 5: Card Layout এর স্টাইলিং:

.card-container ক্লাসের জন্য Flexbox ব্যবহার করে লেআউট তৈরি করুন।
.card ক্লাসের জন্য ব্যাকগ্রাউন্ড কালার, প্যাডিং, বর্ডার রেডিয়াস, এবং শ্যাডো যোগ করুন।
নেস্টিং ব্যবহার করে .card এর ভেতরের .card-image, .card-title, .card-description, এবং .card-button এর জন্য স্টাইল সেট করুন।

Step 6: Responsive Design এর জন্য Media Queries:

আগের Step-এ তৈরি করা Mixin ব্যবহার করে মিডিয়া কুয়েরি প্রয়োগ করুন।
ছোট স্ক্রীনে .card-container এর লেআউট পরিবর্তন করে কলাম আকারে দেখান।

Step 7: Button এর Hover Effect:

.card-button এর জন্য Hover Effect তৈরি করুন, যেখানে Button-এর ব্যাকগ্রাউন্ড কালার ডার্ক হবে।
এই কাজটি করার জন্য Sass এর Built-in Function (darken) ব্যবহার করুন।

Step 8: Sass কোড কম্পাইল:

styles.scss ফাইলটি CSS এ কম্পাইল করুন এবং styles.css ফাইলটিতে সেভ করুন।
টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:
```
sass styles.scss styles.css
```

↥ Go to Top

Project-03: Simple Website Layout with Flexbox

Difficulty: Easy (2/10)

You Will Learn

কিভাবে একটি Website এর Layout তৈরি করতে হয় CSS Flexbox দ্বারা ।
যদিও এই কাজটা CSS Grid এর সাহায্যে খুব সহজেই তৈরি করা যায়, কারন CSS Flexbox হলো One dimensional Concept, যেখানে CSS Grid এর সাহায্যে খুব সহজেই 2-dimensional Layout তৈরি করা যায়।

Project Description

এই প্রজেক্টে আমরা একটা Simple Website Layout বানাবো CSS এর Flexbox ব্যবহার করে। যদিও এই কাজটা CSS Grid এর সাহায্যে খুব সহজেই তৈরি করা যায়, কারন CSS Flexbox হলো One dimensional Concept, যেখানে CSS Grid এর সাহায্যে খুব সহজেই 2-dimensional Layout তৈরি করা যায়।

Project Screenshot

Click the following image to view Project

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

Back to Project Section

Project-04: Simple Website Layout with CSS Grid

Difficulty: Easy (2/10)

You Will Learn

কিভাবে একটি Website এর Layout তৈরি করতে হয় CSS Grid দ্বারা ।
CSS Grid দ্বারা খুব সহজেই একটা Website এর Layout তৈরি করা যায়, যেখানে CSS Float বা CSS Flexbox দ্বারা Layout তৈরি করতে বেশ বেগ পেতে হয়। CSS Grid কতোটা কাজের, সেটা এই প্রজেক্ট করলে আরও স্পষ্ট হয়ে যাবে।
এই প্রজেক্টে আরও শিখতে পারবেন, grid-template-area কতোটা Amazing একটা Property.

Project Description

এই প্রজেক্টে আমরা একটা Simple Website Layout বানাবো CSS এর Grid ব্যবহার করে। Float ব্যবহার করা আধুনিক Web Development এ অনেকটাই Deprecated. আবার যে কাজ CSS Flexbox দিয়ে তৈরি করা যায়, সে কাজ CSS Grid দিয়েও তৈরি করা যায় এবং CSS Flexbox এর চেয়ে অনেক সহজেই তৈরি করা যায় । তাই আমি বলবো, CSS Float বা CSS Flexbox এর চেয় CSS Grid ব্যবহার করা সবচেয়ে উত্তম এবং আধুনিক Web Development এ CSS Grid ব্যবহার করতে Encourage করা হয়।

Project Screenshot

Click the following image to view Project

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

Back to Project Section

Project-05: Simple 3D Animation Page

Difficulty: Easy (3/10)

You Will Learn

কিভাবে 2D and 3D Transforms ব্যবহার করে 2D and 3D Elements/Objects/Projects বানানো যায়।

Project Description

এই প্রজেক্টে আমরা একটা Simple 3D Animation Page বানাবো। যেখানে Background এ একটা image থাকবে, এবং তার সামনে 3 টা Elements থাকবে। Elements 3 টা কিভাবে 3D Space এ আছে এবং 2D/3D Transform Property ব্যবহার করে কিভাবে এই কাজটা করা হলো তা প্রোজেক্ট টি করার মাধ্যমে শিখা যাবে ।

Project Screenshot

Click the following image to view Project

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes