My Terrarium
``` **ഈ കോഡ് ചെയ്യുന്നത്:** - `` എലമെന്റിന് നേരിട്ട് ചുവപ്പ് നിറം നൽകുന്നു ഇൻലൈൻ സ്റ്റൈൽ ഉപയോഗിച്ച്
- `style` ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് CSS HTML നെ അഭിസംബോധനം ചെയ്യുന്നു
- ഈ പ്രത്യേക നീതിനിയമത്തിന് ഏറ്റവും ഉയർന്ന മുൻഗണന സൃഷ്ടിക്കുന്നു
അടുത്തത്, നിന്റെ `style.css` ഫയലിൽ താഴെ കാണുന്ന നിയമം ചേർക്കൂ:
```css
h1 {
color: blue;
}
```
**മുകളിൽ നാം:**
- എല്ലാ `` എലമെന്റുകൾക്ക് CSS നിയമം നിർവചിച്ചു
- ബാഹ്യ സ്റ്റൈൽഷീറ്റിൽ നീല നിറമാക്കി ടെക്സ്റ്റ് നിറം സജ്ജമാക്കി
- ഇൻലൈൻ സ്റ്റൈൽസിന തികച്ചും കുറഞ്ഞ മുൻഗണന സൃഷ്ടിച്ചു
✅ **ജ്ഞാനപരിശോധന**: നിന്റെ വെബ് ആപ്പിൽ ഏതു നിറമാണ് പ്രത്യക്ഷപ്പെടുന്നത്? എന്തുകൊണ്ട് ആ നിറം ജയിക്കുന്നുവെന്ന് വിശകലനം ചെയ്യുക? സ്റ്റൈലുകൾ മറികടക്കേണ്ട സാഹചര്യങ്ങൾ ഉണ്ടാക്കാമോ?
```mermaid
flowchart TD
A["ബ്രൗസർ h1 ഘടകവുമായി കാണുന്നു"] --> B{"ഇൻലൈൻ സ്റ്റൈലുകൾ പരിശോധിക്കുക"}
B -->|കണ്ടുപിടിച്ചു| C["style='color: red'"]
B -->|ഒന്നും ഇല്ല| D{"ID നിബന്ധനകൾ പരിശോധിക്കുക"}
C --> E["ചുവപ്പ് നിറം പ്രയോഗിക്കുക (1000 പോയിന്റ്)"]
D -->|കണ്ടുപിടിച്ചു| F["#heading { color: green }"]
D -->|ഒന്നും ഇല്ല| G{"ക്ലാസ് നിയമങ്ങൾ പരിശോധിക്കുക"}
F --> H["പച്ച നിറം പ്രയോഗിക്കുക (100 പോയിന്റ്)"]
G -->|കണ്ടുപിടിച്ചു| I[".title { color: blue }"]
G -->|ഒന്നുമില്ല| J{"ഘടക നിയമങ്ങൾ പരിശോധിക്കുക"}
I --> K["നീല നിറം പ്രയോഗിക്കുക (10 പോയിന്റ്)"]
J -->|കണ്ടുപിടിച്ചു| L["h1 { color: purple }"]
J -->|ഒന്നും ഇല്ല| M["ബ്രൗസർ ഡിഫോൾട്ട് ഉപയോഗിക്കുക"]
L --> N["ഉരുളയിലപ്പurple നിറം പ്രയോഗിക്കുക (1 പോയിന്റ്)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **CSS മുൻഗണന ക്രമം (ഉയർന്നതില്നിന്ന് താഴേക്ക്):**
> 1. **ഇൻലൈൻ സ്റ്റൈൽസ്** (style ആട്രിബ്യൂട്ട്)
> 2. **IDs** (#myId)
> 3. **ക്ലാസ്സുകൾ** (.myClass) & ആട്രിബ്യൂട്ടുകൾ
> 4. **എലമെന്റ് സെലക്ടറുകൾ** (h1, div, p)
> 5. **ബ്രൗസർ ഡിഫോൾട്ടുകൾ**
## CSS പാരമ്പര്യം പ്രവർത്തനം
CSS പാരമ്പര്യം ജൈവവശേഷിയുപോലെയാണ് — ഏതാനും പ്രോപ്പർട്ടികൾ മാതൃ എലമെന്റുകളിൽ നിന്നു പകർന്നു കിട്ടുന്നു. ഉദാഹരണത്തിന്, ബോഡിയുടെ ഫോണ്ട് ഫാമിലി സജ്ജമാക്കിയാൽ, അകത്ത് ഉള്ള എല്ലാ ടെക്സ്ടുകളും സ്വയം ആ ഫോണ്ട് ഉപയോഗിക്കും. ഇത് ഹാബ്സ്ബർഗ് കുടുംബത്തിന്റെ പ്രത്യേക ജോലിൻ പോലെയാണ്, ഓരോ തലമുറയ്ക്കും വ്യക്തമായിരുന്നു, വ്യക്തിക്ക് പ്രത്യേകമായി പറയാതെ.
എന്നാൽ എല്ലാം പാരമ്പര്യമല്ല. ടെക്സ്റ്റ് സ്റ്റൈലുകൾ (ഫോണ്ട്, നിറങ്ങൾ) പാരമ്പര്യം കൈവരിക്കുമ്പോൾ, ലേയൗട്ട് സ്വഭാവങ്ങൾ (മാർജിൻ, ബോർഡർ) പാരമ്പര്യമല്ല. കുട്ടികൾ മാതാപിതാക്കളുടെ ഫാഷൻ ഇഷ്ടങ്ങൾ പകർത്താതെ ശരീരഗുണങ്ങൾ പകർത്തുന്നതുപോലെ.
### ഫോണ്ട് പാരമ്പര്യം കാണുക
`` എലമെന്റിന് ഫോണ്ട് ഫാമിലി സജ്ജമാക്കുക:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**ഇവിടെ സംഭവിക്കുന്നത്:**
- `` ലക്ഷ്യമിട്ട് പേജിന്റെ മൊത്തം ഫോണ്ട് ഫാമിലി സെറ്റ് ചെയ്യുന്നു
- മികച്ച ബ്രൗസർ പൊരുത്തത്തിനായി ഫാൾബാക്ക് ഉൾപ്പെടെയുള്ള ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിക്കുന്നു
- വ്യത്യസ്ത ഒഎസ്-കളിൽ മികച്ച ദൃശ്യപരതയ്ക്കായി ആധുനിക സിസ്റ്റം ഫോണ്ട് ഉപയോഗിക്കുന്നു
- നിശ്ചയിച്ച് ഇല്ലാത്തപ്പോൾ എല്ലാ ചൈൽഡ് എലമെന്റുകളും ഫോണ്റ് പാരമ്പര്യം ഏറ്റെടുക്കുന്നു
നിന്റെ ബ്രൗസറിന്റെ ഡിസ്ക്കമ്പോസർ ടൂൾസ് (F12) തുറക്കൂ, Elements ടാബ് തിരഞ്ഞെടുക്കൂ, ``-നെ പരിശോധിക്കൂ. ഇത് `body`-യിൽ നിന്നുള്ള ഫോണ്ട് ഫാമിലി പാരമ്പര്യമായി സ്വീകരിച്ചത് കാണാം:
✅ **പരീക്ഷണമെടുത്ത് നോക്കൂ**: ``-യ്ക്ക് `color`, `line-height`, അല്ലെങ്കിൽ `text-align` പോലുള്ള മറ്റേതെങ്കിലും പാരമ്പര്യ സ്വഭാവങ്ങൾ സജ്ജമാക്കൂ. നിന്റെ തലക്കെട്ടിനും മറ്റ് എലമെന്റുകൾക്കും എന്ത് സംഭവിക്കുന്നു?
> 📝 **പാരമ്പര്യം കൈവരിക്കുന്ന പ്രോപ്പർട്ടികൾ**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **പാരമ്പര്യമില്ലാത്ത പ്രോപ്പർട്ടികൾ**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **പാഠത്തിന്റെ അവലോകനം**
**CSS അടിസ്ഥാന മനസ്സിലാക്കൽ**: സെലക്ടറുകളിലേക്ക് മുന്നോട്ട് പോകുന്നതിന് മുൻപ് ഉറപ്പാക്കുക:
- ✅ കാസ്കേഡും പാരമ്പര്യവും തമ്മിലുള്ള വ്യത്യാസം വ്യക്തമാക്കാൻ കഴിയുന്നു
- ✅ പ്രത്യേകത സംഘർഷത്തിൽ ഏതു സ്റ്റൈൽ വിജയിക്കും ബോധ്യപ്പെടുത്താൻ കഴിയും
- ✅ ഏത് പ്രോപ്പർട്ടികൾ പാരമ്പര്യം കൈവരിക്കുന്നുവെന്ന് തിരിച്ചറിയുന്നു
- ✅ CSS ഫയലുകൾ HTML-നൊപ്പം ശരിയായി ബന്ധിപ്പിക്കുന്നു
**പെട്ടെന്നുള്ള പരിശോധന**: ഈ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ, `` ഉള്ളിൽ ഉള്ള ``-ന്റെ നിറം എന്താകും?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു)*
## CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക
CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്.
CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ.
### എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ)
എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ഈ സ്റ്റൈലുകൾ അത്രയ്ക്കായി:**
- പേജ് മുഴുവൻ ഏകീകൃത ടൈപ്പോഗ്രഫി കാണിക്കാൻ `body` സെലക്ടർ ഉപയോഗിക്കുന്നു
- മികച്ച നിയന്ത്രണത്തിനായി ബ്രൗസറിന്റെ ഡീഫോൾട്ട് മാർജിനുകളും പാഡിംഗുകളും നീക്കം ചെയ്യുന്നു
- എല്ലാ ഹെഡിംഗ് എലമെന്റുകളെയും നിറം, സന്ധി, അലൈന്മെന്റ് നൽകുന്നു
- സ്കെയിലബിൾ, ആക്സസിബിൾ ഫോണ്ട് വലുപ്പത്തിന് `rem` യൂണിറ്റ് ഉപയോഗിക്കുന്നു
എങ്കിലും, എലമെന്റ് സെലക്ടറുകൾ സാധാരണ സ്റ്റൈലിംഗിന് നല്ലതായിരിക്കുമ്പോൾ, ഓരോ ടെററിയം ചെടികൾ പോലുള്ള പ്രത്യേക ഘടകങ്ങൾക്ക് കൂടുതൽ പ്രത്യേക സെലക്ടറുകൾ ആവശ്യമായിരിക്കും.
### ഏകാന്ത എലമെന്റുകൾക്കായി ID സെലക്ടറുകൾ
ID സെലക്ടറുകൾ `#` ചിഹ്നം ഉപയോഗിച്ച് പ്രത്യേക `id` ഉള്ള എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു. പേജിൽ ഓരോ ID ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്നറുകൾ) ഇവ നല്ലതാണ്.
ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**ഇവിടെ സംഭവിക്കുന്നത്:**
- `absolute` പൊസിഷനിംഗുമായി കണ്ടെയ്നറുകൾ ഇടത്തും വലത്തും നീക്കുന്നു
- സ്ക്രീൻ വലിപ്പത്തിന് അനുസരിച്ച് `vh` (viewport height) യൂണിറ്റിൽ ഉയരം നൽകുന്നു
- പാഡിംഗിൽ ഉൾപ്പെടുത്തിയവയ്ക്ക് `box-sizing: border-box` ഉപയോഗിക്കുന്നു
- സോഴ്യമായ ജൂലിയൻ മൂല്യങ്ങളിൽ നിന്നുള്ള `px` യൂണിറ്റുകൾ നീക്കി ലക്ഷ്യമിടുന്നു
- കഠിനമായ കറുപ്പുപകരം കണ്ണിന് ഇതിന് സൗകര്യമുള്ള സബ്റ്റിൽ പശ്ചാത്തല നിറം നൽകുന്നു
✅ **കോഡ് ഗുണമേന്മ പരിശോധന**: ഈ CSS DRY (Don't Repeat Yourself) നിയമം ലംഘിക്കുന്നതാണ് കാണുന്നത്. ഒരു ID ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ?
**മികച്ച സമരയോഗം:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### പുനരുപയോഗപ്പെടുത്താവുന്ന ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടറുകൾ
ക്ലാസ് സെലക്ടറുകൾ `.` ചിഹ്നം ഉപയോഗിച്ച് ഒടുക്കം ഒരു മുതിർന്ന ഇലമെന്റിന് പലത്തവണ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം. ID-കളുടെ വ്യത്യാസം, ക്ലാസുകൾ പേജിലുടനീളം വീണ്ടും ഉപയോഗിച്ചേക്കാം, അതുകൊണ്ട് സ്ഥിരമായ സ്റ്റൈലിംഗ് മാതൃകകൾക്കായി ഇവ ഏറ്റവും അനുയോജ്യമാണ്.
നമ്മുടെ ടെററിയത്തിൽ ഓരോ ചെടിക്കും സമാനമായ സ്റ്റൈലിംഗ് ആവശ്യമായിരിക്കുന്നു എങ്കിലും വ്യക്തിഗത പൊസിഷനിംഗ് വേണം. നാം പുനരുപയോഗ ക്ലാസ്സുകളും ID-യും സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം.
**ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന:**
```html
```
**പ്രധാന ഘടകങ്ങൾ:**
- എല്ലാ ചെടികൾക്കുമുള്ള പൊസിഷൻ കൺട്രോൾ ചെയ്യാൻ `class="plant-holder"` ഉപയോഗിക്കുന്നു
- ചിത്രത്തിനും പെരുമാറ്റത്തിനും `class="plant"` നൽകുന്നു
- ഓരോ ചെടിക്കും വ്യത്യസ്ത പൊസിഷനിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഉൾപെടുത്തലിനും വ്യത്യസ്ത ID `id="plant1"` ഉപയോഗിക്കുന്നു
- സ്ക്രീൻ റീഡർ സൗഹൃദം ഉറപ്പാക്കാൻ വിവരണപരമായ alt ടെക്സ്റ്റ് നൽകുന്നു
ഇപ്പൊഴിത് നിന്റെ `style.css` ഫയലിൽ വേറെ സ്റ്റൈലുകൾ ചേർക്കൂ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ഈ സ്റ്റൈലുകൾ വിശദീകരിക്കുക:**
- `plant-holder`-ന് `relative` പൊസിഷനിംഗ് വഴി പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് ഒരുക്കുന്നു
- ഓരോ `plant-holder`-നും 13% ഉയരം നൽകുന്നു, ചെടികൾ സ്ക്രോൾ ഇല്ലാതെ വീതിയിൽ പൊരുത്തപ്പെടും
- `plant-holder` ലെHolder-നെ കുറെ ഇടത്തേക്ക് മാറ്റി ചെടികളെ കൂടുതൽ കൃത്യമായി മദ്ധ്യസ്ഥമാക്കുന്നു
- `max-width` `max-height` ഉപയോഗിച്ച് ചെടികൾ പ്രതികരണശീലമായി സ്കെയിൽ ചെയ്യാനാവും
- `z-index` ഉപയോഗിച്ച് ടെററിയത്തിലെ മറ്റു ഘടകങ്ങളെ മുകളിൽ വയ്ക്കുന്നു
- CSS ട്രാനുംഷനുകൾ വഴി സാവധാനമായ ഹോവർ ഇഫക്റ്റ് ചേർക്കുന്നു
✅ **ആവശ്യക്കാഴ്ച**: `.plant-holder` ഉം `.plant` ഉം വേറിട്ടതിനുള്ള ആവശ്യകം എന്താണ്? വെറും ഒന്ന് മാത്രം ഉപയോഗിച്ചാൽ എന്താകും?
> 💡 **ഡിസൈൻ മാതൃക**: കോൺടെയ്നർ (.plant-holder) ലേയൗട്ടും പൊസിഷൻ നിയന്ത്രിക്കുന്നു, ഉള്ളടക്കം (.plant) ദൃശ്യഭാവവും സ്കേലും കൈകാര്യം ചെയ്യുന്നു. ഇത് കോഡ് കൂടുതൽ പുനഃസംഘടന ഉചിതമാക്കുന്നു.
## CSS പൊസിഷനിംഗ് മനസ്സിലാക്കുക
CSS പൊസിഷനിംഗ് ഒരു നാടകത്തിലെ സ്റ്റേജ് ഡയറക്ടറുടെ പോലെ - എല്ലാ അഭിനയക്കാരും എവിടെ നിൽക്കും, എങ്ങനെയാവരും എന്ന് നിർദ്ദേശിക്കുന്നു. ചില അഭിനേതാക്കൾ സാധാരണ നിലയിൽ നിന്നു പ്രവർത്തിക്കും, മറ്റുചിലർ പ്രത്യേക പൊസിഷനിംഗ് ആവശ്യമാണ്.
പോസിഷനിംഗ് മനസ്സിലാക്കിയാൽ പല ലേയൗട്ട് പ്രശ്നങ്ങളും പരിഹരിക്കാം. സ്ക്രോൾ ചെയ്യുമ്പോഴും നാവിഗേഷൻ ബാർ മുകളിൽ തന്നെ നിലനിർത്തണം? അതിന് പൊസിഷനിംഗ് ഉപയോഗിക്കുക. നിശ്ചിത ഇടത്ത് ടൂള്ടിപ്പ് കാണിക്കണം? അതും പൊസിഷനിംഗ്.
### അഞ്ച് പൊസിഷൻ മൂല്യങ്ങൾ
```mermaid
quadrantChart
title CSS പോസിഷനിംഗ് തന്ത്രം
x-axis ഡോക്യുമെന്റ് ഫ്ലോ --> ഫ്ലോയിൽ നിന്ന് നീക്കംചെയ്തത്
y-axis സ്റ്റാറ്റിക് പൊസിഷൻ --> കൃത്യമായ നിയന്ത്രണം
quadrant-1 അബ്സൊല്യൂട്ട്
quadrant-2 ഫിക്സഡ്
quadrant-3 സ്റ്റാറ്റിക്
quadrant-4 സ്റ്റിക്കി
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| പൊസിഷൻ മൂല്യം | പെരുമാറ്റം | ഉപയോഗം |
|----------------|----------|----------|
| `static` | സ്വാഭാവിക പ്രവാഹം, top/left/right/bottom അനുഗമിക്കില്ല | സാധാരണ ഡോക്യുമെന്റ് ലേയൗട്ട് |
| `relative` | സ്വാഭാവിക സ്ഥിതിക്ക് അനുഭവപരമായ പൊസിഷൻ | ചെറിയ ക്രമീകരണങ്ങൾ, പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കൽ |
| `absolute` | അടുത്ത പൊസിഷൻ ചെയ്ത അവകാശിയായ മുൻപുള്ള എലമെന്റിനെ അടിസ്ഥാനമാക്കി | കൃത്യമായ സ്ഥാനം, ഓവർലെകൾ |
| `fixed` | viewport അടിസ്ഥാനമാക്കിയുള്ള പൊസിഷൻ | നാവിഗേഷൻ ബാറുകൾ, നിറഞ്ഞ എലമെന്റുകൾ |
| `sticky` | സ്ക്രോൾ അനുസരിച്ച് `relative`നും `fixed`ക്കും ഇടയിൽ മാറുന്നു | സ്ക്രോൾ ചെയ്യുമ്പോൾ പിടിച്ചുനിർത്തുന്ന ഹെഡറുകൾ |
### നമുക്ക് കിട്ടിയ ടെററിയത്തിൽ പൊസിഷനിംഗ്
നമ്മുടെ ടെററിയം ഉദ്ദേശിച്ച ലേയൗട്ട് സൃഷ്ടിക്കാൻ പൊസിഷനിംഗ് മൂല്യങ്ങളുടെ സമന്വയം ഉപയോഗിക്കുന്നു:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**പോസിഷനിംഗ് തന്ത്രം:**
- **Absolute കൺടെയ്നറുകൾ** സ്വാഭാവിക ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്ത് സ്ക്രീൻ അരികുകളിൽ പിണ്ഡ് ചെയ്യുന്നു
- **Relative ചെടി holder-കൾ** പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നു, ഡോക്യുമെന്റ് ഫ്ലോയിൽ തുടരുന്നു
- **Absolute ചെടികൾ** അവരുടെ relative holder-ലുള്ള കൃത്യമായ പൊസിഷനം നേടുന്നു
- **ഈ സംയോജനം** ചെടികൾ കൂമ്പാരമായി മുകളിലേക്ക് ശ്രേണീകരിച്ച് വ്യക്തിഗത പൊസിഷനിംഗ് സാധ്യമാക്കുന്നു
> 🎯 **അത് എന്തിന് ആവശ്യമാണ്**: അടുത്ത പാഠത്തിൽ ചെടികൾ ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് ചെയ്യാവുന്നവയാക്കാൻ absolute പൊസിഷനിംഗ് വേണം. ഇത് അവരെ സാധാരണ ലേയൗട്ട് ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്യുന്നു.
✅ **പരീക്ഷണം**: പൊസിഷൻ മൂല്യങ്ങൾ മാറ്റി ഫലങ്ങൾ കാണൂ:
- `.container`-ന് `absolute` ന്റെ പകരം `relative` നു മാറ്റിയാൽ സംഭവിക്കുന്നത് എന്താകും?
- `.plant-holder` `relative` പകരം `absolute` ഉപയോഗിച്ചാൽ ലേയൗട്ട് എങ്ങനെയാണ് മാറുക?
- `.plant`-നെ `relative` പോസിഷൻ ചെയ്യുമ്പോൾ എന്ത് സംഭവിക്കും?
### 🔄 **പെടഗോഗിക്കൽ ചെക്ക്- ഇൻ**
**CSS പോസിഷനിംഗ് മാസ്ററീ**: നിങ്ങളുടെ മനസിലാക്കലുകൾ പരിശോധിക്കുക:
- ✅ പ്ലാന്റുകൾക്ക് ഡ്രാഗ്-അൻഡ്-ഡ്രോപ്പ് സജ്ജമാക്കാൻ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് എങ്ങനെ സഹായിക്കുന്നു എന്ന് വിശദീകരിക്കാമോ?
- ✅ റീലേറ്റീവ് കോൺടൈനറുകൾ പോസിഷനിംഗ് കോൺടെക്സ്റ്റ് എങ്ങനെ സൃഷ്ടിക്കുന്നു എന്ന് മനസിലായോ?
- ✅ സൈഡ് കോൺടൈനറുകൾ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്?
- ✅ പ്ലേസ്മന്റും പൊസിഷൻ ഡിക്ലറേഷനുകളും മാറിക്കളയുമ്പോൾ എന്ത് സംഭവിക്കും?
**യഥാർത്ഥ ലോക ബന്ധം**: CSS-ലെ പോസിഷനിംഗ് യാഥാർത്ഥ്യത്തിലെ ലേയൗട്ടുമായി എങ്ങനെ പാരമ്പര്യമുള്ളതാണെന്ന് കാണുക:
- **സ്റ്റാറ്റിക്**: മുറ്റത്തുള്ള പുസ്തകങ്ങൾ (സ്വാഭാവിക ക്രമം)
- **രീലേറ്റീവ്**: ഒരു പുസ്തകം അല്പം നസുക്കിയെങ്കിലും അതിന്റെ സ്ഥാനം സൂക്ഷിക്കുക
- **ആബ്സല്യൂട്ട്**: ഒരു മാർക്കർ കൃത്യമായ പേജിൽ സ്ഥാപിക്കൽ
- **ഫിക്സ്**: വായിക്കുമ്പോൾ ചുരുളുന്ന സ്റ്റിക്കി നോട്ട്
## CSS ഉപയോഗിച്ച് ടെറിയം നിർമ്മാണം
ഇപ്പോൾ CSS മാത്രം ഉപയോഗിച്ച് ഗ്ലാസ് ജാർ നിർമ്മിക്കാം - ചിത്രങ്ങൾ അല്ലെങ്കിൽ ഗ്രാഫിക്സ് സോഫ്റ്റ്വേർ ആവശ്യമില്ല.
പോസിഷനിംഗ്, ട്രാൻസ്പറൻസി എന്നിവ ഉപയോഗിച്ച് യാഥാർത്ഥ്യസമമായ ഗ്ലാസ്, ഷാഡോസ്, ആഴം സൃഷ്ടിക്കുന്നത് CSS–ന്റെ ദൃശ്യശേഷിയെ കാണിക്കുന്നു. ബൗഹൗസ് പ്രസ്ഥാനത്തിലെ ആർക്കിടെക്റ്റുകൾ എങ്ങനെ ലളിതമായ ജ്യാമിതീയ രൂപങ്ങൾ ഉപയോഗിച്ച് സങ്കീർണ്ണവും മനോഹരവുമായ ഘടനകൾ സൃഷ്ടിച്ചു എന്ന പോലെ, ഈ സിദ്ധാന്തങ്ങൾ മനസിലാക്കിയാൽ നീ רבות വെബ് ഡിസൈനുകളിലെ CSS സാങ്കേതിക വിദ്യ തിരിച്ചറിയാം.
```mermaid
flowchart LR
A[ജാർ മുകളിൽ] --> E[പൂർണ്ണ ടെരറിയം]
B[ജാർ മതിലുകൾ] --> E
C[മണ്ണ് പാളി] --> E
D[ജാർ അടിയുടെ] --> E
F[ഗ്ലാസ് ഫലങ്ങള്] --> E
A1["50% വീതി
5% ഉയരം
മുകളിൽ സ്ഥാനം"] --> A
B1["60% വീതി
80% ഉയരം
വെട്ടിപ്പടർന്നCorners
0.5 അപാരദർശിനി"] --> B
C1["60% വീതി
5% ഉയരം
കറുത്ത തവിട്ട്
അടിമുള്ള പാളി"] --> C
D1["50% വീതി
1% ഉയരം
താഴെ സ്ഥാനം"] --> D
F1["സൂക്ഷ്മ നിഴലുകൾ
പരദർശിത്വം
സ് iziൻഡ് ലെയറിംഗ്"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### ഗ്ലാസ്സ് ജാർ ഘടകങ്ങൾ ഉണ്ടാക്കൽ
ടെറിയം ജാറിന്റെ ഘടകങ്ങൾ ഓരോന്നായി ഉണ്ടാക്കാം. ഓരോ ഭാഗവും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുകയും ശതമാനത്തിലുള്ള അളവുകൾ ഉപയോഗിച്ച് റെസ്പോമ്സീവ് ഡിസൈൻ ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**ടെറിയം നിർമ്മിതിയുടെ അറിവ്:**
- സ്ക്രീൻ വലുപ്പങ്ങളിൽ രേഖാത്മകമായ സ്കെയ്ലിംഗിന് ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ ഉപയോഗിക്കുന്നു
- ഘടകങ്ങളെ കൃത്യമായി ചേർക്കാനും ക്രമീകരിക്കാനും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നു
- ഗ്ലാസ് ട്രാൻസ്പറൻസി ഫലത്തിനായി വ്യത്യസ്ത ഒപ്പസിറ്റി മൂല്യങ്ങൾ നോക്കുന്നു
- വനaspാപങ്ങൾ ജാറിന് ഉള്ളിൽ കാണാനും `z-index` ലെയർ ചെയ്യുന്നു
- യഥാർത്ഥത കൂടിയ എഫക്ടിനായി നേർത്ത ബോക്സ് ഷാഡോയും ബോർഡർ-റേഡിയസും കൂട്ടിക്കുന്നു
### ശതമാന അടിസ്ഥാനത്തിലുള്ള റെസ്പോൺസീവ് ഡിസൈൻ
എല്ലാ അളവുകളും പിക്സൽ സ്ഥിരമല്ല, ശതമാനമാണ് ഉപയോഗിക്കുന്നത്:
**കാര്യതമ്യം:**
- എന്ത് വലുപ്പമുള്ള സ്ക്രീനിലും ടെറിയം ശരിയായി സ്കെയിൽ ചെയ്യാൻ സഹായിക്കുന്നു
- ജാർ ഘടകങ്ങൾ തമ്മിലുള്ള ദൃശ്യ ബന്ധം നിലനിർത്തുന്നു
- മൊബൈൽ ഫോണിൽ നിന്നും വലിയ ഡെസ്ക്ക്ടോപ്പ് മോണിറ്ററുകൾ വരെ സമാന അനുഭവം നൽകുന്നു
- ശൈലി തുടർന്നും തകർക്കാതെ അനുയോജ്യമായി ഒത്തുചേരാൻ സാധിക്കുന്നു
### CSS ഘടകങ്ങളുടെ പ്രവർത്തനം
`rem` യൂണിറ്റുകൾ ബോർഡർ-റേഡിയസിനായി ഉപയോഗിക്കുന്നതാണ്, ഇത് റൂട്ട് ഫോണ്ട് സൈസിനെ അടിസ്ഥാനമാക്കി സ്കെയിൽ ചെയ്യുന്നു. ഇത് ഉപയോക്താക്കളുടെ ഫോണ്ട് ഇഷ്ടാനുസരണം രോഗിപോകുന്നതിന് അനുയോജ്യമാണ്. കൂടുതൽ പഠിക്കാൻ [CSS.Relative Units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) സന്ദർശിക്കുക.
✅ **ദൃശ്യപര പരീക്ഷണം**: താഴെ പറയുന്ന മൂല്യങ്ങൾ മാറ്റി കാണൂ:
- ജാറിന്റെ ഒപ്പസിറ്റി 0.5-ൽനിന്ന് 0.8-ലേക്ക് മാറ്റുക – ഗ്ലാസ് എങ്ങനെ മാറുന്നു?
- മണ്ണിന്റെ നിറം `#3a241d`-നിന്ന് `#8B4513`-ലേക്ക് മാറ്റുക – ദൃശ്യപരമായി എന്ത് വ്യത്യാസം കാണുന്നു?
- മണ്ണിന്റെ `z-index` 2 ആക്കി മാറ്റുക – ലെയറിംഗ് എങ്ങനെയാണ് മാറുന്നത്?
### 🔄 **പെഡഗോഗിക്കൽ ചെക്കിൻ**
**CSS ദൃശ്യ ഡിസൈൻ മനസ്സിലാക്കൽ**: നിങ്ങളുടെ അറിവ് സ്ഥിരീകരിക്കുക:
- ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ റെസ്പോൺസീവ് ഡിസൈൻ എങ്ങനെ സൃഷ്ടിക്കുന്നു?
- ഒപ്പസിറ്റി ഗ്ലാസ് ട്രാൻസ്പറൻസി എങ്ങനെ ഉണ്ടാക്കുന്നു?
- ലെയറിങ്ങിൽ `z-index` എന്ത് പങ്കുവഹിക്കുന്നു?
- ബോർഡർ-റേഡിയസ് മൂല്യങ്ങൾ ജാർ ആകൃതി എങ്ങനെ സൃഷ്ടിക്കുന്നു?
**ഡിസൈൻ സിദ്ധാന്തം**: ലളിതമായ രൂപങ്ങളിൽ നിന്ന് സങ്കീർണ്ണ ദൃശ്യങ്ങളുണ്ടാകുന്നത് ശ്രദ്ധിക്കുക:
1. **റെക്റ്റേംഗിളുകൾ** → **റൗണ്ടഡ് റെക്റ്റേംഗിളുകൾ** → **ജാർ ഘടകങ്ങൾ**
2. **സാധാരണ നിറങ്ങൾ** → **ഒപ്പസിറ്റി** → **ഗ്ലാസ് ഇഫക്ട്**
3. **വ്യക്തിഗത ഘടകങ്ങൾ** → **ലെയേർ ചെയ്ത ഘടന** → **3D ദൃശ്യപ്രഭാവം**
---
## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള ചാലഞ്ച് പൂർത്തിയാക്കുക:
**വിവരണം:** ടെറിയത്തിലെ സസ്യങ്ങൾ സ്വാഭാവിക ഗాలിയുടെ സുവിശേഷം പോലെ ഹൃദയസ്പർശിയായപ്പോൾ മുമ്പ്-പിന്നിലേക്ക് അലഞ്ഞു നടക്കാൻ CSS ആനിമേഷൻ സൃഷ്ടിക്കുക. CSS ആനിമേഷനുകൾ, ട്രാൻസ്ഫോംസ്, കീഫ്രെയിംസ് അഭ്യാസം ചെയ്യാൻ ഇത് സഹായിക്കും കൂടാതെ ടെറിയം ദൃശ്യശോഭ വർധിപ്പിക്കും.
**പ്രോംപ്റ്റ്:** ടെറിയത്തിലെ സസ്യങ്ങൾ ഇളംമറയുന്ന തരത്തിൽ മുന്നേയ്ക്കും പിൻവാങ്ങിയും അലഞ്ഞു നടക്കാൻ CSS കീഫ്രെയിം ആനിമേഷൻ ചേർക്കുക. ഓരോ സസ്യവും (2-3 ഡിഗ്രി) നേരെ ഇടത്തും വലത്തും തിരിയുന്ന 3-4 സെക്കൻഡ് ദൈർഘ്യമുള്ള സ്വേയിങ് ആനിമേഷൻ സൃഷ്ടിച്ച് `.plant` ക്ലാസ്സിന് നൽകുക. ആനിമേഷൻ നിർവഹിച്ചു ഇൻഫിനിറ്റ് ലൂപ്പ് ചെയ്യുകയും പ്രകൃതിദൃശ്യ ചലനത്തിനായി ഈസിങ്ങ് ഫങ്ഷൻ ഉപയോഗിക്കുകയും ചെയ്യണം.
**കൂടുതൽ വിവരങ്ങൾക്ക്** [ഏജന്റ് മോഡ്](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സന്ദർശിക്കുക.
## 🚀 ചാലഞ്ച്: ഗ്ലാസ് പരിഭ്രംശങ്ങൾ കൂട്ടുക
റിയലിസ്റ്റിക് ഗ്ലാസ് പരിഭ്രംശങ്ങൾ जोड़ാൻ തയ്യാറാവൂ? ഇത് ഡിസൈൻക്ക് ഗാഢതയും യാഥാർത്ഥ്യവും നൽകും.
കുറച്ച് വെളുത്ത അല്ലെങ്കിൽ ഏകദേശം വെളിച്ചമുള്ള ഒവൽ ആകൃതികൾ സൃഷ്ടിക്കുക, ജാറിന്റെ ഇടത് ഭാഗത്ത് നിർദ്ദേശിത സ്ഥാനങ്ങളിൽ വைக்கുക. യഥാർത്ഥതയുള്ള വെളിച്ചം പ്രതിഫലിപ്പിക്കുന്നതിനായി അനുയോജ്യമായ ഒപ്പസിറ്റി, ബ്ലർ എഫക്ടുകൾ പ്രയോഗിക്കുക. ഓർഗാനിക് ബബിള് ആകൃതികൾക്കായി `border-radius` ഉപയോഗിക്കുക. മികച്ച യഥാർത്ഥതക്കായി ഗ്രേഡിയന്റ് അല്ലെങ്കിൽ ബോക്സ്-ഷാഡോസ് പരീക്ഷിക്കുക.
## പൂർവ്വ ലക്ചർ ക്വിസ്
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/18)
## നിങ്ങളുടെ CSS അറിവ് വികസിപ്പിക്കുക
ആദ്യമായി CSS ചിലപ്പോൾ സങ്കീർണ്ണമായിരിക്കാം, എന്നാൽ ഈ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ മനസിലാക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള സാങ്കേതിക വിദ്യകൾക്ക് നല്ല അടിസ്ഥാനം നൽകുന്നു.
**നിങ്ങളുടെ അടുത്ത CSS പഠന മേഖലകൾ:**
- **ഫ്ലെക്സ്ബോക്സ്** - ഘടകങ്ങളുടെ അലൈന്മെന്റും വിതരണവും ലളിതമാക്കുന്നു
- **CSS ഗ്രിഡ്** - സങ്കീർണ്ണ ലേയൗട്ടുകൾ സൃഷ്ടിക്കാൻ ശക്തമായ ഉപകരണങ്ങൾ നൽകുന്നു
- **CSS വേരിയബിള്സ്** - പുനരാവർത്തനത്തിനെ കുറയ്ക്കുകയും നിലനിർത്തലും മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു
- **റെസ്പോൺസീവ് ഡിസൈൻ** - വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സൈറ്റുകൾ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുന്നു
### ഇന്ററാക്ടീവ് ലേണിംഗ് സ്രോതസുകൾ
ഈ ആശയങ്ങൾ പ്രായോഗികമായി അഭ്യാസിക്കാം ഈ രസകരമായ ഗെയിമുകൾ വഴി:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - രസകരമായ ചാലഞ്ചുകൾ വഴി ഫ്ലെക്സ്ബോക്സ് പഠിക്കുക
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS ഗ്രിഡ് പരിശീലനം വെച്ച കർഷിണി വളർത്തുക
- 🎯 [CSS Battle](https://cssbattle.dev/) - CSS കഴിവുകൾ കോഡിംഗ് ചാലഞ്ചുകളിൽ പരീക്ഷിക്കുക
### അധിക പഠനം
CSS അടിസ്ഥാനപരമായും വിശദമായും പഠിക്കാനുള്ള ഈMicrosoft Learn മോഡ്യൂൾ പൂർത്തിയാക്കുക: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **നിമിഷം 5-ൽ ചെയ്യാനുള്ളത്**
- [ ] ഡെവ്ടൂൾസ് തുറന്ന് Elements പാനലിൽ വെബ്സൈറ്റിലെ CSS സ്റ്റൈലുകൾ പരിശോധിക്കുക
- [ ] ലളിതമായ CSS ഫയൽ ഉണ്ടാക്കി HTML പേജുമായി ലിങ്ക് ചെയ്യുക
- [ ] നിറം മാറ്റാൻ തെളിയിക്കാം: ഹെക്സ്, RGB, പേരിട്ട നിറങ്ങൾ എന്നിവ ഉപയോഗിക്കുക
- [ ] പാഡിംഗും മാർജിനും ചേർത്ത് ബോക്സ് മോഡൽ അഭ്യാസിക്കുക
### 🎯 **ഈ മണിക്കൂർ ചെയ്യാൻ സാധിക്കുന്ന കാര്യങ്ങൾ**
- [ ] പോസ്റ്റ്-ലെഷൻ ക്വിസ് പൂർത്തിയാക്കി CSS അടിസ്ഥാനങ്ങൾ അവലോകനം ചെയ്യുക
- [ ] HTML പേജ് ഫോണ്റ്, നിറം, ശൂന്യത എന്നിവ കൊണ്ട് സ്റ്റൈൽ ചെയ്യുക
- [ ] ഫ്ലെക്സ്ബോക്സോ ഗ്രിഡ് ഉപയോഗിച്ച് ലളിതമായ ലേയൗട്ട് സൃഷ്ടിക്കുക
- [ ] CSS ട്രാൻസിഷനുകൾ പരീക്ഷിച്ച് സ്മൂത്ത് എഫക്ടുകള് ആസ്വദിക്കുക
- [ ] മീഡിയ ക്വയറികളിലൂടെ റെസ്പോൺസീവ് ഡിസൈനിൽ അഭ്യാസം നടത്തുക
### 📅 **നിങ്ങളുടെ ആഴ്ച നീണ്ട CSS സാഹസം**
- [ ] സൃഷ്ടിപരമായ രീതിയിൽ ടെറിയം സ്റ്റൈലിംഗ് അസൈൻമെന്റ് പൂർത്തിയാക്കുക
- [ ] ഫോട്ടോ ഗാലറി ലേയൗട്ട് നിർമാണത്തിന് CSS ഗ്രിഡ് മ-striped
- [ ] CSS ആനിമേഷനുകൾ പഠിച്ച് ഡിസൈൻകൾക്ക് ജീവൻ നൽകുക
- [ ] SASS, LESS പോലുള്ള CSS പ്രീപ്രോസസ്സറുകൾ അന്വേഷിക്കുക
- [ ] ഡിസൈൻ തത്ത്വങ്ങൾ പഠിച്ച് CSS- ൽ പ്രയോഗിക്കുക
- [ ] ആസ്വദനീയമായ ഡിസൈനുകൾ അനാലൈസ് ചെയ്ത് പുനഃസംസ്കരണം ചെയ്യുക
### 🌟 **നിങ്ങളുടെ മാസം നീണ്ട ഡിസൈൻ മാസ്റ്ററി**
- [ ] സമ്പൂർണ റെസ്പോൺസീവ് വെബ്സൈറ്റ് ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കുക
- [ ] CSS-IN-JS അല്ലെങ്കിൽ utility-first ഫ്രെയിംവർക്കുകൾ (Tailwind) പഠിക്കുക
- [ ] CSS മെച്ചപ്പെടുത്തലുകൾ കൊണ്ട് ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റുകളിൽ പങ്കുചേരുക
- [ ] CSS കസ്റ്റം പ്രോപ്പർട്ടീസും containment പോലുള്ള ആധുനിക ആശയങ്ങളില് മ-striped
- [ ] മോഡുലാർ CSS ഉപയോഗിച്ച് പുനരുപയോഗയോഗ്യമായ 컴്പോണെന്റ് ലൈബ്രറികൾ സൃഷ്ടിക്കുക
- [ ] പുതുതായി CSS പഠിക്കുന്നവരെ മോർഗനൈസുചെയ്യുകയും ഡിസൈൻ അറിവ് പങ്കിടുകയുമാണ്
## 🎯 നിങ്ങളുടെ CSS മാസ്റ്ററി ടൈംലൈൻ
```mermaid
timeline
title CSS പഠന പുരോഗതി
section അടിസ്ഥാനപരമായത് (10 മിനിട്ടുകൾ)
ഫയൽ കണക്ഷൻ: CSS നെ HTML-ലേക്ക് ലിങ്ക് ചെയ്യുക
: കാസ്കേഡ് നിയമങ്ങൾ മനസിലാക്കുക
: പാരമ്പര്യത്തിന്റെ അടിസ്ഥാനങ്ങൾ പഠിക്കുക
section സെലക്ടറുകൾ (15 മിനിട്ടുകൾ)
ഘടകങ്ങൾ ലക്ഷ്യമിടൽ: ഘടക സെലക്ടറുകൾ
: ക്ലാസ് പാറ്റേണുകൾ
: ഐഡി സ്പെസിഫിസിറ്റി
: കോംബിനേറ്ററുകൾ
section ബോക്സ് മോഡൽ (20 മിനിട്ടുകൾ)
ലേയൗട്ട് അടിസ്ഥാനങ്ങൾ: മാർജിൻ, പാഡിംഗ്
: ബോർഡർ ഗുണങ്ങൾ
: ഉള്ളടക്കത്തിന്റെ വലിപ്പം
: ബോക്സ്-സൈസിംഗ് പെരുമാറ്റം
section സ്ഥാനനിർണ്ണയം (25 മിനിട്ടുകൾ)
ഘടകസ്ഥാനം: സ്റ്റാറ്റിക് vs റിലേറ്റീവ്
: ആബ്സല്യൂട്ട് സ്ഥാനനിർണ്ണയം
: Z-ഇൻഡക്സ് ലെയറിംഗ്
: റെസ്പോൺസീവ് യൂണിറ്റുകൾ
section ദൃശ്യ ഡിസൈൻ (30 മിനിട്ടുകൾ)
സ്റ്റൈലിംഗ് മാട്സറി: നിറങ്ങളും തീവ്രതയും
: ഷാഡോസ് మరియు എഫക്ടുകൾ
: ട്രാൻസിഷനുകൾ
: ട്രാൻസ്ഫോം ഗുണങ്ങൾ
section റെസ്പോൺസീവ് ഡിസൈൻ (45 മിനിട്ടുകൾ)
മൾട്ടി-ഡിവൈസ് പിന്തുണ: മീഡിയ ക്വയറികൾ
: സാന്ധ്യ ലേയൗട്ടുകൾ
: മൊബൈൽ-ഫസ്റ്റ് സമീപനം
: വ്യൂപോർട്ട് ഒപ്റ്റിമൈസേഷൻ
section ഉയർന്ന സാങ്കേതിക തന്ത്രങ്ങൾ (1 ആഴ്ച)
ആധുനിക CSS: Flexbox ലേയൗട്ടുകൾ
: CSS ഗ്രിഡ് സിസ്റ്റങ്ങൾ
: കസ്റ്റം ഗുണങ്ങൾ
: ആനിമേഷൻ കീഫ്രെയിംസ്
section പ്രൊഫഷണൽ കഴിവുകൾ (1 മാസം)
CSS ആർക്കിടെക്ചർ: ഘടക പാറ്റേണുകൾ
: പരിപാലനക്ഷമമായ കോഡ്
: പ്രകടന മെച്ചപ്പെടുത്തൽ
: ക്രോസ്-ബ്രൗസർ അനുയോജ്യത
```
### 🛠️ നിങ്ങളുടെ CSS ഉപകരണപ്പെട്ടി സംഗ്രഹം
ഈ പാഠം പൂർത്തിയാക്കിയതിനു ശേഷം, നിങ്ങക്കുണ്ട്:
- **കാസ്കേഡ് മനസ്സിലാക്കൽ**: സ്റ്റൈലുകൾ എങ്ങനെ ഒരുമിച്ച് വമ്പിച്ചു അതിരുകളെ മറികടക്കുന്നു
- **സെലക്ടർ മാസ്റ്ററി**: ഏലമെന്റുകൾ, ക്ലാസ്സുകൾ, ഐഡിയーズ വഴി കൃത്യമായ ലക്ഷ്യമിടൽ
- **പോസിഷനിംഗ് നൈപുണ്യം**: ഘടകങ്ങളുടെ സമർത്ഥമായ സ്ഥാനമാറ്റവും ലെയറിങ്ങും
- **ദൃശ്യമാന ഡിസൈൻ**: ഗ്ലാസ് ഇഫക്ട്, ഷാഡോസ്, ട്രാൻസ്പറൻസി സൃഷ്ടിക്കൽ
- **റെസ്പോൺസീവ് സാങ്കേതിക വിദ്യകൾ**: ഏതൊരു സ്ക്രീനിലും പൊരുത്തപ്പെടുന്ന ശതമാന അടിസ്ഥാന ലേയൗട്ട്
- **കോഡ് സംഘടന**: ശുചിത്വം പാലിച്ച, നിലതിരുന്നതുമായ CSS ഘടന
- **ആധുനിക പ്രയോഗങ്ങൾ**: റിലേറ്റീവ് യൂണിറ്റുകളും ആക്സസിബിൾ ഡിസൈൻ പാറ്റേണുകളും ഉപയോഗിക്കൽ
**അടുത്തു ചെയ്യേണ്ടത്**: ടെറിയത്തിന് ഇപ്പോൾ ഘടന (HTML) കൂടാതെ സ്റ്റൈൽ (CSS) ഉണ്ട്. അവസാന പാഠത്തിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇന്ററാക്ടിവിറ്റിഫ് കൂട്ടും!
## അസൈൻമെന്റ്
[CSS Refactoring](assignment.md)
---
**വിമര്ശനം**:
ഈ ദസ്താവേജ് AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം പരിഭാഷയുടെ കൃത്യതയ്ക്ക് ശ്രമിക്കുമ്പോഴും, സ്വയംമാറ്റത്തിലുള്ള പരിഭാഷകളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്നത് ശ്രദ്ധിക്കുക. ജന്മഭാഷയിലുള്ള originele ദസ്താവേ俺也去 അധികാരמקൂലം കണക്കാക്കണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിലുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണക്കോ തെറ്റായ വ്യാഖ്യാനത്തൊഴിച്ചുകൂടി ഞങ്ങൾ ഉത്തരവാദിത്വം വരുത്തുകയില്ല.
`-നെ പരിശോധിക്കൂ. ഇത് `body`-യിൽ നിന്നുള്ള ഫോണ്ട് ഫാമിലി പാരമ്പര്യമായി സ്വീകരിച്ചത് കാണാം:
✅ **പരീക്ഷണമെടുത്ത് നോക്കൂ**: ``-യ്ക്ക് `color`, `line-height`, അല്ലെങ്കിൽ `text-align` പോലുള്ള മറ്റേതെങ്കിലും പാരമ്പര്യ സ്വഭാവങ്ങൾ സജ്ജമാക്കൂ. നിന്റെ തലക്കെട്ടിനും മറ്റ് എലമെന്റുകൾക്കും എന്ത് സംഭവിക്കുന്നു?
> 📝 **പാരമ്പര്യം കൈവരിക്കുന്ന പ്രോപ്പർട്ടികൾ**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **പാരമ്പര്യമില്ലാത്ത പ്രോപ്പർട്ടികൾ**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **പാഠത്തിന്റെ അവലോകനം**
**CSS അടിസ്ഥാന മനസ്സിലാക്കൽ**: സെലക്ടറുകളിലേക്ക് മുന്നോട്ട് പോകുന്നതിന് മുൻപ് ഉറപ്പാക്കുക:
- ✅ കാസ്കേഡും പാരമ്പര്യവും തമ്മിലുള്ള വ്യത്യാസം വ്യക്തമാക്കാൻ കഴിയുന്നു
- ✅ പ്രത്യേകത സംഘർഷത്തിൽ ഏതു സ്റ്റൈൽ വിജയിക്കും ബോധ്യപ്പെടുത്താൻ കഴിയും
- ✅ ഏത് പ്രോപ്പർട്ടികൾ പാരമ്പര്യം കൈവരിക്കുന്നുവെന്ന് തിരിച്ചറിയുന്നു
- ✅ CSS ഫയലുകൾ HTML-നൊപ്പം ശരിയായി ബന്ധിപ്പിക്കുന്നു
**പെട്ടെന്നുള്ള പരിശോധന**: ഈ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ, `` ഉള്ളിൽ ഉള്ള ``-ന്റെ നിറം എന്താകും?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു)*
## CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക
CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്.
CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ.
### എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ)
എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ഈ സ്റ്റൈലുകൾ അത്രയ്ക്കായി:**
- പേജ് മുഴുവൻ ഏകീകൃത ടൈപ്പോഗ്രഫി കാണിക്കാൻ `body` സെലക്ടർ ഉപയോഗിക്കുന്നു
- മികച്ച നിയന്ത്രണത്തിനായി ബ്രൗസറിന്റെ ഡീഫോൾട്ട് മാർജിനുകളും പാഡിംഗുകളും നീക്കം ചെയ്യുന്നു
- എല്ലാ ഹെഡിംഗ് എലമെന്റുകളെയും നിറം, സന്ധി, അലൈന്മെന്റ് നൽകുന്നു
- സ്കെയിലബിൾ, ആക്സസിബിൾ ഫോണ്ട് വലുപ്പത്തിന് `rem` യൂണിറ്റ് ഉപയോഗിക്കുന്നു
എങ്കിലും, എലമെന്റ് സെലക്ടറുകൾ സാധാരണ സ്റ്റൈലിംഗിന് നല്ലതായിരിക്കുമ്പോൾ, ഓരോ ടെററിയം ചെടികൾ പോലുള്ള പ്രത്യേക ഘടകങ്ങൾക്ക് കൂടുതൽ പ്രത്യേക സെലക്ടറുകൾ ആവശ്യമായിരിക്കും.
### ഏകാന്ത എലമെന്റുകൾക്കായി ID സെലക്ടറുകൾ
ID സെലക്ടറുകൾ `#` ചിഹ്നം ഉപയോഗിച്ച് പ്രത്യേക `id` ഉള്ള എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു. പേജിൽ ഓരോ ID ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്നറുകൾ) ഇവ നല്ലതാണ്.
ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**ഇവിടെ സംഭവിക്കുന്നത്:**
- `absolute` പൊസിഷനിംഗുമായി കണ്ടെയ്നറുകൾ ഇടത്തും വലത്തും നീക്കുന്നു
- സ്ക്രീൻ വലിപ്പത്തിന് അനുസരിച്ച് `vh` (viewport height) യൂണിറ്റിൽ ഉയരം നൽകുന്നു
- പാഡിംഗിൽ ഉൾപ്പെടുത്തിയവയ്ക്ക് `box-sizing: border-box` ഉപയോഗിക്കുന്നു
- സോഴ്യമായ ജൂലിയൻ മൂല്യങ്ങളിൽ നിന്നുള്ള `px` യൂണിറ്റുകൾ നീക്കി ലക്ഷ്യമിടുന്നു
- കഠിനമായ കറുപ്പുപകരം കണ്ണിന് ഇതിന് സൗകര്യമുള്ള സബ്റ്റിൽ പശ്ചാത്തല നിറം നൽകുന്നു
✅ **കോഡ് ഗുണമേന്മ പരിശോധന**: ഈ CSS DRY (Don't Repeat Yourself) നിയമം ലംഘിക്കുന്നതാണ് കാണുന്നത്. ഒരു ID ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ?
**മികച്ച സമരയോഗം:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### പുനരുപയോഗപ്പെടുത്താവുന്ന ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടറുകൾ
ക്ലാസ് സെലക്ടറുകൾ `.` ചിഹ്നം ഉപയോഗിച്ച് ഒടുക്കം ഒരു മുതിർന്ന ഇലമെന്റിന് പലത്തവണ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം. ID-കളുടെ വ്യത്യാസം, ക്ലാസുകൾ പേജിലുടനീളം വീണ്ടും ഉപയോഗിച്ചേക്കാം, അതുകൊണ്ട് സ്ഥിരമായ സ്റ്റൈലിംഗ് മാതൃകകൾക്കായി ഇവ ഏറ്റവും അനുയോജ്യമാണ്.
നമ്മുടെ ടെററിയത്തിൽ ഓരോ ചെടിക്കും സമാനമായ സ്റ്റൈലിംഗ് ആവശ്യമായിരിക്കുന്നു എങ്കിലും വ്യക്തിഗത പൊസിഷനിംഗ് വേണം. നാം പുനരുപയോഗ ക്ലാസ്സുകളും ID-യും സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം.
**ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന:**
```html
```
**പ്രധാന ഘടകങ്ങൾ:**
- എല്ലാ ചെടികൾക്കുമുള്ള പൊസിഷൻ കൺട്രോൾ ചെയ്യാൻ `class="plant-holder"` ഉപയോഗിക്കുന്നു
- ചിത്രത്തിനും പെരുമാറ്റത്തിനും `class="plant"` നൽകുന്നു
- ഓരോ ചെടിക്കും വ്യത്യസ്ത പൊസിഷനിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഉൾപെടുത്തലിനും വ്യത്യസ്ത ID `id="plant1"` ഉപയോഗിക്കുന്നു
- സ്ക്രീൻ റീഡർ സൗഹൃദം ഉറപ്പാക്കാൻ വിവരണപരമായ alt ടെക്സ്റ്റ് നൽകുന്നു
ഇപ്പൊഴിത് നിന്റെ `style.css` ഫയലിൽ വേറെ സ്റ്റൈലുകൾ ചേർക്കൂ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ഈ സ്റ്റൈലുകൾ വിശദീകരിക്കുക:**
- `plant-holder`-ന് `relative` പൊസിഷനിംഗ് വഴി പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് ഒരുക്കുന്നു
- ഓരോ `plant-holder`-നും 13% ഉയരം നൽകുന്നു, ചെടികൾ സ്ക്രോൾ ഇല്ലാതെ വീതിയിൽ പൊരുത്തപ്പെടും
- `plant-holder` ലെHolder-നെ കുറെ ഇടത്തേക്ക് മാറ്റി ചെടികളെ കൂടുതൽ കൃത്യമായി മദ്ധ്യസ്ഥമാക്കുന്നു
- `max-width` `max-height` ഉപയോഗിച്ച് ചെടികൾ പ്രതികരണശീലമായി സ്കെയിൽ ചെയ്യാനാവും
- `z-index` ഉപയോഗിച്ച് ടെററിയത്തിലെ മറ്റു ഘടകങ്ങളെ മുകളിൽ വയ്ക്കുന്നു
- CSS ട്രാനുംഷനുകൾ വഴി സാവധാനമായ ഹോവർ ഇഫക്റ്റ് ചേർക്കുന്നു
✅ **ആവശ്യക്കാഴ്ച**: `.plant-holder` ഉം `.plant` ഉം വേറിട്ടതിനുള്ള ആവശ്യകം എന്താണ്? വെറും ഒന്ന് മാത്രം ഉപയോഗിച്ചാൽ എന്താകും?
> 💡 **ഡിസൈൻ മാതൃക**: കോൺടെയ്നർ (.plant-holder) ലേയൗട്ടും പൊസിഷൻ നിയന്ത്രിക്കുന്നു, ഉള്ളടക്കം (.plant) ദൃശ്യഭാവവും സ്കേലും കൈകാര്യം ചെയ്യുന്നു. ഇത് കോഡ് കൂടുതൽ പുനഃസംഘടന ഉചിതമാക്കുന്നു.
## CSS പൊസിഷനിംഗ് മനസ്സിലാക്കുക
CSS പൊസിഷനിംഗ് ഒരു നാടകത്തിലെ സ്റ്റേജ് ഡയറക്ടറുടെ പോലെ - എല്ലാ അഭിനയക്കാരും എവിടെ നിൽക്കും, എങ്ങനെയാവരും എന്ന് നിർദ്ദേശിക്കുന്നു. ചില അഭിനേതാക്കൾ സാധാരണ നിലയിൽ നിന്നു പ്രവർത്തിക്കും, മറ്റുചിലർ പ്രത്യേക പൊസിഷനിംഗ് ആവശ്യമാണ്.
പോസിഷനിംഗ് മനസ്സിലാക്കിയാൽ പല ലേയൗട്ട് പ്രശ്നങ്ങളും പരിഹരിക്കാം. സ്ക്രോൾ ചെയ്യുമ്പോഴും നാവിഗേഷൻ ബാർ മുകളിൽ തന്നെ നിലനിർത്തണം? അതിന് പൊസിഷനിംഗ് ഉപയോഗിക്കുക. നിശ്ചിത ഇടത്ത് ടൂള്ടിപ്പ് കാണിക്കണം? അതും പൊസിഷനിംഗ്.
### അഞ്ച് പൊസിഷൻ മൂല്യങ്ങൾ
```mermaid
quadrantChart
title CSS പോസിഷനിംഗ് തന്ത്രം
x-axis ഡോക്യുമെന്റ് ഫ്ലോ --> ഫ്ലോയിൽ നിന്ന് നീക്കംചെയ്തത്
y-axis സ്റ്റാറ്റിക് പൊസിഷൻ --> കൃത്യമായ നിയന്ത്രണം
quadrant-1 അബ്സൊല്യൂട്ട്
quadrant-2 ഫിക്സഡ്
quadrant-3 സ്റ്റാറ്റിക്
quadrant-4 സ്റ്റിക്കി
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| പൊസിഷൻ മൂല്യം | പെരുമാറ്റം | ഉപയോഗം |
|----------------|----------|----------|
| `static` | സ്വാഭാവിക പ്രവാഹം, top/left/right/bottom അനുഗമിക്കില്ല | സാധാരണ ഡോക്യുമെന്റ് ലേയൗട്ട് |
| `relative` | സ്വാഭാവിക സ്ഥിതിക്ക് അനുഭവപരമായ പൊസിഷൻ | ചെറിയ ക്രമീകരണങ്ങൾ, പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കൽ |
| `absolute` | അടുത്ത പൊസിഷൻ ചെയ്ത അവകാശിയായ മുൻപുള്ള എലമെന്റിനെ അടിസ്ഥാനമാക്കി | കൃത്യമായ സ്ഥാനം, ഓവർലെകൾ |
| `fixed` | viewport അടിസ്ഥാനമാക്കിയുള്ള പൊസിഷൻ | നാവിഗേഷൻ ബാറുകൾ, നിറഞ്ഞ എലമെന്റുകൾ |
| `sticky` | സ്ക്രോൾ അനുസരിച്ച് `relative`നും `fixed`ക്കും ഇടയിൽ മാറുന്നു | സ്ക്രോൾ ചെയ്യുമ്പോൾ പിടിച്ചുനിർത്തുന്ന ഹെഡറുകൾ |
### നമുക്ക് കിട്ടിയ ടെററിയത്തിൽ പൊസിഷനിംഗ്
നമ്മുടെ ടെററിയം ഉദ്ദേശിച്ച ലേയൗട്ട് സൃഷ്ടിക്കാൻ പൊസിഷനിംഗ് മൂല്യങ്ങളുടെ സമന്വയം ഉപയോഗിക്കുന്നു:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**പോസിഷനിംഗ് തന്ത്രം:**
- **Absolute കൺടെയ്നറുകൾ** സ്വാഭാവിക ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്ത് സ്ക്രീൻ അരികുകളിൽ പിണ്ഡ് ചെയ്യുന്നു
- **Relative ചെടി holder-കൾ** പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നു, ഡോക്യുമെന്റ് ഫ്ലോയിൽ തുടരുന്നു
- **Absolute ചെടികൾ** അവരുടെ relative holder-ലുള്ള കൃത്യമായ പൊസിഷനം നേടുന്നു
- **ഈ സംയോജനം** ചെടികൾ കൂമ്പാരമായി മുകളിലേക്ക് ശ്രേണീകരിച്ച് വ്യക്തിഗത പൊസിഷനിംഗ് സാധ്യമാക്കുന്നു
> 🎯 **അത് എന്തിന് ആവശ്യമാണ്**: അടുത്ത പാഠത്തിൽ ചെടികൾ ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് ചെയ്യാവുന്നവയാക്കാൻ absolute പൊസിഷനിംഗ് വേണം. ഇത് അവരെ സാധാരണ ലേയൗട്ട് ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്യുന്നു.
✅ **പരീക്ഷണം**: പൊസിഷൻ മൂല്യങ്ങൾ മാറ്റി ഫലങ്ങൾ കാണൂ:
- `.container`-ന് `absolute` ന്റെ പകരം `relative` നു മാറ്റിയാൽ സംഭവിക്കുന്നത് എന്താകും?
- `.plant-holder` `relative` പകരം `absolute` ഉപയോഗിച്ചാൽ ലേയൗട്ട് എങ്ങനെയാണ് മാറുക?
- `.plant`-നെ `relative` പോസിഷൻ ചെയ്യുമ്പോൾ എന്ത് സംഭവിക്കും?
### 🔄 **പെടഗോഗിക്കൽ ചെക്ക്- ഇൻ**
**CSS പോസിഷനിംഗ് മാസ്ററീ**: നിങ്ങളുടെ മനസിലാക്കലുകൾ പരിശോധിക്കുക:
- ✅ പ്ലാന്റുകൾക്ക് ഡ്രാഗ്-അൻഡ്-ഡ്രോപ്പ് സജ്ജമാക്കാൻ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് എങ്ങനെ സഹായിക്കുന്നു എന്ന് വിശദീകരിക്കാമോ?
- ✅ റീലേറ്റീവ് കോൺടൈനറുകൾ പോസിഷനിംഗ് കോൺടെക്സ്റ്റ് എങ്ങനെ സൃഷ്ടിക്കുന്നു എന്ന് മനസിലായോ?
- ✅ സൈഡ് കോൺടൈനറുകൾ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്?
- ✅ പ്ലേസ്മന്റും പൊസിഷൻ ഡിക്ലറേഷനുകളും മാറിക്കളയുമ്പോൾ എന്ത് സംഭവിക്കും?
**യഥാർത്ഥ ലോക ബന്ധം**: CSS-ലെ പോസിഷനിംഗ് യാഥാർത്ഥ്യത്തിലെ ലേയൗട്ടുമായി എങ്ങനെ പാരമ്പര്യമുള്ളതാണെന്ന് കാണുക:
- **സ്റ്റാറ്റിക്**: മുറ്റത്തുള്ള പുസ്തകങ്ങൾ (സ്വാഭാവിക ക്രമം)
- **രീലേറ്റീവ്**: ഒരു പുസ്തകം അല്പം നസുക്കിയെങ്കിലും അതിന്റെ സ്ഥാനം സൂക്ഷിക്കുക
- **ആബ്സല്യൂട്ട്**: ഒരു മാർക്കർ കൃത്യമായ പേജിൽ സ്ഥാപിക്കൽ
- **ഫിക്സ്**: വായിക്കുമ്പോൾ ചുരുളുന്ന സ്റ്റിക്കി നോട്ട്
## CSS ഉപയോഗിച്ച് ടെറിയം നിർമ്മാണം
ഇപ്പോൾ CSS മാത്രം ഉപയോഗിച്ച് ഗ്ലാസ് ജാർ നിർമ്മിക്കാം - ചിത്രങ്ങൾ അല്ലെങ്കിൽ ഗ്രാഫിക്സ് സോഫ്റ്റ്വേർ ആവശ്യമില്ല.
പോസിഷനിംഗ്, ട്രാൻസ്പറൻസി എന്നിവ ഉപയോഗിച്ച് യാഥാർത്ഥ്യസമമായ ഗ്ലാസ്, ഷാഡോസ്, ആഴം സൃഷ്ടിക്കുന്നത് CSS–ന്റെ ദൃശ്യശേഷിയെ കാണിക്കുന്നു. ബൗഹൗസ് പ്രസ്ഥാനത്തിലെ ആർക്കിടെക്റ്റുകൾ എങ്ങനെ ലളിതമായ ജ്യാമിതീയ രൂപങ്ങൾ ഉപയോഗിച്ച് സങ്കീർണ്ണവും മനോഹരവുമായ ഘടനകൾ സൃഷ്ടിച്ചു എന്ന പോലെ, ഈ സിദ്ധാന്തങ്ങൾ മനസിലാക്കിയാൽ നീ רבות വെബ് ഡിസൈനുകളിലെ CSS സാങ്കേതിക വിദ്യ തിരിച്ചറിയാം.
```mermaid
flowchart LR
A[ജാർ മുകളിൽ] --> E[പൂർണ്ണ ടെരറിയം]
B[ജാർ മതിലുകൾ] --> E
C[മണ്ണ് പാളി] --> E
D[ജാർ അടിയുടെ] --> E
F[ഗ്ലാസ് ഫലങ്ങള്] --> E
A1["50% വീതി
5% ഉയരം
മുകളിൽ സ്ഥാനം"] --> A
B1["60% വീതി
80% ഉയരം
വെട്ടിപ്പടർന്നCorners
0.5 അപാരദർശിനി"] --> B
C1["60% വീതി
5% ഉയരം
കറുത്ത തവിട്ട്
അടിമുള്ള പാളി"] --> C
D1["50% വീതി
1% ഉയരം
താഴെ സ്ഥാനം"] --> D
F1["സൂക്ഷ്മ നിഴലുകൾ
പരദർശിത്വം
സ് iziൻഡ് ലെയറിംഗ്"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### ഗ്ലാസ്സ് ജാർ ഘടകങ്ങൾ ഉണ്ടാക്കൽ
ടെറിയം ജാറിന്റെ ഘടകങ്ങൾ ഓരോന്നായി ഉണ്ടാക്കാം. ഓരോ ഭാഗവും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുകയും ശതമാനത്തിലുള്ള അളവുകൾ ഉപയോഗിച്ച് റെസ്പോമ്സീവ് ഡിസൈൻ ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**ടെറിയം നിർമ്മിതിയുടെ അറിവ്:**
- സ്ക്രീൻ വലുപ്പങ്ങളിൽ രേഖാത്മകമായ സ്കെയ്ലിംഗിന് ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ ഉപയോഗിക്കുന്നു
- ഘടകങ്ങളെ കൃത്യമായി ചേർക്കാനും ക്രമീകരിക്കാനും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നു
- ഗ്ലാസ് ട്രാൻസ്പറൻസി ഫലത്തിനായി വ്യത്യസ്ത ഒപ്പസിറ്റി മൂല്യങ്ങൾ നോക്കുന്നു
- വനaspാപങ്ങൾ ജാറിന് ഉള്ളിൽ കാണാനും `z-index` ലെയർ ചെയ്യുന്നു
- യഥാർത്ഥത കൂടിയ എഫക്ടിനായി നേർത്ത ബോക്സ് ഷാഡോയും ബോർഡർ-റേഡിയസും കൂട്ടിക്കുന്നു
### ശതമാന അടിസ്ഥാനത്തിലുള്ള റെസ്പോൺസീവ് ഡിസൈൻ
എല്ലാ അളവുകളും പിക്സൽ സ്ഥിരമല്ല, ശതമാനമാണ് ഉപയോഗിക്കുന്നത്:
**കാര്യതമ്യം:**
- എന്ത് വലുപ്പമുള്ള സ്ക്രീനിലും ടെറിയം ശരിയായി സ്കെയിൽ ചെയ്യാൻ സഹായിക്കുന്നു
- ജാർ ഘടകങ്ങൾ തമ്മിലുള്ള ദൃശ്യ ബന്ധം നിലനിർത്തുന്നു
- മൊബൈൽ ഫോണിൽ നിന്നും വലിയ ഡെസ്ക്ക്ടോപ്പ് മോണിറ്ററുകൾ വരെ സമാന അനുഭവം നൽകുന്നു
- ശൈലി തുടർന്നും തകർക്കാതെ അനുയോജ്യമായി ഒത്തുചേരാൻ സാധിക്കുന്നു
### CSS ഘടകങ്ങളുടെ പ്രവർത്തനം
`rem` യൂണിറ്റുകൾ ബോർഡർ-റേഡിയസിനായി ഉപയോഗിക്കുന്നതാണ്, ഇത് റൂട്ട് ഫോണ്ട് സൈസിനെ അടിസ്ഥാനമാക്കി സ്കെയിൽ ചെയ്യുന്നു. ഇത് ഉപയോക്താക്കളുടെ ഫോണ്ട് ഇഷ്ടാനുസരണം രോഗിപോകുന്നതിന് അനുയോജ്യമാണ്. കൂടുതൽ പഠിക്കാൻ [CSS.Relative Units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) സന്ദർശിക്കുക.
✅ **ദൃശ്യപര പരീക്ഷണം**: താഴെ പറയുന്ന മൂല്യങ്ങൾ മാറ്റി കാണൂ:
- ജാറിന്റെ ഒപ്പസിറ്റി 0.5-ൽനിന്ന് 0.8-ലേക്ക് മാറ്റുക – ഗ്ലാസ് എങ്ങനെ മാറുന്നു?
- മണ്ണിന്റെ നിറം `#3a241d`-നിന്ന് `#8B4513`-ലേക്ക് മാറ്റുക – ദൃശ്യപരമായി എന്ത് വ്യത്യാസം കാണുന്നു?
- മണ്ണിന്റെ `z-index` 2 ആക്കി മാറ്റുക – ലെയറിംഗ് എങ്ങനെയാണ് മാറുന്നത്?
### 🔄 **പെഡഗോഗിക്കൽ ചെക്കിൻ**
**CSS ദൃശ്യ ഡിസൈൻ മനസ്സിലാക്കൽ**: നിങ്ങളുടെ അറിവ് സ്ഥിരീകരിക്കുക:
- ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ റെസ്പോൺസീവ് ഡിസൈൻ എങ്ങനെ സൃഷ്ടിക്കുന്നു?
- ഒപ്പസിറ്റി ഗ്ലാസ് ട്രാൻസ്പറൻസി എങ്ങനെ ഉണ്ടാക്കുന്നു?
- ലെയറിങ്ങിൽ `z-index` എന്ത് പങ്കുവഹിക്കുന്നു?
- ബോർഡർ-റേഡിയസ് മൂല്യങ്ങൾ ജാർ ആകൃതി എങ്ങനെ സൃഷ്ടിക്കുന്നു?
**ഡിസൈൻ സിദ്ധാന്തം**: ലളിതമായ രൂപങ്ങളിൽ നിന്ന് സങ്കീർണ്ണ ദൃശ്യങ്ങളുണ്ടാകുന്നത് ശ്രദ്ധിക്കുക:
1. **റെക്റ്റേംഗിളുകൾ** → **റൗണ്ടഡ് റെക്റ്റേംഗിളുകൾ** → **ജാർ ഘടകങ്ങൾ**
2. **സാധാരണ നിറങ്ങൾ** → **ഒപ്പസിറ്റി** → **ഗ്ലാസ് ഇഫക്ട്**
3. **വ്യക്തിഗത ഘടകങ്ങൾ** → **ലെയേർ ചെയ്ത ഘടന** → **3D ദൃശ്യപ്രഭാവം**
---
## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള ചാലഞ്ച് പൂർത്തിയാക്കുക:
**വിവരണം:** ടെറിയത്തിലെ സസ്യങ്ങൾ സ്വാഭാവിക ഗాలിയുടെ സുവിശേഷം പോലെ ഹൃദയസ്പർശിയായപ്പോൾ മുമ്പ്-പിന്നിലേക്ക് അലഞ്ഞു നടക്കാൻ CSS ആനിമേഷൻ സൃഷ്ടിക്കുക. CSS ആനിമേഷനുകൾ, ട്രാൻസ്ഫോംസ്, കീഫ്രെയിംസ് അഭ്യാസം ചെയ്യാൻ ഇത് സഹായിക്കും കൂടാതെ ടെറിയം ദൃശ്യശോഭ വർധിപ്പിക്കും.
**പ്രോംപ്റ്റ്:** ടെറിയത്തിലെ സസ്യങ്ങൾ ഇളംമറയുന്ന തരത്തിൽ മുന്നേയ്ക്കും പിൻവാങ്ങിയും അലഞ്ഞു നടക്കാൻ CSS കീഫ്രെയിം ആനിമേഷൻ ചേർക്കുക. ഓരോ സസ്യവും (2-3 ഡിഗ്രി) നേരെ ഇടത്തും വലത്തും തിരിയുന്ന 3-4 സെക്കൻഡ് ദൈർഘ്യമുള്ള സ്വേയിങ് ആനിമേഷൻ സൃഷ്ടിച്ച് `.plant` ക്ലാസ്സിന് നൽകുക. ആനിമേഷൻ നിർവഹിച്ചു ഇൻഫിനിറ്റ് ലൂപ്പ് ചെയ്യുകയും പ്രകൃതിദൃശ്യ ചലനത്തിനായി ഈസിങ്ങ് ഫങ്ഷൻ ഉപയോഗിക്കുകയും ചെയ്യണം.
**കൂടുതൽ വിവരങ്ങൾക്ക്** [ഏജന്റ് മോഡ്](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സന്ദർശിക്കുക.
## 🚀 ചാലഞ്ച്: ഗ്ലാസ് പരിഭ്രംശങ്ങൾ കൂട്ടുക
റിയലിസ്റ്റിക് ഗ്ലാസ് പരിഭ്രംശങ്ങൾ जोड़ാൻ തയ്യാറാവൂ? ഇത് ഡിസൈൻക്ക് ഗാഢതയും യാഥാർത്ഥ്യവും നൽകും.
കുറച്ച് വെളുത്ത അല്ലെങ്കിൽ ഏകദേശം വെളിച്ചമുള്ള ഒവൽ ആകൃതികൾ സൃഷ്ടിക്കുക, ജാറിന്റെ ഇടത് ഭാഗത്ത് നിർദ്ദേശിത സ്ഥാനങ്ങളിൽ വைக்கുക. യഥാർത്ഥതയുള്ള വെളിച്ചം പ്രതിഫലിപ്പിക്കുന്നതിനായി അനുയോജ്യമായ ഒപ്പസിറ്റി, ബ്ലർ എഫക്ടുകൾ പ്രയോഗിക്കുക. ഓർഗാനിക് ബബിള് ആകൃതികൾക്കായി `border-radius` ഉപയോഗിക്കുക. മികച്ച യഥാർത്ഥതക്കായി ഗ്രേഡിയന്റ് അല്ലെങ്കിൽ ബോക്സ്-ഷാഡോസ് പരീക്ഷിക്കുക.
## പൂർവ്വ ലക്ചർ ക്വിസ്
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/18)
## നിങ്ങളുടെ CSS അറിവ് വികസിപ്പിക്കുക
ആദ്യമായി CSS ചിലപ്പോൾ സങ്കീർണ്ണമായിരിക്കാം, എന്നാൽ ഈ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ മനസിലാക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള സാങ്കേതിക വിദ്യകൾക്ക് നല്ല അടിസ്ഥാനം നൽകുന്നു.
**നിങ്ങളുടെ അടുത്ത CSS പഠന മേഖലകൾ:**
- **ഫ്ലെക്സ്ബോക്സ്** - ഘടകങ്ങളുടെ അലൈന്മെന്റും വിതരണവും ലളിതമാക്കുന്നു
- **CSS ഗ്രിഡ്** - സങ്കീർണ്ണ ലേയൗട്ടുകൾ സൃഷ്ടിക്കാൻ ശക്തമായ ഉപകരണങ്ങൾ നൽകുന്നു
- **CSS വേരിയബിള്സ്** - പുനരാവർത്തനത്തിനെ കുറയ്ക്കുകയും നിലനിർത്തലും മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു
- **റെസ്പോൺസീവ് ഡിസൈൻ** - വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സൈറ്റുകൾ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുന്നു
### ഇന്ററാക്ടീവ് ലേണിംഗ് സ്രോതസുകൾ
ഈ ആശയങ്ങൾ പ്രായോഗികമായി അഭ്യാസിക്കാം ഈ രസകരമായ ഗെയിമുകൾ വഴി:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - രസകരമായ ചാലഞ്ചുകൾ വഴി ഫ്ലെക്സ്ബോക്സ് പഠിക്കുക
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS ഗ്രിഡ് പരിശീലനം വെച്ച കർഷിണി വളർത്തുക
- 🎯 [CSS Battle](https://cssbattle.dev/) - CSS കഴിവുകൾ കോഡിംഗ് ചാലഞ്ചുകളിൽ പരീക്ഷിക്കുക
### അധിക പഠനം
CSS അടിസ്ഥാനപരമായും വിശദമായും പഠിക്കാനുള്ള ഈMicrosoft Learn മോഡ്യൂൾ പൂർത്തിയാക്കുക: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **നിമിഷം 5-ൽ ചെയ്യാനുള്ളത്**
- [ ] ഡെവ്ടൂൾസ് തുറന്ന് Elements പാനലിൽ വെബ്സൈറ്റിലെ CSS സ്റ്റൈലുകൾ പരിശോധിക്കുക
- [ ] ലളിതമായ CSS ഫയൽ ഉണ്ടാക്കി HTML പേജുമായി ലിങ്ക് ചെയ്യുക
- [ ] നിറം മാറ്റാൻ തെളിയിക്കാം: ഹെക്സ്, RGB, പേരിട്ട നിറങ്ങൾ എന്നിവ ഉപയോഗിക്കുക
- [ ] പാഡിംഗും മാർജിനും ചേർത്ത് ബോക്സ് മോഡൽ അഭ്യാസിക്കുക
### 🎯 **ഈ മണിക്കൂർ ചെയ്യാൻ സാധിക്കുന്ന കാര്യങ്ങൾ**
- [ ] പോസ്റ്റ്-ലെഷൻ ക്വിസ് പൂർത്തിയാക്കി CSS അടിസ്ഥാനങ്ങൾ അവലോകനം ചെയ്യുക
- [ ] HTML പേജ് ഫോണ്റ്, നിറം, ശൂന്യത എന്നിവ കൊണ്ട് സ്റ്റൈൽ ചെയ്യുക
- [ ] ഫ്ലെക്സ്ബോക്സോ ഗ്രിഡ് ഉപയോഗിച്ച് ലളിതമായ ലേയൗട്ട് സൃഷ്ടിക്കുക
- [ ] CSS ട്രാൻസിഷനുകൾ പരീക്ഷിച്ച് സ്മൂത്ത് എഫക്ടുകള് ആസ്വദിക്കുക
- [ ] മീഡിയ ക്വയറികളിലൂടെ റെസ്പോൺസീവ് ഡിസൈനിൽ അഭ്യാസം നടത്തുക
### 📅 **നിങ്ങളുടെ ആഴ്ച നീണ്ട CSS സാഹസം**
- [ ] സൃഷ്ടിപരമായ രീതിയിൽ ടെറിയം സ്റ്റൈലിംഗ് അസൈൻമെന്റ് പൂർത്തിയാക്കുക
- [ ] ഫോട്ടോ ഗാലറി ലേയൗട്ട് നിർമാണത്തിന് CSS ഗ്രിഡ് മ-striped
- [ ] CSS ആനിമേഷനുകൾ പഠിച്ച് ഡിസൈൻകൾക്ക് ജീവൻ നൽകുക
- [ ] SASS, LESS പോലുള്ള CSS പ്രീപ്രോസസ്സറുകൾ അന്വേഷിക്കുക
- [ ] ഡിസൈൻ തത്ത്വങ്ങൾ പഠിച്ച് CSS- ൽ പ്രയോഗിക്കുക
- [ ] ആസ്വദനീയമായ ഡിസൈനുകൾ അനാലൈസ് ചെയ്ത് പുനഃസംസ്കരണം ചെയ്യുക
### 🌟 **നിങ്ങളുടെ മാസം നീണ്ട ഡിസൈൻ മാസ്റ്ററി**
- [ ] സമ്പൂർണ റെസ്പോൺസീവ് വെബ്സൈറ്റ് ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കുക
- [ ] CSS-IN-JS അല്ലെങ്കിൽ utility-first ഫ്രെയിംവർക്കുകൾ (Tailwind) പഠിക്കുക
- [ ] CSS മെച്ചപ്പെടുത്തലുകൾ കൊണ്ട് ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റുകളിൽ പങ്കുചേരുക
- [ ] CSS കസ്റ്റം പ്രോപ്പർട്ടീസും containment പോലുള്ള ആധുനിക ആശയങ്ങളില് മ-striped
- [ ] മോഡുലാർ CSS ഉപയോഗിച്ച് പുനരുപയോഗയോഗ്യമായ 컴്പോണെന്റ് ലൈബ്രറികൾ സൃഷ്ടിക്കുക
- [ ] പുതുതായി CSS പഠിക്കുന്നവരെ മോർഗനൈസുചെയ്യുകയും ഡിസൈൻ അറിവ് പങ്കിടുകയുമാണ്
## 🎯 നിങ്ങളുടെ CSS മാസ്റ്ററി ടൈംലൈൻ
```mermaid
timeline
title CSS പഠന പുരോഗതി
section അടിസ്ഥാനപരമായത് (10 മിനിട്ടുകൾ)
ഫയൽ കണക്ഷൻ: CSS നെ HTML-ലേക്ക് ലിങ്ക് ചെയ്യുക
: കാസ്കേഡ് നിയമങ്ങൾ മനസിലാക്കുക
: പാരമ്പര്യത്തിന്റെ അടിസ്ഥാനങ്ങൾ പഠിക്കുക
section സെലക്ടറുകൾ (15 മിനിട്ടുകൾ)
ഘടകങ്ങൾ ലക്ഷ്യമിടൽ: ഘടക സെലക്ടറുകൾ
: ക്ലാസ് പാറ്റേണുകൾ
: ഐഡി സ്പെസിഫിസിറ്റി
: കോംബിനേറ്ററുകൾ
section ബോക്സ് മോഡൽ (20 മിനിട്ടുകൾ)
ലേയൗട്ട് അടിസ്ഥാനങ്ങൾ: മാർജിൻ, പാഡിംഗ്
: ബോർഡർ ഗുണങ്ങൾ
: ഉള്ളടക്കത്തിന്റെ വലിപ്പം
: ബോക്സ്-സൈസിംഗ് പെരുമാറ്റം
section സ്ഥാനനിർണ്ണയം (25 മിനിട്ടുകൾ)
ഘടകസ്ഥാനം: സ്റ്റാറ്റിക് vs റിലേറ്റീവ്
: ആബ്സല്യൂട്ട് സ്ഥാനനിർണ്ണയം
: Z-ഇൻഡക്സ് ലെയറിംഗ്
: റെസ്പോൺസീവ് യൂണിറ്റുകൾ
section ദൃശ്യ ഡിസൈൻ (30 മിനിട്ടുകൾ)
സ്റ്റൈലിംഗ് മാട്സറി: നിറങ്ങളും തീവ്രതയും
: ഷാഡോസ് మరియు എഫക്ടുകൾ
: ട്രാൻസിഷനുകൾ
: ട്രാൻസ്ഫോം ഗുണങ്ങൾ
section റെസ്പോൺസീവ് ഡിസൈൻ (45 മിനിട്ടുകൾ)
മൾട്ടി-ഡിവൈസ് പിന്തുണ: മീഡിയ ക്വയറികൾ
: സാന്ധ്യ ലേയൗട്ടുകൾ
: മൊബൈൽ-ഫസ്റ്റ് സമീപനം
: വ്യൂപോർട്ട് ഒപ്റ്റിമൈസേഷൻ
section ഉയർന്ന സാങ്കേതിക തന്ത്രങ്ങൾ (1 ആഴ്ച)
ആധുനിക CSS: Flexbox ലേയൗട്ടുകൾ
: CSS ഗ്രിഡ് സിസ്റ്റങ്ങൾ
: കസ്റ്റം ഗുണങ്ങൾ
: ആനിമേഷൻ കീഫ്രെയിംസ്
section പ്രൊഫഷണൽ കഴിവുകൾ (1 മാസം)
CSS ആർക്കിടെക്ചർ: ഘടക പാറ്റേണുകൾ
: പരിപാലനക്ഷമമായ കോഡ്
: പ്രകടന മെച്ചപ്പെടുത്തൽ
: ക്രോസ്-ബ്രൗസർ അനുയോജ്യത
```
### 🛠️ നിങ്ങളുടെ CSS ഉപകരണപ്പെട്ടി സംഗ്രഹം
ഈ പാഠം പൂർത്തിയാക്കിയതിനു ശേഷം, നിങ്ങക്കുണ്ട്:
- **കാസ്കേഡ് മനസ്സിലാക്കൽ**: സ്റ്റൈലുകൾ എങ്ങനെ ഒരുമിച്ച് വമ്പിച്ചു അതിരുകളെ മറികടക്കുന്നു
- **സെലക്ടർ മാസ്റ്ററി**: ഏലമെന്റുകൾ, ക്ലാസ്സുകൾ, ഐഡിയーズ വഴി കൃത്യമായ ലക്ഷ്യമിടൽ
- **പോസിഷനിംഗ് നൈപുണ്യം**: ഘടകങ്ങളുടെ സമർത്ഥമായ സ്ഥാനമാറ്റവും ലെയറിങ്ങും
- **ദൃശ്യമാന ഡിസൈൻ**: ഗ്ലാസ് ഇഫക്ട്, ഷാഡോസ്, ട്രാൻസ്പറൻസി സൃഷ്ടിക്കൽ
- **റെസ്പോൺസീവ് സാങ്കേതിക വിദ്യകൾ**: ഏതൊരു സ്ക്രീനിലും പൊരുത്തപ്പെടുന്ന ശതമാന അടിസ്ഥാന ലേയൗട്ട്
- **കോഡ് സംഘടന**: ശുചിത്വം പാലിച്ച, നിലതിരുന്നതുമായ CSS ഘടന
- **ആധുനിക പ്രയോഗങ്ങൾ**: റിലേറ്റീവ് യൂണിറ്റുകളും ആക്സസിബിൾ ഡിസൈൻ പാറ്റേണുകളും ഉപയോഗിക്കൽ
**അടുത്തു ചെയ്യേണ്ടത്**: ടെറിയത്തിന് ഇപ്പോൾ ഘടന (HTML) കൂടാതെ സ്റ്റൈൽ (CSS) ഉണ്ട്. അവസാന പാഠത്തിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇന്ററാക്ടിവിറ്റിഫ് കൂട്ടും!
## അസൈൻമെന്റ്
[CSS Refactoring](assignment.md)
---
**വിമര്ശനം**:
ഈ ദസ്താവേജ് AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം പരിഭാഷയുടെ കൃത്യതയ്ക്ക് ശ്രമിക്കുമ്പോഴും, സ്വയംമാറ്റത്തിലുള്ള പരിഭാഷകളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്നത് ശ്രദ്ധിക്കുക. ജന്മഭാഷയിലുള്ള originele ദസ്താവേ俺也去 അധികാരמקൂലം കണക്കാക്കണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിലുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണക്കോ തെറ്റായ വ്യാഖ്യാനത്തൊഴിച്ചുകൂടി ഞങ്ങൾ ഉത്തരവാദിത്വം വരുത്തുകയില്ല.
`-ന്റെ നിറം എന്താകും?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു)*
## CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക
CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്.
CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ.
### എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ)
എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**ഈ സ്റ്റൈലുകൾ അത്രയ്ക്കായി:**
- പേജ് മുഴുവൻ ഏകീകൃത ടൈപ്പോഗ്രഫി കാണിക്കാൻ `body` സെലക്ടർ ഉപയോഗിക്കുന്നു
- മികച്ച നിയന്ത്രണത്തിനായി ബ്രൗസറിന്റെ ഡീഫോൾട്ട് മാർജിനുകളും പാഡിംഗുകളും നീക്കം ചെയ്യുന്നു
- എല്ലാ ഹെഡിംഗ് എലമെന്റുകളെയും നിറം, സന്ധി, അലൈന്മെന്റ് നൽകുന്നു
- സ്കെയിലബിൾ, ആക്സസിബിൾ ഫോണ്ട് വലുപ്പത്തിന് `rem` യൂണിറ്റ് ഉപയോഗിക്കുന്നു
എങ്കിലും, എലമെന്റ് സെലക്ടറുകൾ സാധാരണ സ്റ്റൈലിംഗിന് നല്ലതായിരിക്കുമ്പോൾ, ഓരോ ടെററിയം ചെടികൾ പോലുള്ള പ്രത്യേക ഘടകങ്ങൾക്ക് കൂടുതൽ പ്രത്യേക സെലക്ടറുകൾ ആവശ്യമായിരിക്കും.
### ഏകാന്ത എലമെന്റുകൾക്കായി ID സെലക്ടറുകൾ
ID സെലക്ടറുകൾ `#` ചിഹ്നം ഉപയോഗിച്ച് പ്രത്യേക `id` ഉള്ള എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു. പേജിൽ ഓരോ ID ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്നറുകൾ) ഇവ നല്ലതാണ്.
ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**ഇവിടെ സംഭവിക്കുന്നത്:**
- `absolute` പൊസിഷനിംഗുമായി കണ്ടെയ്നറുകൾ ഇടത്തും വലത്തും നീക്കുന്നു
- സ്ക്രീൻ വലിപ്പത്തിന് അനുസരിച്ച് `vh` (viewport height) യൂണിറ്റിൽ ഉയരം നൽകുന്നു
- പാഡിംഗിൽ ഉൾപ്പെടുത്തിയവയ്ക്ക് `box-sizing: border-box` ഉപയോഗിക്കുന്നു
- സോഴ്യമായ ജൂലിയൻ മൂല്യങ്ങളിൽ നിന്നുള്ള `px` യൂണിറ്റുകൾ നീക്കി ലക്ഷ്യമിടുന്നു
- കഠിനമായ കറുപ്പുപകരം കണ്ണിന് ഇതിന് സൗകര്യമുള്ള സബ്റ്റിൽ പശ്ചാത്തല നിറം നൽകുന്നു
✅ **കോഡ് ഗുണമേന്മ പരിശോധന**: ഈ CSS DRY (Don't Repeat Yourself) നിയമം ലംഘിക്കുന്നതാണ് കാണുന്നത്. ഒരു ID ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ?
**മികച്ച സമരയോഗം:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### പുനരുപയോഗപ്പെടുത്താവുന്ന ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടറുകൾ
ക്ലാസ് സെലക്ടറുകൾ `.` ചിഹ്നം ഉപയോഗിച്ച് ഒടുക്കം ഒരു മുതിർന്ന ഇലമെന്റിന് പലത്തവണ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം. ID-കളുടെ വ്യത്യാസം, ക്ലാസുകൾ പേജിലുടനീളം വീണ്ടും ഉപയോഗിച്ചേക്കാം, അതുകൊണ്ട് സ്ഥിരമായ സ്റ്റൈലിംഗ് മാതൃകകൾക്കായി ഇവ ഏറ്റവും അനുയോജ്യമാണ്.
നമ്മുടെ ടെററിയത്തിൽ ഓരോ ചെടിക്കും സമാനമായ സ്റ്റൈലിംഗ് ആവശ്യമായിരിക്കുന്നു എങ്കിലും വ്യക്തിഗത പൊസിഷനിംഗ് വേണം. നാം പുനരുപയോഗ ക്ലാസ്സുകളും ID-യും സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം.
**ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന:**
```html
```
**പ്രധാന ഘടകങ്ങൾ:**
- എല്ലാ ചെടികൾക്കുമുള്ള പൊസിഷൻ കൺട്രോൾ ചെയ്യാൻ `class="plant-holder"` ഉപയോഗിക്കുന്നു
- ചിത്രത്തിനും പെരുമാറ്റത്തിനും `class="plant"` നൽകുന്നു
- ഓരോ ചെടിക്കും വ്യത്യസ്ത പൊസിഷനിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഉൾപെടുത്തലിനും വ്യത്യസ്ത ID `id="plant1"` ഉപയോഗിക്കുന്നു
- സ്ക്രീൻ റീഡർ സൗഹൃദം ഉറപ്പാക്കാൻ വിവരണപരമായ alt ടെക്സ്റ്റ് നൽകുന്നു
ഇപ്പൊഴിത് നിന്റെ `style.css` ഫയലിൽ വേറെ സ്റ്റൈലുകൾ ചേർക്കൂ:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**ഈ സ്റ്റൈലുകൾ വിശദീകരിക്കുക:**
- `plant-holder`-ന് `relative` പൊസിഷനിംഗ് വഴി പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് ഒരുക്കുന്നു
- ഓരോ `plant-holder`-നും 13% ഉയരം നൽകുന്നു, ചെടികൾ സ്ക്രോൾ ഇല്ലാതെ വീതിയിൽ പൊരുത്തപ്പെടും
- `plant-holder` ലെHolder-നെ കുറെ ഇടത്തേക്ക് മാറ്റി ചെടികളെ കൂടുതൽ കൃത്യമായി മദ്ധ്യസ്ഥമാക്കുന്നു
- `max-width` `max-height` ഉപയോഗിച്ച് ചെടികൾ പ്രതികരണശീലമായി സ്കെയിൽ ചെയ്യാനാവും
- `z-index` ഉപയോഗിച്ച് ടെററിയത്തിലെ മറ്റു ഘടകങ്ങളെ മുകളിൽ വയ്ക്കുന്നു
- CSS ട്രാനുംഷനുകൾ വഴി സാവധാനമായ ഹോവർ ഇഫക്റ്റ് ചേർക്കുന്നു
✅ **ആവശ്യക്കാഴ്ച**: `.plant-holder` ഉം `.plant` ഉം വേറിട്ടതിനുള്ള ആവശ്യകം എന്താണ്? വെറും ഒന്ന് മാത്രം ഉപയോഗിച്ചാൽ എന്താകും?
> 💡 **ഡിസൈൻ മാതൃക**: കോൺടെയ്നർ (.plant-holder) ലേയൗട്ടും പൊസിഷൻ നിയന്ത്രിക്കുന്നു, ഉള്ളടക്കം (.plant) ദൃശ്യഭാവവും സ്കേലും കൈകാര്യം ചെയ്യുന്നു. ഇത് കോഡ് കൂടുതൽ പുനഃസംഘടന ഉചിതമാക്കുന്നു.
## CSS പൊസിഷനിംഗ് മനസ്സിലാക്കുക
CSS പൊസിഷനിംഗ് ഒരു നാടകത്തിലെ സ്റ്റേജ് ഡയറക്ടറുടെ പോലെ - എല്ലാ അഭിനയക്കാരും എവിടെ നിൽക്കും, എങ്ങനെയാവരും എന്ന് നിർദ്ദേശിക്കുന്നു. ചില അഭിനേതാക്കൾ സാധാരണ നിലയിൽ നിന്നു പ്രവർത്തിക്കും, മറ്റുചിലർ പ്രത്യേക പൊസിഷനിംഗ് ആവശ്യമാണ്.
പോസിഷനിംഗ് മനസ്സിലാക്കിയാൽ പല ലേയൗട്ട് പ്രശ്നങ്ങളും പരിഹരിക്കാം. സ്ക്രോൾ ചെയ്യുമ്പോഴും നാവിഗേഷൻ ബാർ മുകളിൽ തന്നെ നിലനിർത്തണം? അതിന് പൊസിഷനിംഗ് ഉപയോഗിക്കുക. നിശ്ചിത ഇടത്ത് ടൂള്ടിപ്പ് കാണിക്കണം? അതും പൊസിഷനിംഗ്.
### അഞ്ച് പൊസിഷൻ മൂല്യങ്ങൾ
```mermaid
quadrantChart
title CSS പോസിഷനിംഗ് തന്ത്രം
x-axis ഡോക്യുമെന്റ് ഫ്ലോ --> ഫ്ലോയിൽ നിന്ന് നീക്കംചെയ്തത്
y-axis സ്റ്റാറ്റിക് പൊസിഷൻ --> കൃത്യമായ നിയന്ത്രണം
quadrant-1 അബ്സൊല്യൂട്ട്
quadrant-2 ഫിക്സഡ്
quadrant-3 സ്റ്റാറ്റിക്
quadrant-4 സ്റ്റിക്കി
Static: [0.2, 0.2]
Relative: [0.3, 0.6]
Absolute: [0.8, 0.8]
Fixed: [0.9, 0.7]
Sticky: [0.5, 0.9]
```
| പൊസിഷൻ മൂല്യം | പെരുമാറ്റം | ഉപയോഗം |
|----------------|----------|----------|
| `static` | സ്വാഭാവിക പ്രവാഹം, top/left/right/bottom അനുഗമിക്കില്ല | സാധാരണ ഡോക്യുമെന്റ് ലേയൗട്ട് |
| `relative` | സ്വാഭാവിക സ്ഥിതിക്ക് അനുഭവപരമായ പൊസിഷൻ | ചെറിയ ക്രമീകരണങ്ങൾ, പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കൽ |
| `absolute` | അടുത്ത പൊസിഷൻ ചെയ്ത അവകാശിയായ മുൻപുള്ള എലമെന്റിനെ അടിസ്ഥാനമാക്കി | കൃത്യമായ സ്ഥാനം, ഓവർലെകൾ |
| `fixed` | viewport അടിസ്ഥാനമാക്കിയുള്ള പൊസിഷൻ | നാവിഗേഷൻ ബാറുകൾ, നിറഞ്ഞ എലമെന്റുകൾ |
| `sticky` | സ്ക്രോൾ അനുസരിച്ച് `relative`നും `fixed`ക്കും ഇടയിൽ മാറുന്നു | സ്ക്രോൾ ചെയ്യുമ്പോൾ പിടിച്ചുനിർത്തുന്ന ഹെഡറുകൾ |
### നമുക്ക് കിട്ടിയ ടെററിയത്തിൽ പൊസിഷനിംഗ്
നമ്മുടെ ടെററിയം ഉദ്ദേശിച്ച ലേയൗട്ട് സൃഷ്ടിക്കാൻ പൊസിഷനിംഗ് മൂല്യങ്ങളുടെ സമന്വയം ഉപയോഗിക്കുന്നു:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**പോസിഷനിംഗ് തന്ത്രം:**
- **Absolute കൺടെയ്നറുകൾ** സ്വാഭാവിക ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്ത് സ്ക്രീൻ അരികുകളിൽ പിണ്ഡ് ചെയ്യുന്നു
- **Relative ചെടി holder-കൾ** പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നു, ഡോക്യുമെന്റ് ഫ്ലോയിൽ തുടരുന്നു
- **Absolute ചെടികൾ** അവരുടെ relative holder-ലുള്ള കൃത്യമായ പൊസിഷനം നേടുന്നു
- **ഈ സംയോജനം** ചെടികൾ കൂമ്പാരമായി മുകളിലേക്ക് ശ്രേണീകരിച്ച് വ്യക്തിഗത പൊസിഷനിംഗ് സാധ്യമാക്കുന്നു
> 🎯 **അത് എന്തിന് ആവശ്യമാണ്**: അടുത്ത പാഠത്തിൽ ചെടികൾ ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് ചെയ്യാവുന്നവയാക്കാൻ absolute പൊസിഷനിംഗ് വേണം. ഇത് അവരെ സാധാരണ ലേയൗട്ട് ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്യുന്നു.
✅ **പരീക്ഷണം**: പൊസിഷൻ മൂല്യങ്ങൾ മാറ്റി ഫലങ്ങൾ കാണൂ:
- `.container`-ന് `absolute` ന്റെ പകരം `relative` നു മാറ്റിയാൽ സംഭവിക്കുന്നത് എന്താകും?
- `.plant-holder` `relative` പകരം `absolute` ഉപയോഗിച്ചാൽ ലേയൗട്ട് എങ്ങനെയാണ് മാറുക?
- `.plant`-നെ `relative` പോസിഷൻ ചെയ്യുമ്പോൾ എന്ത് സംഭവിക്കും?
### 🔄 **പെടഗോഗിക്കൽ ചെക്ക്- ഇൻ**
**CSS പോസിഷനിംഗ് മാസ്ററീ**: നിങ്ങളുടെ മനസിലാക്കലുകൾ പരിശോധിക്കുക:
- ✅ പ്ലാന്റുകൾക്ക് ഡ്രാഗ്-അൻഡ്-ഡ്രോപ്പ് സജ്ജമാക്കാൻ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് എങ്ങനെ സഹായിക്കുന്നു എന്ന് വിശദീകരിക്കാമോ?
- ✅ റീലേറ്റീവ് കോൺടൈനറുകൾ പോസിഷനിംഗ് കോൺടെക്സ്റ്റ് എങ്ങനെ സൃഷ്ടിക്കുന്നു എന്ന് മനസിലായോ?
- ✅ സൈഡ് കോൺടൈനറുകൾ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്?
- ✅ പ്ലേസ്മന്റും പൊസിഷൻ ഡിക്ലറേഷനുകളും മാറിക്കളയുമ്പോൾ എന്ത് സംഭവിക്കും?
**യഥാർത്ഥ ലോക ബന്ധം**: CSS-ലെ പോസിഷനിംഗ് യാഥാർത്ഥ്യത്തിലെ ലേയൗട്ടുമായി എങ്ങനെ പാരമ്പര്യമുള്ളതാണെന്ന് കാണുക:
- **സ്റ്റാറ്റിക്**: മുറ്റത്തുള്ള പുസ്തകങ്ങൾ (സ്വാഭാവിക ക്രമം)
- **രീലേറ്റീവ്**: ഒരു പുസ്തകം അല്പം നസുക്കിയെങ്കിലും അതിന്റെ സ്ഥാനം സൂക്ഷിക്കുക
- **ആബ്സല്യൂട്ട്**: ഒരു മാർക്കർ കൃത്യമായ പേജിൽ സ്ഥാപിക്കൽ
- **ഫിക്സ്**: വായിക്കുമ്പോൾ ചുരുളുന്ന സ്റ്റിക്കി നോട്ട്
## CSS ഉപയോഗിച്ച് ടെറിയം നിർമ്മാണം
ഇപ്പോൾ CSS മാത്രം ഉപയോഗിച്ച് ഗ്ലാസ് ജാർ നിർമ്മിക്കാം - ചിത്രങ്ങൾ അല്ലെങ്കിൽ ഗ്രാഫിക്സ് സോഫ്റ്റ്വേർ ആവശ്യമില്ല.
പോസിഷനിംഗ്, ട്രാൻസ്പറൻസി എന്നിവ ഉപയോഗിച്ച് യാഥാർത്ഥ്യസമമായ ഗ്ലാസ്, ഷാഡോസ്, ആഴം സൃഷ്ടിക്കുന്നത് CSS–ന്റെ ദൃശ്യശേഷിയെ കാണിക്കുന്നു. ബൗഹൗസ് പ്രസ്ഥാനത്തിലെ ആർക്കിടെക്റ്റുകൾ എങ്ങനെ ലളിതമായ ജ്യാമിതീയ രൂപങ്ങൾ ഉപയോഗിച്ച് സങ്കീർണ്ണവും മനോഹരവുമായ ഘടനകൾ സൃഷ്ടിച്ചു എന്ന പോലെ, ഈ സിദ്ധാന്തങ്ങൾ മനസിലാക്കിയാൽ നീ רבות വെബ് ഡിസൈനുകളിലെ CSS സാങ്കേതിക വിദ്യ തിരിച്ചറിയാം.
```mermaid
flowchart LR
A[ജാർ മുകളിൽ] --> E[പൂർണ്ണ ടെരറിയം]
B[ജാർ മതിലുകൾ] --> E
C[മണ്ണ് പാളി] --> E
D[ജാർ അടിയുടെ] --> E
F[ഗ്ലാസ് ഫലങ്ങള്] --> E
A1["50% വീതി
5% ഉയരം
മുകളിൽ സ്ഥാനം"] --> A
B1["60% വീതി
80% ഉയരം
വെട്ടിപ്പടർന്നCorners
0.5 അപാരദർശിനി"] --> B
C1["60% വീതി
5% ഉയരം
കറുത്ത തവിട്ട്
അടിമുള്ള പാളി"] --> C
D1["50% വീതി
1% ഉയരം
താഴെ സ്ഥാനം"] --> D
F1["സൂക്ഷ്മ നിഴലുകൾ
പരദർശിത്വം
സ് iziൻഡ് ലെയറിംഗ്"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### ഗ്ലാസ്സ് ജാർ ഘടകങ്ങൾ ഉണ്ടാക്കൽ
ടെറിയം ജാറിന്റെ ഘടകങ്ങൾ ഓരോന്നായി ഉണ്ടാക്കാം. ഓരോ ഭാഗവും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുകയും ശതമാനത്തിലുള്ള അളവുകൾ ഉപയോഗിച്ച് റെസ്പോമ്സീവ് ഡിസൈൻ ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു:
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**ടെറിയം നിർമ്മിതിയുടെ അറിവ്:**
- സ്ക്രീൻ വലുപ്പങ്ങളിൽ രേഖാത്മകമായ സ്കെയ്ലിംഗിന് ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ ഉപയോഗിക്കുന്നു
- ഘടകങ്ങളെ കൃത്യമായി ചേർക്കാനും ക്രമീകരിക്കാനും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നു
- ഗ്ലാസ് ട്രാൻസ്പറൻസി ഫലത്തിനായി വ്യത്യസ്ത ഒപ്പസിറ്റി മൂല്യങ്ങൾ നോക്കുന്നു
- വനaspാപങ്ങൾ ജാറിന് ഉള്ളിൽ കാണാനും `z-index` ലെയർ ചെയ്യുന്നു
- യഥാർത്ഥത കൂടിയ എഫക്ടിനായി നേർത്ത ബോക്സ് ഷാഡോയും ബോർഡർ-റേഡിയസും കൂട്ടിക്കുന്നു
### ശതമാന അടിസ്ഥാനത്തിലുള്ള റെസ്പോൺസീവ് ഡിസൈൻ
എല്ലാ അളവുകളും പിക്സൽ സ്ഥിരമല്ല, ശതമാനമാണ് ഉപയോഗിക്കുന്നത്:
**കാര്യതമ്യം:**
- എന്ത് വലുപ്പമുള്ള സ്ക്രീനിലും ടെറിയം ശരിയായി സ്കെയിൽ ചെയ്യാൻ സഹായിക്കുന്നു
- ജാർ ഘടകങ്ങൾ തമ്മിലുള്ള ദൃശ്യ ബന്ധം നിലനിർത്തുന്നു
- മൊബൈൽ ഫോണിൽ നിന്നും വലിയ ഡെസ്ക്ക്ടോപ്പ് മോണിറ്ററുകൾ വരെ സമാന അനുഭവം നൽകുന്നു
- ശൈലി തുടർന്നും തകർക്കാതെ അനുയോജ്യമായി ഒത്തുചേരാൻ സാധിക്കുന്നു
### CSS ഘടകങ്ങളുടെ പ്രവർത്തനം
`rem` യൂണിറ്റുകൾ ബോർഡർ-റേഡിയസിനായി ഉപയോഗിക്കുന്നതാണ്, ഇത് റൂട്ട് ഫോണ്ട് സൈസിനെ അടിസ്ഥാനമാക്കി സ്കെയിൽ ചെയ്യുന്നു. ഇത് ഉപയോക്താക്കളുടെ ഫോണ്ട് ഇഷ്ടാനുസരണം രോഗിപോകുന്നതിന് അനുയോജ്യമാണ്. കൂടുതൽ പഠിക്കാൻ [CSS.Relative Units](https://www.w3.org/TR/css-values-3/#font-relative-lengths) സന്ദർശിക്കുക.
✅ **ദൃശ്യപര പരീക്ഷണം**: താഴെ പറയുന്ന മൂല്യങ്ങൾ മാറ്റി കാണൂ:
- ജാറിന്റെ ഒപ്പസിറ്റി 0.5-ൽനിന്ന് 0.8-ലേക്ക് മാറ്റുക – ഗ്ലാസ് എങ്ങനെ മാറുന്നു?
- മണ്ണിന്റെ നിറം `#3a241d`-നിന്ന് `#8B4513`-ലേക്ക് മാറ്റുക – ദൃശ്യപരമായി എന്ത് വ്യത്യാസം കാണുന്നു?
- മണ്ണിന്റെ `z-index` 2 ആക്കി മാറ്റുക – ലെയറിംഗ് എങ്ങനെയാണ് മാറുന്നത്?
### 🔄 **പെഡഗോഗിക്കൽ ചെക്കിൻ**
**CSS ദൃശ്യ ഡിസൈൻ മനസ്സിലാക്കൽ**: നിങ്ങളുടെ അറിവ് സ്ഥിരീകരിക്കുക:
- ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ റെസ്പോൺസീവ് ഡിസൈൻ എങ്ങനെ സൃഷ്ടിക്കുന്നു?
- ഒപ്പസിറ്റി ഗ്ലാസ് ട്രാൻസ്പറൻസി എങ്ങനെ ഉണ്ടാക്കുന്നു?
- ലെയറിങ്ങിൽ `z-index` എന്ത് പങ്കുവഹിക്കുന്നു?
- ബോർഡർ-റേഡിയസ് മൂല്യങ്ങൾ ജാർ ആകൃതി എങ്ങനെ സൃഷ്ടിക്കുന്നു?
**ഡിസൈൻ സിദ്ധാന്തം**: ലളിതമായ രൂപങ്ങളിൽ നിന്ന് സങ്കീർണ്ണ ദൃശ്യങ്ങളുണ്ടാകുന്നത് ശ്രദ്ധിക്കുക:
1. **റെക്റ്റേംഗിളുകൾ** → **റൗണ്ടഡ് റെക്റ്റേംഗിളുകൾ** → **ജാർ ഘടകങ്ങൾ**
2. **സാധാരണ നിറങ്ങൾ** → **ഒപ്പസിറ്റി** → **ഗ്ലാസ് ഇഫക്ട്**
3. **വ്യക്തിഗത ഘടകങ്ങൾ** → **ലെയേർ ചെയ്ത ഘടന** → **3D ദൃശ്യപ്രഭാവം**
---
## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀
ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള ചാലഞ്ച് പൂർത്തിയാക്കുക:
**വിവരണം:** ടെറിയത്തിലെ സസ്യങ്ങൾ സ്വാഭാവിക ഗాలിയുടെ സുവിശേഷം പോലെ ഹൃദയസ്പർശിയായപ്പോൾ മുമ്പ്-പിന്നിലേക്ക് അലഞ്ഞു നടക്കാൻ CSS ആനിമേഷൻ സൃഷ്ടിക്കുക. CSS ആനിമേഷനുകൾ, ട്രാൻസ്ഫോംസ്, കീഫ്രെയിംസ് അഭ്യാസം ചെയ്യാൻ ഇത് സഹായിക്കും കൂടാതെ ടെറിയം ദൃശ്യശോഭ വർധിപ്പിക്കും.
**പ്രോംപ്റ്റ്:** ടെറിയത്തിലെ സസ്യങ്ങൾ ഇളംമറയുന്ന തരത്തിൽ മുന്നേയ്ക്കും പിൻവാങ്ങിയും അലഞ്ഞു നടക്കാൻ CSS കീഫ്രെയിം ആനിമേഷൻ ചേർക്കുക. ഓരോ സസ്യവും (2-3 ഡിഗ്രി) നേരെ ഇടത്തും വലത്തും തിരിയുന്ന 3-4 സെക്കൻഡ് ദൈർഘ്യമുള്ള സ്വേയിങ് ആനിമേഷൻ സൃഷ്ടിച്ച് `.plant` ക്ലാസ്സിന് നൽകുക. ആനിമേഷൻ നിർവഹിച്ചു ഇൻഫിനിറ്റ് ലൂപ്പ് ചെയ്യുകയും പ്രകൃതിദൃശ്യ ചലനത്തിനായി ഈസിങ്ങ് ഫങ്ഷൻ ഉപയോഗിക്കുകയും ചെയ്യണം.
**കൂടുതൽ വിവരങ്ങൾക്ക്** [ഏജന്റ് മോഡ്](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) സന്ദർശിക്കുക.
## 🚀 ചാലഞ്ച്: ഗ്ലാസ് പരിഭ്രംശങ്ങൾ കൂട്ടുക
റിയലിസ്റ്റിക് ഗ്ലാസ് പരിഭ്രംശങ്ങൾ जोड़ാൻ തയ്യാറാവൂ? ഇത് ഡിസൈൻക്ക് ഗാഢതയും യാഥാർത്ഥ്യവും നൽകും.
കുറച്ച് വെളുത്ത അല്ലെങ്കിൽ ഏകദേശം വെളിച്ചമുള്ള ഒവൽ ആകൃതികൾ സൃഷ്ടിക്കുക, ജാറിന്റെ ഇടത് ഭാഗത്ത് നിർദ്ദേശിത സ്ഥാനങ്ങളിൽ വைக்கുക. യഥാർത്ഥതയുള്ള വെളിച്ചം പ്രതിഫലിപ്പിക്കുന്നതിനായി അനുയോജ്യമായ ഒപ്പസിറ്റി, ബ്ലർ എഫക്ടുകൾ പ്രയോഗിക്കുക. ഓർഗാനിക് ബബിള് ആകൃതികൾക്കായി `border-radius` ഉപയോഗിക്കുക. മികച്ച യഥാർത്ഥതക്കായി ഗ്രേഡിയന്റ് അല്ലെങ്കിൽ ബോക്സ്-ഷാഡോസ് പരീക്ഷിക്കുക.
## പൂർവ്വ ലക്ചർ ക്വിസ്
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/18)
## നിങ്ങളുടെ CSS അറിവ് വികസിപ്പിക്കുക
ആദ്യമായി CSS ചിലപ്പോൾ സങ്കീർണ്ണമായിരിക്കാം, എന്നാൽ ഈ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ മനസിലാക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള സാങ്കേതിക വിദ്യകൾക്ക് നല്ല അടിസ്ഥാനം നൽകുന്നു.
**നിങ്ങളുടെ അടുത്ത CSS പഠന മേഖലകൾ:**
- **ഫ്ലെക്സ്ബോക്സ്** - ഘടകങ്ങളുടെ അലൈന്മെന്റും വിതരണവും ലളിതമാക്കുന്നു
- **CSS ഗ്രിഡ്** - സങ്കീർണ്ണ ലേയൗട്ടുകൾ സൃഷ്ടിക്കാൻ ശക്തമായ ഉപകരണങ്ങൾ നൽകുന്നു
- **CSS വേരിയബിള്സ്** - പുനരാവർത്തനത്തിനെ കുറയ്ക്കുകയും നിലനിർത്തലും മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു
- **റെസ്പോൺസീവ് ഡിസൈൻ** - വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സൈറ്റുകൾ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുന്നു
### ഇന്ററാക്ടീവ് ലേണിംഗ് സ്രോതസുകൾ
ഈ ആശയങ്ങൾ പ്രായോഗികമായി അഭ്യാസിക്കാം ഈ രസകരമായ ഗെയിമുകൾ വഴി:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - രസകരമായ ചാലഞ്ചുകൾ വഴി ഫ്ലെക്സ്ബോക്സ് പഠിക്കുക
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - CSS ഗ്രിഡ് പരിശീലനം വെച്ച കർഷിണി വളർത്തുക
- 🎯 [CSS Battle](https://cssbattle.dev/) - CSS കഴിവുകൾ കോഡിംഗ് ചാലഞ്ചുകളിൽ പരീക്ഷിക്കുക
### അധിക പഠനം
CSS അടിസ്ഥാനപരമായും വിശദമായും പഠിക്കാനുള്ള ഈMicrosoft Learn മോഡ്യൂൾ പൂർത്തിയാക്കുക: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **നിമിഷം 5-ൽ ചെയ്യാനുള്ളത്**
- [ ] ഡെവ്ടൂൾസ് തുറന്ന് Elements പാനലിൽ വെബ്സൈറ്റിലെ CSS സ്റ്റൈലുകൾ പരിശോധിക്കുക
- [ ] ലളിതമായ CSS ഫയൽ ഉണ്ടാക്കി HTML പേജുമായി ലിങ്ക് ചെയ്യുക
- [ ] നിറം മാറ്റാൻ തെളിയിക്കാം: ഹെക്സ്, RGB, പേരിട്ട നിറങ്ങൾ എന്നിവ ഉപയോഗിക്കുക
- [ ] പാഡിംഗും മാർജിനും ചേർത്ത് ബോക്സ് മോഡൽ അഭ്യാസിക്കുക
### 🎯 **ഈ മണിക്കൂർ ചെയ്യാൻ സാധിക്കുന്ന കാര്യങ്ങൾ**
- [ ] പോസ്റ്റ്-ലെഷൻ ക്വിസ് പൂർത്തിയാക്കി CSS അടിസ്ഥാനങ്ങൾ അവലോകനം ചെയ്യുക
- [ ] HTML പേജ് ഫോണ്റ്, നിറം, ശൂന്യത എന്നിവ കൊണ്ട് സ്റ്റൈൽ ചെയ്യുക
- [ ] ഫ്ലെക്സ്ബോക്സോ ഗ്രിഡ് ഉപയോഗിച്ച് ലളിതമായ ലേയൗട്ട് സൃഷ്ടിക്കുക
- [ ] CSS ട്രാൻസിഷനുകൾ പരീക്ഷിച്ച് സ്മൂത്ത് എഫക്ടുകള് ആസ്വദിക്കുക
- [ ] മീഡിയ ക്വയറികളിലൂടെ റെസ്പോൺസീവ് ഡിസൈനിൽ അഭ്യാസം നടത്തുക
### 📅 **നിങ്ങളുടെ ആഴ്ച നീണ്ട CSS സാഹസം**
- [ ] സൃഷ്ടിപരമായ രീതിയിൽ ടെറിയം സ്റ്റൈലിംഗ് അസൈൻമെന്റ് പൂർത്തിയാക്കുക
- [ ] ഫോട്ടോ ഗാലറി ലേയൗട്ട് നിർമാണത്തിന് CSS ഗ്രിഡ് മ-striped
- [ ] CSS ആനിമേഷനുകൾ പഠിച്ച് ഡിസൈൻകൾക്ക് ജീവൻ നൽകുക
- [ ] SASS, LESS പോലുള്ള CSS പ്രീപ്രോസസ്സറുകൾ അന്വേഷിക്കുക
- [ ] ഡിസൈൻ തത്ത്വങ്ങൾ പഠിച്ച് CSS- ൽ പ്രയോഗിക്കുക
- [ ] ആസ്വദനീയമായ ഡിസൈനുകൾ അനാലൈസ് ചെയ്ത് പുനഃസംസ്കരണം ചെയ്യുക
### 🌟 **നിങ്ങളുടെ മാസം നീണ്ട ഡിസൈൻ മാസ്റ്ററി**
- [ ] സമ്പൂർണ റെസ്പോൺസീവ് വെബ്സൈറ്റ് ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കുക
- [ ] CSS-IN-JS അല്ലെങ്കിൽ utility-first ഫ്രെയിംവർക്കുകൾ (Tailwind) പഠിക്കുക
- [ ] CSS മെച്ചപ്പെടുത്തലുകൾ കൊണ്ട് ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റുകളിൽ പങ്കുചേരുക
- [ ] CSS കസ്റ്റം പ്രോപ്പർട്ടീസും containment പോലുള്ള ആധുനിക ആശയങ്ങളില് മ-striped
- [ ] മോഡുലാർ CSS ഉപയോഗിച്ച് പുനരുപയോഗയോഗ്യമായ 컴്പോണെന്റ് ലൈബ്രറികൾ സൃഷ്ടിക്കുക
- [ ] പുതുതായി CSS പഠിക്കുന്നവരെ മോർഗനൈസുചെയ്യുകയും ഡിസൈൻ അറിവ് പങ്കിടുകയുമാണ്
## 🎯 നിങ്ങളുടെ CSS മാസ്റ്ററി ടൈംലൈൻ
```mermaid
timeline
title CSS പഠന പുരോഗതി
section അടിസ്ഥാനപരമായത് (10 മിനിട്ടുകൾ)
ഫയൽ കണക്ഷൻ: CSS നെ HTML-ലേക്ക് ലിങ്ക് ചെയ്യുക
: കാസ്കേഡ് നിയമങ്ങൾ മനസിലാക്കുക
: പാരമ്പര്യത്തിന്റെ അടിസ്ഥാനങ്ങൾ പഠിക്കുക
section സെലക്ടറുകൾ (15 മിനിട്ടുകൾ)
ഘടകങ്ങൾ ലക്ഷ്യമിടൽ: ഘടക സെലക്ടറുകൾ
: ക്ലാസ് പാറ്റേണുകൾ
: ഐഡി സ്പെസിഫിസിറ്റി
: കോംബിനേറ്ററുകൾ
section ബോക്സ് മോഡൽ (20 മിനിട്ടുകൾ)
ലേയൗട്ട് അടിസ്ഥാനങ്ങൾ: മാർജിൻ, പാഡിംഗ്
: ബോർഡർ ഗുണങ്ങൾ
: ഉള്ളടക്കത്തിന്റെ വലിപ്പം
: ബോക്സ്-സൈസിംഗ് പെരുമാറ്റം
section സ്ഥാനനിർണ്ണയം (25 മിനിട്ടുകൾ)
ഘടകസ്ഥാനം: സ്റ്റാറ്റിക് vs റിലേറ്റീവ്
: ആബ്സല്യൂട്ട് സ്ഥാനനിർണ്ണയം
: Z-ഇൻഡക്സ് ലെയറിംഗ്
: റെസ്പോൺസീവ് യൂണിറ്റുകൾ
section ദൃശ്യ ഡിസൈൻ (30 മിനിട്ടുകൾ)
സ്റ്റൈലിംഗ് മാട്സറി: നിറങ്ങളും തീവ്രതയും
: ഷാഡോസ് మరియు എഫക്ടുകൾ
: ട്രാൻസിഷനുകൾ
: ട്രാൻസ്ഫോം ഗുണങ്ങൾ
section റെസ്പോൺസീവ് ഡിസൈൻ (45 മിനിട്ടുകൾ)
മൾട്ടി-ഡിവൈസ് പിന്തുണ: മീഡിയ ക്വയറികൾ
: സാന്ധ്യ ലേയൗട്ടുകൾ
: മൊബൈൽ-ഫസ്റ്റ് സമീപനം
: വ്യൂപോർട്ട് ഒപ്റ്റിമൈസേഷൻ
section ഉയർന്ന സാങ്കേതിക തന്ത്രങ്ങൾ (1 ആഴ്ച)
ആധുനിക CSS: Flexbox ലേയൗട്ടുകൾ
: CSS ഗ്രിഡ് സിസ്റ്റങ്ങൾ
: കസ്റ്റം ഗുണങ്ങൾ
: ആനിമേഷൻ കീഫ്രെയിംസ്
section പ്രൊഫഷണൽ കഴിവുകൾ (1 മാസം)
CSS ആർക്കിടെക്ചർ: ഘടക പാറ്റേണുകൾ
: പരിപാലനക്ഷമമായ കോഡ്
: പ്രകടന മെച്ചപ്പെടുത്തൽ
: ക്രോസ്-ബ്രൗസർ അനുയോജ്യത
```
### 🛠️ നിങ്ങളുടെ CSS ഉപകരണപ്പെട്ടി സംഗ്രഹം
ഈ പാഠം പൂർത്തിയാക്കിയതിനു ശേഷം, നിങ്ങക്കുണ്ട്:
- **കാസ്കേഡ് മനസ്സിലാക്കൽ**: സ്റ്റൈലുകൾ എങ്ങനെ ഒരുമിച്ച് വമ്പിച്ചു അതിരുകളെ മറികടക്കുന്നു
- **സെലക്ടർ മാസ്റ്ററി**: ഏലമെന്റുകൾ, ക്ലാസ്സുകൾ, ഐഡിയーズ വഴി കൃത്യമായ ലക്ഷ്യമിടൽ
- **പോസിഷനിംഗ് നൈപുണ്യം**: ഘടകങ്ങളുടെ സമർത്ഥമായ സ്ഥാനമാറ്റവും ലെയറിങ്ങും
- **ദൃശ്യമാന ഡിസൈൻ**: ഗ്ലാസ് ഇഫക്ട്, ഷാഡോസ്, ട്രാൻസ്പറൻസി സൃഷ്ടിക്കൽ
- **റെസ്പോൺസീവ് സാങ്കേതിക വിദ്യകൾ**: ഏതൊരു സ്ക്രീനിലും പൊരുത്തപ്പെടുന്ന ശതമാന അടിസ്ഥാന ലേയൗട്ട്
- **കോഡ് സംഘടന**: ശുചിത്വം പാലിച്ച, നിലതിരുന്നതുമായ CSS ഘടന
- **ആധുനിക പ്രയോഗങ്ങൾ**: റിലേറ്റീവ് യൂണിറ്റുകളും ആക്സസിബിൾ ഡിസൈൻ പാറ്റേണുകളും ഉപയോഗിക്കൽ
**അടുത്തു ചെയ്യേണ്ടത്**: ടെറിയത്തിന് ഇപ്പോൾ ഘടന (HTML) കൂടാതെ സ്റ്റൈൽ (CSS) ഉണ്ട്. അവസാന പാഠത്തിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇന്ററാക്ടിവിറ്റിഫ് കൂട്ടും!
## അസൈൻമെന്റ്
[CSS Refactoring](assignment.md)
---
**വിമര്ശനം**:
ഈ ദസ്താവേജ് AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം പരിഭാഷയുടെ കൃത്യതയ്ക്ക് ശ്രമിക്കുമ്പോഴും, സ്വയംമാറ്റത്തിലുള്ള പരിഭാഷകളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്നത് ശ്രദ്ധിക്കുക. ജന്മഭാഷയിലുള്ള originele ദസ്താവേ俺也去 അധികാരמקൂലം കണക്കാക്കണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിലുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണക്കോ തെറ്റായ വ്യാഖ്യാനത്തൊഴിച്ചുകൂടി ഞങ്ങൾ ഉത്തരവാദിത്വം വരുത്തുകയില്ല.