History

localizeflow[bot] 0f0d6085e1 chore(i18n): sync translations with latest source changes (chunk 1/1, 194 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 194 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 194 changes)	7 months ago

README.md

Unescape Escape

ടെററിയം പ്രോജക్ట్ ഭാഗം 2: CSS-ഇന്റെ പരിചയം

journey
    title നിങ്ങളുടെ CSS സ്റ്റൈലിംഗ് യാത്ര
    section തുടക്കക്കല്
      CSS ഫയൽ ലിങ്ക് ചെയ്യുക: 3: Student
      കാസ്കേഡ് മനസ്സിലാക്കുക: 4: Student
      പാരമ്പര്യം പഠിക്കുക: 4: Student
    section സെലക്ടറുകൾ
      ഘടകം ലക്ഷ്യമിടൽ: 4: Student
      ക്ലാസ് പാറ്റേണുകൾ: 5: Student
      ഐഡി സ്പെസിഫിസിറ്റി: 5: Student
    section ലെയ്‌ഔട്ട്
      ഘടകങ്ങളുടെ സ്ഥാനനിർണ്ണയം: 4: Student
      കണ്ടെയ്‌നറുകൾ സൃഷ്ടിക്കുക: 5: Student
      ടെരേറിയം നിർമ്മിക്കുക: 5: Student
    section മെച്ചപ്പെടുത്തൽ
      ദൃശ്യ ഫലങ്ങൾ ചേർക്കുക: 5: Student
      റെസ്പോൺസീവ് ഡിസൈൻ: 5: Student
      ഗ്ലാസ് പ്രതിഫലനങ്ങൾ: 5: Student

സ്കെച്ച്നോട്ട് ടോമോമി ഇമുരരിടം

നിന്റെ HTML ടെററിയം എത്ര സാധാരണമായിരുന്നു എന്ന് ഓർക്കുന്നുണ്ടോ? CSS ആണ് ആ പാരിപ്പൊളിച്ച ഘടനയെ ദൃശ്യപരമായി ആകര്‍ഷകമാക്കുന്നത്.

HTML വീടിന്റെ ഫോം നിർമ്മിക്കുന്നതുപോലെ ആണെങ്കിൽ, CSS വീട്ടുപോലെ ആക്കുന്നത് ആണ് - പേൻറ് കളർ, ഫർണിച്ചർ ക്രമീകരണം, ലൈറ്റിംഗ്, മുറികളിലെ ബന്ധം. Palace of Versailles എങ്ങനെ ഒരു ലളിതമായ ഹണ്ടിംഗ് ലജ്ജായി തുടങ്ങിയതും, അലങ്കാരത്തിലും വിന്യാസത്തിലും ശ്രദ്ധ നൽകിയതുകൊണ്ടുതന്നെ ലോകത്തിലെ ഏറ്റവും മനോഹരമായ കെട്ടിടങ്ങളിലൊന്നായി മാറിയതും ആലോചിക്കു.

ഇന്ന്, നിന്റെ ടെററിയങ്ങളെ ഫംഗ്ഷണൽ നിന്ന് പോളിഷ് ചെയ്തതാക്കാം. നിനക്ക് എലമെന്റുകൾ കൃത്യമായി പൊസിഷൻ ചെയ്യാൻ, ലേയൗട്ടുകൾ വ്യത്യസ്ത സ്ക്രീൻ വലിപ്പങ്ങളെ അനുസരിച്ച് പ്രതികരിക്കാൻ, വെബ്സൈറ്റുകളെ ആകര്‍ഷകമാക്കുന്ന ദൃശ്യ രൂപത സൃഷ്ടിക്കാൻ പഠിക്കും.

ഈ പാഠത്തിന്റെ അവസാനം, സമർത്ഥമായ CSS സ്റ്റൈലിംഗ് പ്രോജക്റ്റിന്റെ പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്തുന്നുവെന്ന് കാണാനാകും. നിന്റെ ടെററിയത്തിന് സ്റ്റൈൽ ചേർക്കാം.

mindmap
  root((CSS അടിസ്ഥാനങ്ങള്‍))
    Cascade
      Specificity Rules
      Inheritance
      Priority Order
      Conflict Resolution
    Selectors
      Element Tags
      Classes (.class)
      IDs (#id)
      Combinators
    Box Model
      Margin
      Border
      Padding
      Content
    Layout
      Positioning
      Display Types
      Flexbox
      Grid
    Visual Effects
      Colors
      Shadows
      Transitions
      Animations
    Responsive Design
      Media Queries
      Flexible Units
      Viewport Meta
      Mobile First

പൂർവ-പാഠം ക്വിസ്

CSS-ൽ തുടക്കം കുറിക്കുക

CSS സാധാരണയായി "സുന്ദരമാക്കൽ" എന്ന പോലെ കരുതപ്പെടുന്നു, എന്നാൽ അതിന് വളരെ വിപുലമായ ലക്ഷ്യമുണ്ട്. CSS ഒരു സിനിമാ ഡയറക്ടറിന്റെപോലെ ആണ് - നിൽക്ക് എല്ലാം എങ്ങനെയാണ് പ്രത്യക്ഷപ്പെടുക മാത്രമല്ല, എങ്ങനെയാണ് സഞ്ചരിക്കുക, ഇൻററാക്ഷനോട് എങ്ങനെയാണ് പ്രതികരിക്കുക, വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ എങ്ങനെയാണ് സംയോജിപ്പിക്കുക എന്നും നിയന്ത്രിക്കാം.

ആധുനിക CSS വളരെ ശേഷിയുള്ളതാണ്. ഫോൺ, ടാബ്ലറ്റ്, ഡെസ്ക്ടോപ്പ് കമ്പ്യൂട്ടറുകൾക്കായി ലേയൗട്ട് സ്വയം സജ്ജമാക്കുന്ന കുതിൾ ലേഖനം നിനക്ക് എഴുതാം. ഉപയോക്താക്കളുടെ ശ്രദ്ധക്ക് ആവശ്യമായ ഇടത്തേക്ക് നയിക്കുന്ന സ്മൂത്ത് അനിമേഷനുകൾ സൃഷ്ടിക്കാം. എല്ലാം ചേർന്ന് വളരെ പ്രഭാഷകരമായി കണ്ടു വരാം.

💡 പ്രോ ടിപ്പ്: CSS തുടർച്ചയായി നവീകരണങ്ങളും ശേഷികളും വശ്യപ്പെടുന്നു. പുതിയ CSS സവിശേഷതകൾ ഉപയോഗിക്കാൻ മുമ്പ് എല്ലാവർഷം CanIUse.com പരിശോധിച്ച് ബ്രൗസർ പിന്തുണ ഉറപ്പാക്കുക.

ഈ പാഠത്തിൽ നാം നേടുന്നത്:

നിന്റെ ടെററിയത്തിന് ആധുനിക CSS സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് പൂർണ്ണമായ ദൃശ്യ രൂപകൽപ്പന സൃഷ്ടിക്കുന്നു
ആധികാരിക ആശയങ്ങൾ പഠിക്കുന്നു - കാസ്‌കേഡ്, പാരമ്പര്യം, CSS സെലക്ടറുകൾ
പ്രതികരണശീലമുള്ള പൊസിഷനിംഗ്, ലേയൗട്ട് തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നു
CSS ആകൃതികളും സ്റ്റൈലുകളും ഉപയോഗിച്ച് ടെററിയം കണ്ടെയ്‌നർ നിർമ്മിക്കുന്നു

മുൻനിയമം

നിനക്ക് മുമ്പത്തെ പാഠത്തിൽ നിന്നുള്ള ടെററിയത്തിന്റെ HTML ഘടന പൂർത്തിയാക്കിയിരിക്കണം, അതിന് സ്റ്റൈൽ നൽകാൻ തയ്യാറാകണം.

📺 ** വീഡിയോ റിസോഴ്‌സ് **: സഹായകമായ ഈ വീഡിയോ വാക്ക്ത്രൂ നോക്കൂ

നിന്റെ CSS ഫയൽ സജ്ജമാക്കൽ

സ്റ്റൈലിംഗ് ആരംഭിക്കുന്നതിന് മുമ്പ്, CSS നു HTML-നോടു ബന്ധപ്പെടണം. ഈ ബന്ധം ബ്രൗസറിനു നിന്റെ ടെററിയത്തിന് വേണ്ട സ്റ്റൈലിംഗ് നിർദ്ദേശങ്ങൾ എവിടെയാണ് എന്ന് പറയുന്നു.

നിന്റെ ടെററിയം ഫോൾഡറിൽ, style.css എന്ന പുതിയ ഫയൽ സൃഷ്ടിക്കൂ, പിന്നെ HTML ഡോക്യുമെന്റിലെ <head> സെക്ഷനിൽ ലിങ്ക് ചേർക്കൂ:

<link rel="stylesheet" href="./style.css" />

ഈ കോഡ് ചെയ്യുന്നത്:

HTML-നും CSS ഫയലിനും ഇടയിൽ ഒരു ബന്ധം സൃഷ്ടിക്കുന്നു
ബ്രൗസറിനു style.css ല് നിന്നുള്ള സ്റ്റൈലുകൾ ലോഡ് ചെയ്ത് പ്രയോഗിക്കാൻ പറയുന്നു
rel="stylesheet" ഗുണം CSS ഫയൽ ആണ് എന്ന് നിർദ്ദേശിക്കുന്നു
href="./style.css" വഴി ഫയൽ പാത്ത് സൂചിപ്പിക്കുന്നു

CSS കാസ്‌കേഡ് മനസ്സിലാക്കൽ

എന്തിനാണ് CSS-നെ "കാസ്കേഡിംഗ്" സ്റ്റൈൽ ഷീറ്റുകൾ എന്നു വിളിക്കുന്നത്? സ്റ്റൈലുകൾ വെള്ളച്ചാട്ടം പോലെ താഴിറങ്ങും, കൽക്കിടയിൽ അവർ തമ്മിൽ സംഘർഷിക്കാം.

സൈനിക കമാൻഡ് ഘടനകൾ പോലെ ചിന്തിക്കൂ - ജനറൽ ഓർഡർ "എല്ലാ സേന GREEN ഉടുത്ത്" എന്നു പറയും, എന്നാല്‍ നിന്റെ യൂണിറ്റിന് പ്രത്യേക ഓർഡർ "അവാർഡ് സെറിമോനിയ്ക്ക് ഡ്രസ് ബ്ലൂസ് ധരിക്കുക" എന്ന് പറയാം. കൂടുതൽ പ്രത്യേകമായ നിർദ്ദേശം മുൻതൂക്കം നേടി. CSS ഇതുപോലെ പ്രവർത്തിക്കുന്നു, ഈ പരമാവധി മനസ്സിലാക്കുന്നത് ഡീബഗ്ഗിങ്ങ് വളരെ എളുപ്പമാക്കും.

കാസ്കേഡ് മുൻഗണനയെപ്പറ്റി പരീക്ഷണം നടത്തുക

കാസ്‌കേഡ് പ്രവർത്തനം കാണുവാൻ സ്റ്റൈൽ സംഘർഷം സൃഷ്ടിക്കാം. ആദ്യം <h1> ടാഗിൽ ഇൻലൈൻ സ്റ്റൈൽ ചേർക്കൂ:

<h1 style="color: red">My Terrarium</h1>

ഈ കോഡ് ചെയ്യുന്നത്:

<h1> എലമെന്റിന് നേരിട്ട് ചുവപ്പ് നിറം നൽകുന്നു ഇൻലൈൻ സ്റ്റൈൽ ഉപയോഗിച്ച്
style ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് CSS HTML നെ അഭിസംബോധനം ചെയ്യുന്നു
ഈ പ്രത്യേക നീതിനിയമത്തിന് ഏറ്റവും ഉയർന്ന മുൻഗണന സൃഷ്ടിക്കുന്നു

അടുത്തത്, നിന്റെ style.css ഫയലിൽ താഴെ കാണുന്ന നിയമം ചേർക്കൂ:

h1 {
  color: blue;
}

മുകളിൽ നാം:

എല്ലാ <h1> എലമെന്റുകൾക്ക് CSS നിയമം നിർവചിച്ചു
ബാഹ്യ സ്റ്റൈൽഷീറ്റിൽ നീല നിറമാക്കി ടെക്സ്റ്റ് നിറം സജ്ജമാക്കി
ഇൻലൈൻ സ്റ്റൈൽസിന തികച്ചും കുറഞ്ഞ മുൻഗണന സൃഷ്ടിച്ചു

✅ ജ്ഞാനപരിശോധന: നിന്റെ വെബ് ആപ്പിൽ ഏതു നിറമാണ് പ്രത്യക്ഷപ്പെടുന്നത്? എന്തുകൊണ്ട് ആ നിറം ജയിക്കുന്നുവെന്ന് വിശകലനം ചെയ്യുക? സ്റ്റൈലുകൾ മറികടക്കേണ്ട സാഹചര്യങ്ങൾ ഉണ്ടാക്കാമോ?

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 മുൻഗണന ക്രമം (ഉയർന്നതില്‍നിന്ന് താഴേക്ക്):

ഇൻലൈൻ സ്റ്റൈൽസ് (style ആട്രിബ്യൂട്ട്)

IDs (#myId)

ക്ലാസ്സുകൾ (.myClass) & ആട്രിബ്യൂട്ടുകൾ

എലമെന്റ് സെലക്ടറുകൾ (h1, div, p)

ബ്രൗസർ ഡിഫോൾട്ടുകൾ

CSS പാരമ്പര്യം പ്രവർത്തനം

CSS പാരമ്പര്യം ജൈവവശേഷിയുപോലെയാണ് — ഏതാനും പ്രോപ്പർട്ടികൾ മാതൃ എലമെന്റുകളിൽ നിന്നു പകർന്നു കിട്ടുന്നു. ഉദാഹരണത്തിന്, ബോഡിയുടെ ഫോണ്ട് ഫാമിലി സജ്ജമാക്കിയാൽ, അകത്ത് ഉള്ള എല്ലാ ടെക്സ്ടുകളും സ്വയം ആ ഫോണ്ട് ഉപയോഗിക്കും. ഇത് ഹാബ്സ്ബർഗ് കുടുംബത്തിന്റെ പ്രത്യേക ജോലിൻ പോലെയാണ്, ഓരോ തലമുറയ്ക്കും വ്യക്തമായിരുന്നു, വ്യക്തിക്ക് പ്രത്യേകമായി പറയാതെ.

എന്നാൽ എല്ലാം പാരമ്പര്യമല്ല. ടെക്സ്റ്റ് സ്റ്റൈലുകൾ (ഫോണ്ട്, നിറങ്ങൾ) പാരമ്പര്യം കൈവരിക്കുമ്പോൾ, ലേയൗട്ട് സ്വഭാവങ്ങൾ (മാർജിൻ, ബോർഡർ) പാരമ്പര്യമല്ല. കുട്ടികൾ മാതാപിതാക്കളുടെ ഫാഷൻ ഇഷ്ടങ്ങൾ പകർത്താതെ ശരീരഗുണങ്ങൾ പകർത്തുന്നതുപോലെ.

ഫോണ്ട് പാരമ്പര്യം കാണുക

<body> എലമെന്റിന് ഫോണ്ട് ഫാമിലി സജ്ജമാക്കുക:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

ഇവിടെ സംഭവിക്കുന്നത്:

<body> ലക്ഷ്യമിട്ട് പേജിന്റെ മൊത്തം ഫോണ്ട് ഫാമിലി സെറ്റ് ചെയ്യുന്നു
മികച്ച ബ്രൗസർ പൊരുത്തത്തിനായി ഫാൾബാക്ക് ഉൾപ്പെടെയുള്ള ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിക്കുന്നു
വ്യത്യസ്ത ഒഎസ്-കളിൽ മികച്ച ദൃശ്യപരതയ്ക്കായി ആധുനിക സിസ്റ്റം ഫോണ്ട് ഉപയോഗിക്കുന്നു
നിശ്ചയിച്ച് ഇല്ലാത്തപ്പോൾ എല്ലാ ചൈൽഡ് എലമെന്റുകളും ഫോണ്റ് പാരമ്പര്യം ഏറ്റെടുക്കുന്നു

നിന്റെ ബ്രൗസറിന്റെ ഡിസ്ക്കമ്പോസർ ടൂൾസ് (F12) തുറക്കൂ, Elements ടാബ് തിരഞ്ഞെടുക്കൂ, <h1>-നെ പരിശോധിക്കൂ. ഇത് body-യിൽ നിന്നുള്ള ഫോണ്ട് ഫാമിലി പാരമ്പര്യമായി സ്വീകരിച്ചത് കാണാം:

✅ പരീക്ഷണമെടുത്ത് നോക്കൂ: <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-നൊപ്പം ശരിയായി ബന്ധിപ്പിക്കുന്നു

പെട്ടെന്നുള്ള പരിശോധന: ഈ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ, <div class="special"> ഉള്ളിൽ ഉള്ള <h1>-ന്റെ നിറം എന്താകും?

div { color: blue; }
.special { color: green; }
h1 { color: red; }

ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു)

CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക

CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്.

CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ.

എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ)

എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്:

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 ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്‌നറുകൾ) ഇവ നല്ലതാണ്.

ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്‌നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം:

#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 ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ?

മികച്ച സമരയോഗം:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.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 ഘടന:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/ml/plant1.d18b18ffe73da18f.png" />
</div>

പ്രധാന ഘടകങ്ങൾ:

എല്ലാ ചെടികൾക്കുമുള്ള പൊസിഷൻ കൺട്രോൾ ചെയ്യാൻ class="plant-holder" ഉപയോഗിക്കുന്നു
ചിത്രത്തിനും പെരുമാറ്റത്തിനും class="plant" നൽകുന്നു
ഓരോ ചെടിക്കും വ്യത്യസ്ത പൊസിഷനിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഉൾപെടുത്തലിനും വ്യത്യസ്ത ID id="plant1" ഉപയോഗിക്കുന്നു
സ്ക്രീൻ റീഡർ സൗഹൃദം ഉറപ്പാക്കാൻ വിവരണപരമായ alt ടെക്സ്റ്റ് നൽകുന്നു

ഇപ്പൊഴിത് നിന്റെ style.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 പൊസിഷനിംഗ് ഒരു നാടകത്തിലെ സ്റ്റേജ് ഡയറക്ടറുടെ പോലെ - എല്ലാ അഭിനയക്കാരും എവിടെ നിൽക്കും, എങ്ങനെയാവരും എന്ന് നിർദ്ദേശിക്കുന്നു. ചില അഭിനേതാക്കൾ സാധാരണ നിലയിൽ നിന്നു പ്രവർത്തിക്കും, മറ്റുചിലർ പ്രത്യേക പൊസിഷനിംഗ് ആവശ്യമാണ്.

പോസിഷനിംഗ് മനസ്സിലാക്കിയാൽ പല ലേയൗട്ട് പ്രശ്നങ്ങളും പരിഹരിക്കാം. സ്ക്രോൾ ചെയ്യുമ്പോഴും നാവിഗേഷൻ ബാർ മുകളിൽ തന്നെ നിലനിർത്തണം? അതിന് പൊസിഷനിംഗ് ഉപയോഗിക്കുക. നിശ്ചിത ഇടത്ത് ടൂള്ടിപ്പ് കാണിക്കണം? അതും പൊസിഷനിംഗ്.

അഞ്ച് പൊസിഷൻ മൂല്യങ്ങൾ

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`ക്കും ഇടയിൽ മാറുന്നു	സ്ക്രോൾ ചെയ്യുമ്പോൾ പിടിച്ചുനിർത്തുന്ന ഹെഡറുകൾ

നമുക്ക് കിട്ടിയ ടെററിയത്തിൽ പൊസിഷനിംഗ്

നമ്മുടെ ടെററിയം ഉദ്ദേശിച്ച ലേയൗട്ട് സൃഷ്ടിക്കാൻ പൊസിഷനിംഗ് മൂല്യങ്ങളുടെ സമന്വയം ഉപയോഗിക്കുന്നു:

/* 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 സാങ്കേതിക വിദ്യ തിരിച്ചറിയാം.

flowchart LR
    A[ജാർ മുകളിൽ] --> E[പൂർണ്ണ ടെരറിയം]
    B[ജാർ മതിലുകൾ] --> E
    C[മണ്ണ് പാളി] --> E
    D[ജാർ അടിയുടെ] --> E
    F[ഗ്ലാസ് ഫലങ്ങള്‍] --> E
    
    A1["50% വീതി<br/>5% ഉയരം<br/>മുകളിൽ സ്ഥാനം"] --> A
    B1["60% വീതി<br/>80% ഉയരം<br/>വെട്ടിപ്പടർന്നCorners<br/>0.5 അപാരദർശിനി"] --> B
    C1["60% വീതി<br/>5% ഉയരം<br/>കറുത്ത തവിട്ട്<br/>അടിമുള്ള പാളി"] --> C
    D1["50% വീതി<br/>1% ഉയരം<br/>താഴെ സ്ഥാനം"] --> D
    F1["സൂക്ഷ്മ നിഴലുകൾ<br/>പരദർശിത്വം<br/>സ് iziൻഡ് ലെയറിംഗ്"] --> F
    
    style E fill:#d1e1df,stroke:#3a241d
    style A fill:#e8f5e8
    style B fill:#e8f5e8
    style C fill:#8B4513
    style D fill:#e8f5e8

ഗ്ലാസ്സ് ജാർ ഘടകങ്ങൾ ഉണ്ടാക്കൽ

ടെറിയം ജാറിന്റെ ഘടകങ്ങൾ ഓരോന്നായി ഉണ്ടാക്കാം. ഓരോ ഭാഗവും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുകയും ശതമാനത്തിലുള്ള അളവുകൾ ഉപയോഗിച്ച് റെസ്പോമ്സീവ് ഡിസൈൻ ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു:

.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 സന്ദർശിക്കുക.

✅ ദൃശ്യപര പരീക്ഷണം: താഴെ പറയുന്ന മൂല്യങ്ങൾ മാറ്റി കാണൂ:

ജാറിന്റെ ഒപ്പസിറ്റി 0.5-ൽനിന്ന് 0.8-ലേക്ക് മാറ്റുക – ഗ്ലാസ് എങ്ങനെ മാറുന്നു?
മണ്ണിന്റെ നിറം #3a241d-നിന്ന് #8B4513-ലേക്ക് മാറ്റുക – ദൃശ്യപരമായി എന്ത് വ്യത്യാസം കാണുന്നു?
മണ്ണിന്റെ z-index 2 ആക്കി മാറ്റുക – ലെയറിംഗ് എങ്ങനെയാണ് മാറുന്നത്?

🔄 പെഡഗോഗിക്കൽ ചെക്കിൻ

CSS ദൃശ്യ ഡിസൈൻ മനസ്സിലാക്കൽ: നിങ്ങളുടെ അറിവ് സ്ഥിരീകരിക്കുക:

ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ റെസ്പോൺസീവ് ഡിസൈൻ എങ്ങനെ സൃഷ്ടിക്കുന്നു?
ഒപ്പസിറ്റി ഗ്ലാസ് ട്രാൻസ്പറൻസി എങ്ങനെ ഉണ്ടാക്കുന്നു?
ലെയറിങ്ങിൽ z-index എന്ത് പങ്കുവഹിക്കുന്നു?
ബോർഡർ-റേഡിയസ് മൂല്യങ്ങൾ ജാർ ആകൃതി എങ്ങനെ സൃഷ്ടിക്കുന്നു?

ഡിസൈൻ സിദ്ധാന്തം: ലളിതമായ രൂപങ്ങളിൽ നിന്ന് സങ്കീർണ്ണ ദൃശ്യങ്ങളുണ്ടാകുന്നത് ശ്രദ്ധിക്കുക:

റെക്റ്റേംഗിളുകൾ → റൗണ്ടഡ് റെക്റ്റേംഗിളുകൾ → ജാർ ഘടകങ്ങൾ
സാധാരണ നിറങ്ങൾ → ഒപ്പസിറ്റി → ഗ്ലാസ് ഇഫക്ട്
വ്യക്തിഗത ഘടകങ്ങൾ → ലെയേർ ചെയ്‌ത ഘടന → 3D ദൃശ്യപ്രഭാവം

GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀

ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള ചാലഞ്ച് പൂർത്തിയാക്കുക:

വിവരണം: ടെറിയത്തിലെ സസ്യങ്ങൾ സ്വാഭാവിക ഗాలിയുടെ സുവിശേഷം പോലെ ഹൃദയസ്പർശിയായപ്പോൾ മുമ്പ്-പിന്നിലേക്ക് അലഞ്ഞു നടക്കാൻ CSS ആനിമേഷൻ സൃഷ്ടിക്കുക. CSS ആനിമേഷനുകൾ, ട്രാൻസ്ഫോംസ്, കീഫ്രെയിംസ് അഭ്യാസം ചെയ്യാൻ ഇത് സഹായിക്കും കൂടാതെ ടെറിയം ദൃശ്യശോഭ വർധിപ്പിക്കും.

പ്രോംപ്റ്റ്: ടെറിയത്തിലെ സസ്യങ്ങൾ ഇളംമറയുന്ന തരത്തിൽ മുന്നേയ്ക്കും പിൻവാങ്ങിയും അലഞ്ഞു നടക്കാൻ CSS കീഫ്രെയിം ആനിമേഷൻ ചേർക്കുക. ഓരോ സസ്യവും (2-3 ഡിഗ്രി) നേരെ ഇടത്തും വലത്തും തിരിയുന്ന 3-4 സെക്കൻഡ് ദൈർഘ്യമുള്ള സ്വേയിങ് ആനിമേഷൻ സൃഷ്ടിച്ച് .plant ക്ലാസ്സിന് നൽകുക. ആനിമേഷൻ നിർവഹിച്ചു ഇൻഫിനിറ്റ് ലൂപ്പ് ചെയ്യുകയും പ്രകൃതിദൃശ്യ ചലനത്തിനായി ഈസിങ്ങ് ഫങ്ഷൻ ഉപയോഗിക്കുകയും ചെയ്യണം.

കൂടുതൽ വിവരങ്ങൾക്ക് ഏജന്റ് മോഡ് സന്ദർശിക്കുക.

🚀 ചാലഞ്ച്: ഗ്ലാസ് പരിഭ്രംശങ്ങൾ കൂട്ടുക

റിയലിസ്റ്റിക് ഗ്ലാസ് പരിഭ്രംശങ്ങൾ जोड़ാൻ തയ്യാറാവൂ? ഇത് ഡിസൈൻക്ക് ഗാഢതയും യാഥാർത്ഥ്യവും നൽകും.

കുറച്ച് വെളുത്ത അല്ലെങ്കിൽ ഏകദേശം വെളിച്ചമുള്ള ഒവൽ ആകൃതികൾ സൃഷ്ടിക്കുക, ജാറിന്റെ ഇടത് ഭാഗത്ത് നിർദ്ദേശിത സ്ഥാനങ്ങളിൽ വைக்கുക. യഥാർത്ഥതയുള്ള വെളിച്ചം പ്രതിഫലിപ്പിക്കുന്നതിനായി അനുയോജ്യമായ ഒപ്പസിറ്റി, ബ്ലർ എഫക്ടുകൾ പ്രയോഗിക്കുക. ഓർഗാനിക് ബബിള്‍ ആകൃതികൾക്കായി border-radius ഉപയോഗിക്കുക. മികച്ച യഥാർത്ഥതക്കായി ഗ്രേഡിയന്റ് അല്ലെങ്കിൽ ബോക്‌സ്-ഷാഡോസ് പരീക്ഷിക്കുക.

പൂർവ്വ ലക്ചർ ക്വിസ്

Post-lecture quiz

നിങ്ങളുടെ CSS അറിവ് വികസിപ്പിക്കുക

ആദ്യമായി CSS ചിലപ്പോൾ സങ്കീർണ്ണമായിരിക്കാം, എന്നാൽ ഈ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ മനസിലാക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള സാങ്കേതിക വിദ്യകൾക്ക് നല്ല അടിസ്ഥാനം നൽകുന്നു.

നിങ്ങളുടെ അടുത്ത CSS പഠന മേഖലകൾ:

ഫ്ലെക്സ്ബോക്സ് - ഘടകങ്ങളുടെ അലൈന്മെന്റും വിതരണവും ലളിതമാക്കുന്നു
CSS ഗ്രിഡ് - സങ്കീർണ്ണ ലേയൗട്ടുകൾ സൃഷ്ടിക്കാൻ ശക്തമായ ഉപകരണങ്ങൾ നൽകുന്നു
CSS വേരിയബിള്‍സ് - പുനരാവർത്തനത്തിനെ കുറയ്ക്കുകയും നിലനിർത്തലും മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു
റെസ്പോൺസീവ് ഡിസൈൻ - വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സൈറ്റുകൾ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുന്നു

ഇന്ററാക്ടീവ് ലേണിംഗ് സ്രോതസുകൾ

ഈ ആശയങ്ങൾ പ്രായോഗികമായി അഭ്യാസിക്കാം ഈ രസകരമായ ഗെയിമുകൾ വഴി:

🐸 Flexbox Froggy - രസകരമായ ചാലഞ്ചുകൾ വഴി ഫ്ലെക്സ്ബോക്സ് പഠിക്കുക
🌱 Grid Garden - CSS ഗ്രിഡ് പരിശീലനം വെച്ച കർഷിണി വളർത്തുക
🎯 CSS Battle - CSS കഴിവുകൾ കോഡിംഗ് ചാലഞ്ചുകളിൽ പരീക്ഷിക്കുക

അധിക പഠനം

CSS അടിസ്ഥാനപരമായും വിശദമായും പഠിക്കാനുള്ള ഈMicrosoft Learn മോഡ്യൂൾ പൂർത്തിയാക്കുക: Style your HTML app with CSS

⚡ നിമിഷം 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 മാസ്റ്ററി ടൈംലൈൻ

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

വിമര്‍ശനം:
ഈ ദസ്താവേജ് AI പരിഭാഷ സേവനം Co-op Translator ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം പരിഭാഷയുടെ കൃത്യതയ്ക്ക് ശ്രമിക്കുമ്പോഴും, സ്വയംമാറ്റത്തിലുള്ള പരിഭാഷകളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്നത് ശ്രദ്ധിക്കുക. ജന്മഭാഷയിലുള്ള originele ദസ്താവേ俺也去 അധികാരמקൂലം കണക്കാക്കണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിലുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണക്കോ തെറ്റായ വ്യാഖ്യാനത്തൊഴിച്ചുകൂടി ഞങ്ങൾ ഉത്തരവാദിത്വം വരുത്തുകയില്ല.

README.md Unescape Escape