My Terrarium
``` **Što ovaj kod radi:** - **Primjenjuje** crvenu boju direktno na `` element koristeći inline stilizaciju
- **Koristi** atribut `style` za ugrađivanje CSS-a direktno u HTML
- **Stvara** stil s najvišim prioritetom za taj specifični element
Zatim dodaj ovo pravilo u svoju datoteku `style.css`:
```css
h1 {
color: blue;
}
```
**Ovdje smo:**
- **Definirali** CSS pravilo koje cilja sve `` elemente
- **Postavili** boju teksta na plavu koristeći vanjsku stilsku datoteku
- **Stvorili** pravilo nižeg prioriteta u odnosu na inline stilove
✅ **Provjera znanja**: Koja boja se prikazuje u tvojoj web-aplikaciji? Zašto ta boja pobjeđuje? Možeš li smisliti situacije u kojima bi želio nadjačati stilove?
```mermaid
flowchart TD
A["Preglednik pronalazi h1 element"] --> B{"Provjeri inline stilove"}
B -->|Pronađeno| C["style='color: red'"]
B -->|Nema| D{"Provjeri ID pravila"}
C --> E["Primijeni crvenu boju (1000 bodova)"]
D -->|Pronađeno| F["#heading { color: green }"]
D -->|Nema| G{"Provjeri pravila klase"}
F --> H["Primijeni zelenu boju (100 bodova)"]
G -->|Pronađeno| I[".title { color: blue }"]
G -->|Nema| J{"Provjeri pravila elementa"}
I --> K["Primijeni plavu boju (10 bodova)"]
J -->|Pronađeno| L["h1 { color: purple }"]
J -->|Nema| M["Koristi zadano iz preglednika"]
L --> N["Primijeni ljubičastu boju (1 bod)"]
style C fill:#ff6b6b
style F fill:#51cf66
style I fill:#339af0
style L fill:#9775fa
```
> 💡 **Redoslijed CSS prioriteta (od najvišeg do najnižeg):**
> 1. **Inline stilovi** (atribut style)
> 2. **ID-ovi** (#myId)
> 3. **Klase** (.myClass) i atributi
> 4. **Selektori elemenata** (h1, div, p)
> 5. **Zadani stilovi preglednika**
## CSS nasljeđivanje u praksi
CSS nasljeđivanje radi poput genetike - elementi nasljeđuju određena svojstva od roditeljskih elemenata. Ako postaviš font-family na elementu body, sav tekst unutar automatski koristi isti font. Slično kao što je prepoznatljiv oblik čeljusti Habsburške obitelji bio prisutan kroz generacije, a nije bio specificiran za svakog pojedinačno.
Međutim, nije sve nasljedno. Stilovi teksta poput fontova i boja se nasljeđuju, no svojstva layouta poput margina i obruba se ne nasljeđuju. Kao što djeca mogu naslijediti fizičke osobine, ali ne i modne izbore roditelja.
### Promatranje nasljeđivanja fonta
Pogledajmo nasljeđivanje u praksi postavljanjem font-family na `` element:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**Što se ovdje događa:**
- **Postavlja** font-family za cijelu stranicu ciljajući `` element
- **Koristi** font stack s rezervnim mogućnostima radi bolje kompatibilnosti s preglednicima
- **Primjenjuje** moderne sistemske fontove koji lijepo izgledaju na različitim operativnim sustavima
- **Osigurava** da svi child elementi nasljede taj font osim ako nije eksplicitno drugačije postavljeno
Otvori alate za razvoj preglednika (F12), idi na tab Elements i pregledaj svoj `` element. Vidjet ćeš da nasljeđuje font-family od body:
✅ **Vrijeme za eksperiment**: Pokušaj postaviti druga nasljediva svojstva na `` kao `color`, `line-height` ili `text-align`. Što se događa s naslovom i ostalim elementima?
> 📝 **Nasljediva svojstva uključuju**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Svojstva koja se ne nasljeđuju uključuju**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagoški pregled**
**Razumijevanje osnova CSS-a**: Prije prelaska na selektore, osiguraj da možeš:
- ✅ Objasniti razliku između kaskade i nasljeđivanja
- ✅ Predvidjeti koji stil će pobijediti u konfliktu specifičnosti
- ✅ Prepoznati koja svojstva se nasljeđuju od roditeljskih elemenata
- ✅ Ispravno povezati CSS datoteke s HTML-om
**Brzi test**: Ako imaš ove stilove, koje će boje biti `` unutar ``?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odgovor: Crvena (selektor elementa direktno cilja h1)*
## Ovladavanje CSS selektorima
CSS selektori su tvoj način da ciljano stiliziraš određene elemente. Oni funkcioniraju kao davanje preciznih uputa - umjesto da kažeš "kuća", kažeš "plava kuća s crvenim vratima u Maple Streetu".
CSS nudi različite načine da budeš specifičan, a odabir pravog selektora je poput izbora pravog alata za zadatak. Ponekad trebaš stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.
### Selektori elemenata (Tagovi)
Selektori elemenata ciljaju HTML elemente po imenu taga. Savršeni su za postavljanje osnovnih stilova koji se primjenjuju široko preko stranice:
```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;
}
```
**Što ovi stilovi rade:**
- **Postavlja** dosljednu tipografiju preko cijele stranice pomoću `body` selektora
- **Uklanja** zadane margine i padding preglednika radi bolje kontrole
- **Stilizira** sve naslove bojom, poravnanjem i razmakom
- **Koristi** `rem` jedinice za skalabilne i pristupačne veličine fonta
Iako element selektori dobro funkcioniraju za opće stiliziranje, trebat ćeš specifičnije selektore za stiliziranje pojedinačnih komponenti poput biljaka u tvom terrariju.
### ID selektori za jedinstvene elemente
ID selektori koriste simbol `#` i ciljaju elemente s određenim `id` atributom. Budući da id-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput lijevog i desnog kontejnera s biljkama.
Napravimo stilizaciju za bočne kontejnere terrarija gdje će biljke stajati:
```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;
}
```
**Što ovaj kod radi:**
- **Pozicionira** kontejnere na lijevi i desni rub ekrana koristeći `absolute` pozicioniranje
- **Koristi** `vh` (visina viewporta) jedinice za responzivnu visinu koja se prilagođava veličini ekrana
- **Primjenjuje** `box-sizing: border-box` tako da padding ulazi u ukupnu širinu
- **Uklanja** nepotrebne `px` jedinice za vrijednosti nula radi čišćeg koda
- **Postavlja** suptilnu boju pozadine koja je lakša za oči od oštre sive
✅ **Izazov za kvalitetu koda**: Primijeti kako ovaj CSS krši DRY (Don't Repeat Yourself) princip. Možeš li ga refaktorirati koristeći oba, ID i klasu?
**Poboljšani pristup:**
```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;
}
```
### Klase za ponovnu upotrebu stilova
Klase koriste simbol `.` i idealne su kada želiš primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponavljati po cijelom HTML-u, što ih čini idealnim za dosljedne stilizacijske obrasce.
U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID za jedinstveno pozicioniranje.
**Ovo je HTML struktura za svaku biljku:**
```html
```
**Objašnjenje ključnih elemenata:**
- **Koristi** `class="plant-holder"` za dosljedno stiliziranje kontejnera svih biljaka
- **Primjenjuje** `class="plant"` za zajedničku stilizaciju slike i ponašanje
- **Sadrži** jedinstveni `id="plant1"` za individualno pozicioniranje i JavaScript interakciju
- **Nudi** opisni alt tekst radi pristupačnosti čitačima ekrana
Sada dodaj ove stilove u svoju datoteku `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);
}
```
**Što ovi stilovi rade:**
- **Stvara** relativno pozicioniranje za plant holder koji uspostavlja kontekst pozicije
- **Postavlja** visinu svakog plant holdera na 13% da bi sve biljke stale vertikalno bez skrolanja
- **Pomjera** holder-e malo ulijevo za bolji centar biljaka u njihovim kontejnerima
- **Dozvoljava** biljkama da se skaliraju responzivno uz svojstva `max-width` i `max-height`
- **Koristi** `z-index` da biljke budu slojene iznad ostalih elemenata u terrariju
- **Dodaje** suptilni efekt prilikom lebdenja pomoću CSS prijelaza za bolje korisničko iskustvo
✅ **Kritičko razmišljanje**: Zašto nam trebaju oba selektora `.plant-holder` i `.plant`? Što bi se dogodilo da koristimo samo jedan?
> 💡 **Dizajnerski obrazac**: Kontejner (`.plant-holder`) kontrolira layout i pozicioniranje, dok sadržaj (`.plant`) kontrolira izgled i skaliranje. Ova podjela čini kod održivijim i fleksibilnijim.
## Razumijevanje CSS pozicioniranja
CSS pozicioniranje je kao režija na sceni - ti upravljaš gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje radi dramatičnog efekta.
Kad shvatiš pozicioniranje, mnogi izazovi kod layouta postaju upravljivi. Trebaš li navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želiš li tooltip koji se pojavljuje na određenom mjestu? To je također pozicioniranje.
### Pet vrijednosti pozicije
```mermaid
quadrantChart
title Strategija pozicioniranja u CSS-u
x-axis Tok dokumenta --> Uklonjeno iz toka
y-axis Statička pozicija --> Precizna kontrola
quadrant-1 Apsolutno
quadrant-2 Fiksno
quadrant-3 Statično
quadrant-4 Ljepljivo
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]
```
| Vrijednost pozicije | Ponašanje | Primjena |
|---------------------|-----------|----------|
| `static` | Zadani tijek, ignorira top/left/right/bottom | Normalni raspored dokumenta |
| `relative` | Pozicionirano relativno u odnosu na normalni položaj | Male prilagodbe, stvaranje konteksta pozicije |
| `absolute` | Pozicionirano relativno u odnosu na najbližeg pozicioniranog roditelja | Precizno postavljanje, slojevi preko |
| `fixed` | Pozicionirano relativno prema viewportu | Navigacijske trake, plutajući elementi |
| `sticky` | Mijenja se između relative i fixed ovisno o skrolanju | Zaglavlja koja se lijepe prilikom skrolanja |
### Pozicioniranje u našem terrariju
Naš terrarij koristi stratešku kombinaciju tipova pozicioniranja da stvori željeni layout:
```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 ... */
}
```
**Razumijevanje strategije pozicioniranja:**
- **Apsolutni kontejneri** su izuzeti iz uobičajenog tijeka dokumenta i pričvršćeni su na rubove ekrana
- **Relativni plant holderi** stvaraju kontekst pozicioniranja, a pritom ostaju u tijeku dokumenta
- **Apsolutne biljke** mogu biti precizno pozicionirane unutar relativnih kontejnera
- **Ova kombinacija** omogućava biljkama da se slažu vertikalno, a istovremeno se pojedinačno pozicioniraju
> 🎯 **Zašto je ovo važno**: Elementi "plant" trebaju apsolutno pozicioniranje da bi bili drag'n'drop (povuci i pusti) u sljedećem satu. Apsolutno pozicioniranje uklanja ih iz normalnog tijeka layouta, omogućujući interakciju povlačenja i ispuštanja.
✅ **Vrijeme za eksperiment**: Isprobaj promjenu vrijednosti pozicije i promatraj rezultate:
- Što se dogodi ako promijeniš `.container` iz `absolute` u `relative`?
- Kako se raspored mijenja ako `.plant-holder` koristi `absolute` umjesto `relative`?
- Što se događa kada ` .plant` promijenite u `relative` pozicioniranje?
### 🔄 **Pedagoška provjera**
**Vladanje CSS pozicioniranjem**: Pauzirajte i provjerite svoje razumijevanje:
- ✅ Možete li objasniti zašto biljke trebaju apsolutno pozicioniranje za povuci-i-pusti funkcionalnost?
- ✅ Razumijete li kako relativni spremnici stvaraju kontekst pozicioniranja?
- ✅ Zašto bočni spremnici koriste apsolutno pozicioniranje?
- ✅ Što bi se dogodilo ako u potpunosti uklonite deklaracije pozicija?
**Povezanost s realnim svijetom**: Razmislite kako CSS pozicioniranje odražava stvarni raspored:
- **Static**: Knjige na polici (prirodni redoslijed)
- **Relative**: Pomicanje knjige malo, ali zadržavanje mjesta
- **Absolute**: Postavljanje knjižne oznake na točan broj stranice
- **Fixed**: Ljepljiva bilješka koja ostaje vidljiva dok okrećete stranice
## Izgradnja terarija s CSS-om
Sada ćemo izgraditi staklenku koristeći samo CSS - bez slika ili grafičkog softvera.
Stvaranje realističnog izgleda stakla, sjena i dubine pomoću pozicioniranja i prozirnosti demonstrira vizualne sposobnosti CSS-a. Ova tehnika odražava način na koji su arhitekti Bauhaus pokreta koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Kad razumijete ove principe, prepoznat ćete CSS tehnike iza mnogih web dizajna.
```mermaid
flowchart LR
A[Poklopac Staklenke] --> E[Potpuni Terarij]
B[Zidovi Staklenke] --> E
C[Sloj Zemlje] --> E
D[Donji Dio Staklenke] --> E
F[Efejeti Stakla] --> E
A1["50% širina
5% visina
Vrhunska pozicija"] --> A
B1["60% širina
80% visina
Zaobljeni kutovi
0.5 neprozirnost"] --> B
C1["60% širina
5% visina
Tamno smeđa
Donji sloj"] --> C
D1["50% širina
1% visina
Donja pozicija"] --> D
F1["Suptilne sjene
Prozirnost
Slojevanje po Z-indeksu"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Izrada dijelova staklenke
Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn:
```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;
}
```
**Razumijevanje konstrukcije terarija:**
- **Koristi** dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana
- **Pozicionira** elemente apsolutno kako bi ih precizno složila i poravnala
- **Primjenjuje** različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti
- **Koristi** `z-index` slojevito kako bi biljke bile unutar staklenke
- **Dodaje** suptilne sjene i fino zaobljene rubove za realističniji izgled
### Responzivni dizajn s postocima
Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela:
**Zašto je to važno:**
- **Osigurava** proporcionalno skaliranje terarija na bilo kojoj veličini ekrana
- **Održava** vizualne odnose između dijelova staklenke
- **Pruža** dosljedno iskustvo od mobilnih telefona do velikih desktop monitora
- **Omogućuje** dizajnu prilagodbu bez narušavanja vizualnog rasporeda
### CSS jedinice u praksi
Koristimo `rem` jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji.
✅ **Vizualno eksperimentiranje**: Pokušajte mijenjati ove vrijednosti i promatrajte učinke:
- Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla?
- Prilagodite boju tla s `#3a241d` na `#8B4513` – koji je vizualni efekt?
- Izmijenite `z-index` tla na 2 – što se događa sa slojevima?
### 🔄 **Pedagoška provjera**
**Razumijevanje vizualnog CSS dizajna**: Potvrdite svoje razumijevanje vizualnog CSS-a:
- ✅ Kako dimenzije u postocima stvaraju responzivni dizajn?
- ✅ Zašto prozirnost stvara efekt prozirnog stakla?
- ✅ Koju ulogu ima z-index u slojevitosti elemenata?
- ✅ Kako vrijednosti border-radius oblikuju staklenku?
**Dizajnerski princip**: Primijetite kako gradimo složene vizuale iz jednostavnih oblika:
1. **Pravokutnici** → **Zaobljeni pravokutnici** → **Dijelovi staklenke**
2. **Jednobojne boje** → **Prozirnost** → **Efekt stakla**
3. **Pojedinačni elementi** → **Slojevita kompozicija** → **3D izgled**
---
## Izazov GitHub Copilot Agenta 🚀
Iskoristite Agent način za dovršetak sljedećeg izazova:
**Opis:** Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija.
**Zadatak:** Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret.
Saznajte više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov: Dodavanje odraza stakla
Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu.
Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići:
**Vaš zadatak:**
- **Napravite** suptilne bijele ili svijetle ovalne oblike za odraze stakla
- **Pozicionirajte** ih strateški na lijevoj strani staklenke
- **Primijenite** odgovarajuću prozirnost i zamućenje za realistični odraz svjetla
- **Koristite** `border-radius` za stvaranje organskih, mjehurićastih oblika
- **Igrajte se** s gradijentima ili box-shadow efektima za dodatni realizam
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/18)
## Proširite svoje CSS znanje
CSS može djelovati složeno na početku, ali razumijevanje ovih osnovnih koncepata pruža čvrsti temelj za naprednije tehnike.
**Vaši sljedeći CSS smjerovi:**
- **Flexbox** - pojednostavljuje poravnanje i raspodjelu elemenata
- **CSS Grid** - nudi moćne alate za izradu složenih izgleda
- **CSS varijable** - smanjuju ponavljanje i olakšavaju održavanje koda
- **Responzivni dizajn** - osigurava dobar rad stranica na različitim veličinama ekrana
### Interaktivni resursi za učenje
Vježbajte ove koncepte kroz zanimljive, praktične igre:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovladavanje Flexboxom kroz zabavne izazove
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Učite CSS Grid uz uzgoj virtualne mrkve
- 🎯 [CSS Battle](https://cssbattle.dev/) - Testirajte CSS vještine kroz kodne izazove
### Dodatno učenje
Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel
- [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom
- [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje
- [ ] Vježbajte box model dodavanjem paddinga i margine na div
### 🎯 **Što možete postići u ovom satu**
- [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a
- [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom
- [ ] Kreirati jednostavan raspored koristeći flexbox ili grid
- [ ] Eksperimentirati s CSS prijelazima za glatke efekte
- [ ] Vježbati responzivni dizajn s media queryjima
### 📅 **Vaša tjedna CSS avantura**
- [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom
- [ ] Ovladati CSS Gridom izradom galerije fotografija
- [ ] Učiti CSS animacije za oživljavanje dizajna
- [ ] Istražiti CSS preprocessore poput Sassa ili Lessa
- [ ] Proučiti dizajnerske principe i primijeniti ih u CSS-u
- [ ] Analizirati i reproducirati zanimljive dizajne s interneta
### 🌟 **Vaše mjesečno usavršavanje dizajna**
- [ ] Izgraditi kompletan responzivni sustav dizajna web stranice
- [ ] Naučiti CSS-in-JS ili utility-first okvire poput Tailwinda
- [ ] Doprinijeti open source projektima poboljšanjima CSS-a
- [ ] Ovladati naprednim CSS konceptima poput prilagođenih svojstava i containmenta
- [ ] Kreirati višekratno upotrebljive biblioteke komponenti s modularnim CSS-om
- [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje
## 🎯 Vaš vremenski plan za savladavanje CSS-a
```mermaid
timeline
title Napredak u učenju CSS-a
section Osnove (10 minuta)
Veza datoteka: Poveži CSS s HTML-om
: Razumjeti pravila kaskade
: Naučiti osnove naslijeđivanja
section Selektori (15 minuta)
Ciljanje elemenata: Element selektori
: Uzorci klasa
: Specifičnost ID-a
: Kombinatori
section Model kutije (20 minuta)
Osnove izgleda: Margin i padding
: Svojstva bordoera
: Veličina sadržaja
: Ponašanje box-sizinga
section Pozicioniranje (25 minuta)
Postavljanje elemenata: Statično vs relativno
: Apsolutno pozicioniranje
: Z-index slojevi
: Responzivne jedinice
section Vizualni dizajn (30 minuta)
Majstorstvo stiliziranja: Boje i neprozirnost
: Sjene i efekti
: Prijelazi
: Svojstva transformacije
section Responzivni dizajn (45 minuta)
Više uređaja podrška: Media upiti
: Fleksibilni rasporedi
: Pristup mobilni-prvo
: Optimizacija viewporta
section Napredne tehnike (1 tjedan)
Moderni CSS: Flexbox rasporedi
: CSS Grid sustavi
: Prilagođena svojstva
: Animacijski keyframeovi
section Profesionalne vještine (1 mjesec)
CSS arhitektura: Obrasci komponenti
: Održiv kod
: Optimizacija performansi
: Kompatibilnost između preglednika
```
### 🛠️ Sažetak vašeg CSS alata
Nakon završetka ovog poglavlja, sada imate:
- **Razumijevanje kaskade**: Kako se stilovi nasljeđuju i nadjačavaju
- **Ovladavanje selektorima**: Precizno ciljanje elemenata, klasa i ID-eva
- **Vještine pozicioniranja**: Strateško postavljanje i slojevitost elemenata
- **Vizualni dizajn**: Stvaranje staklenih efekata, sjena i prozirnosti
- **Responzivne tehnike**: Rasporedi u postocima koji se prilagođavaju svakom ekranu
- **Organizacija koda**: Čista, održiva CSS struktura
- **Moderni pristupi**: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca
**Sljedeći koraci**: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript!
## Zadatak
[CSS Refactoring](assignment.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda.
` element. Vidjet ćeš da nasljeđuje font-family od body:
✅ **Vrijeme za eksperiment**: Pokušaj postaviti druga nasljediva svojstva na `` kao `color`, `line-height` ili `text-align`. Što se događa s naslovom i ostalim elementima?
> 📝 **Nasljediva svojstva uključuju**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **Svojstva koja se ne nasljeđuju uključuju**: `margin`, `padding`, `border`, `width`, `height`, `position`
### 🔄 **Pedagoški pregled**
**Razumijevanje osnova CSS-a**: Prije prelaska na selektore, osiguraj da možeš:
- ✅ Objasniti razliku između kaskade i nasljeđivanja
- ✅ Predvidjeti koji stil će pobijediti u konfliktu specifičnosti
- ✅ Prepoznati koja svojstva se nasljeđuju od roditeljskih elemenata
- ✅ Ispravno povezati CSS datoteke s HTML-om
**Brzi test**: Ako imaš ove stilove, koje će boje biti `` unutar ``?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odgovor: Crvena (selektor elementa direktno cilja h1)*
## Ovladavanje CSS selektorima
CSS selektori su tvoj način da ciljano stiliziraš određene elemente. Oni funkcioniraju kao davanje preciznih uputa - umjesto da kažeš "kuća", kažeš "plava kuća s crvenim vratima u Maple Streetu".
CSS nudi različite načine da budeš specifičan, a odabir pravog selektora je poput izbora pravog alata za zadatak. Ponekad trebaš stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.
### Selektori elemenata (Tagovi)
Selektori elemenata ciljaju HTML elemente po imenu taga. Savršeni su za postavljanje osnovnih stilova koji se primjenjuju široko preko stranice:
```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;
}
```
**Što ovi stilovi rade:**
- **Postavlja** dosljednu tipografiju preko cijele stranice pomoću `body` selektora
- **Uklanja** zadane margine i padding preglednika radi bolje kontrole
- **Stilizira** sve naslove bojom, poravnanjem i razmakom
- **Koristi** `rem` jedinice za skalabilne i pristupačne veličine fonta
Iako element selektori dobro funkcioniraju za opće stiliziranje, trebat ćeš specifičnije selektore za stiliziranje pojedinačnih komponenti poput biljaka u tvom terrariju.
### ID selektori za jedinstvene elemente
ID selektori koriste simbol `#` i ciljaju elemente s određenim `id` atributom. Budući da id-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput lijevog i desnog kontejnera s biljkama.
Napravimo stilizaciju za bočne kontejnere terrarija gdje će biljke stajati:
```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;
}
```
**Što ovaj kod radi:**
- **Pozicionira** kontejnere na lijevi i desni rub ekrana koristeći `absolute` pozicioniranje
- **Koristi** `vh` (visina viewporta) jedinice za responzivnu visinu koja se prilagođava veličini ekrana
- **Primjenjuje** `box-sizing: border-box` tako da padding ulazi u ukupnu širinu
- **Uklanja** nepotrebne `px` jedinice za vrijednosti nula radi čišćeg koda
- **Postavlja** suptilnu boju pozadine koja je lakša za oči od oštre sive
✅ **Izazov za kvalitetu koda**: Primijeti kako ovaj CSS krši DRY (Don't Repeat Yourself) princip. Možeš li ga refaktorirati koristeći oba, ID i klasu?
**Poboljšani pristup:**
```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;
}
```
### Klase za ponovnu upotrebu stilova
Klase koriste simbol `.` i idealne su kada želiš primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponavljati po cijelom HTML-u, što ih čini idealnim za dosljedne stilizacijske obrasce.
U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID za jedinstveno pozicioniranje.
**Ovo je HTML struktura za svaku biljku:**
```html
```
**Objašnjenje ključnih elemenata:**
- **Koristi** `class="plant-holder"` za dosljedno stiliziranje kontejnera svih biljaka
- **Primjenjuje** `class="plant"` za zajedničku stilizaciju slike i ponašanje
- **Sadrži** jedinstveni `id="plant1"` za individualno pozicioniranje i JavaScript interakciju
- **Nudi** opisni alt tekst radi pristupačnosti čitačima ekrana
Sada dodaj ove stilove u svoju datoteku `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);
}
```
**Što ovi stilovi rade:**
- **Stvara** relativno pozicioniranje za plant holder koji uspostavlja kontekst pozicije
- **Postavlja** visinu svakog plant holdera na 13% da bi sve biljke stale vertikalno bez skrolanja
- **Pomjera** holder-e malo ulijevo za bolji centar biljaka u njihovim kontejnerima
- **Dozvoljava** biljkama da se skaliraju responzivno uz svojstva `max-width` i `max-height`
- **Koristi** `z-index` da biljke budu slojene iznad ostalih elemenata u terrariju
- **Dodaje** suptilni efekt prilikom lebdenja pomoću CSS prijelaza za bolje korisničko iskustvo
✅ **Kritičko razmišljanje**: Zašto nam trebaju oba selektora `.plant-holder` i `.plant`? Što bi se dogodilo da koristimo samo jedan?
> 💡 **Dizajnerski obrazac**: Kontejner (`.plant-holder`) kontrolira layout i pozicioniranje, dok sadržaj (`.plant`) kontrolira izgled i skaliranje. Ova podjela čini kod održivijim i fleksibilnijim.
## Razumijevanje CSS pozicioniranja
CSS pozicioniranje je kao režija na sceni - ti upravljaš gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje radi dramatičnog efekta.
Kad shvatiš pozicioniranje, mnogi izazovi kod layouta postaju upravljivi. Trebaš li navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želiš li tooltip koji se pojavljuje na određenom mjestu? To je također pozicioniranje.
### Pet vrijednosti pozicije
```mermaid
quadrantChart
title Strategija pozicioniranja u CSS-u
x-axis Tok dokumenta --> Uklonjeno iz toka
y-axis Statička pozicija --> Precizna kontrola
quadrant-1 Apsolutno
quadrant-2 Fiksno
quadrant-3 Statično
quadrant-4 Ljepljivo
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]
```
| Vrijednost pozicije | Ponašanje | Primjena |
|---------------------|-----------|----------|
| `static` | Zadani tijek, ignorira top/left/right/bottom | Normalni raspored dokumenta |
| `relative` | Pozicionirano relativno u odnosu na normalni položaj | Male prilagodbe, stvaranje konteksta pozicije |
| `absolute` | Pozicionirano relativno u odnosu na najbližeg pozicioniranog roditelja | Precizno postavljanje, slojevi preko |
| `fixed` | Pozicionirano relativno prema viewportu | Navigacijske trake, plutajući elementi |
| `sticky` | Mijenja se između relative i fixed ovisno o skrolanju | Zaglavlja koja se lijepe prilikom skrolanja |
### Pozicioniranje u našem terrariju
Naš terrarij koristi stratešku kombinaciju tipova pozicioniranja da stvori željeni layout:
```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 ... */
}
```
**Razumijevanje strategije pozicioniranja:**
- **Apsolutni kontejneri** su izuzeti iz uobičajenog tijeka dokumenta i pričvršćeni su na rubove ekrana
- **Relativni plant holderi** stvaraju kontekst pozicioniranja, a pritom ostaju u tijeku dokumenta
- **Apsolutne biljke** mogu biti precizno pozicionirane unutar relativnih kontejnera
- **Ova kombinacija** omogućava biljkama da se slažu vertikalno, a istovremeno se pojedinačno pozicioniraju
> 🎯 **Zašto je ovo važno**: Elementi "plant" trebaju apsolutno pozicioniranje da bi bili drag'n'drop (povuci i pusti) u sljedećem satu. Apsolutno pozicioniranje uklanja ih iz normalnog tijeka layouta, omogućujući interakciju povlačenja i ispuštanja.
✅ **Vrijeme za eksperiment**: Isprobaj promjenu vrijednosti pozicije i promatraj rezultate:
- Što se dogodi ako promijeniš `.container` iz `absolute` u `relative`?
- Kako se raspored mijenja ako `.plant-holder` koristi `absolute` umjesto `relative`?
- Što se događa kada ` .plant` promijenite u `relative` pozicioniranje?
### 🔄 **Pedagoška provjera**
**Vladanje CSS pozicioniranjem**: Pauzirajte i provjerite svoje razumijevanje:
- ✅ Možete li objasniti zašto biljke trebaju apsolutno pozicioniranje za povuci-i-pusti funkcionalnost?
- ✅ Razumijete li kako relativni spremnici stvaraju kontekst pozicioniranja?
- ✅ Zašto bočni spremnici koriste apsolutno pozicioniranje?
- ✅ Što bi se dogodilo ako u potpunosti uklonite deklaracije pozicija?
**Povezanost s realnim svijetom**: Razmislite kako CSS pozicioniranje odražava stvarni raspored:
- **Static**: Knjige na polici (prirodni redoslijed)
- **Relative**: Pomicanje knjige malo, ali zadržavanje mjesta
- **Absolute**: Postavljanje knjižne oznake na točan broj stranice
- **Fixed**: Ljepljiva bilješka koja ostaje vidljiva dok okrećete stranice
## Izgradnja terarija s CSS-om
Sada ćemo izgraditi staklenku koristeći samo CSS - bez slika ili grafičkog softvera.
Stvaranje realističnog izgleda stakla, sjena i dubine pomoću pozicioniranja i prozirnosti demonstrira vizualne sposobnosti CSS-a. Ova tehnika odražava način na koji su arhitekti Bauhaus pokreta koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Kad razumijete ove principe, prepoznat ćete CSS tehnike iza mnogih web dizajna.
```mermaid
flowchart LR
A[Poklopac Staklenke] --> E[Potpuni Terarij]
B[Zidovi Staklenke] --> E
C[Sloj Zemlje] --> E
D[Donji Dio Staklenke] --> E
F[Efejeti Stakla] --> E
A1["50% širina
5% visina
Vrhunska pozicija"] --> A
B1["60% širina
80% visina
Zaobljeni kutovi
0.5 neprozirnost"] --> B
C1["60% širina
5% visina
Tamno smeđa
Donji sloj"] --> C
D1["50% širina
1% visina
Donja pozicija"] --> D
F1["Suptilne sjene
Prozirnost
Slojevanje po Z-indeksu"] --> F
style E fill:#d1e1df,stroke:#3a241d
style A fill:#e8f5e8
style B fill:#e8f5e8
style C fill:#8B4513
style D fill:#e8f5e8
```
### Izrada dijelova staklenke
Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn:
```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;
}
```
**Razumijevanje konstrukcije terarija:**
- **Koristi** dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana
- **Pozicionira** elemente apsolutno kako bi ih precizno složila i poravnala
- **Primjenjuje** različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti
- **Koristi** `z-index` slojevito kako bi biljke bile unutar staklenke
- **Dodaje** suptilne sjene i fino zaobljene rubove za realističniji izgled
### Responzivni dizajn s postocima
Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela:
**Zašto je to važno:**
- **Osigurava** proporcionalno skaliranje terarija na bilo kojoj veličini ekrana
- **Održava** vizualne odnose između dijelova staklenke
- **Pruža** dosljedno iskustvo od mobilnih telefona do velikih desktop monitora
- **Omogućuje** dizajnu prilagodbu bez narušavanja vizualnog rasporeda
### CSS jedinice u praksi
Koristimo `rem` jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji.
✅ **Vizualno eksperimentiranje**: Pokušajte mijenjati ove vrijednosti i promatrajte učinke:
- Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla?
- Prilagodite boju tla s `#3a241d` na `#8B4513` – koji je vizualni efekt?
- Izmijenite `z-index` tla na 2 – što se događa sa slojevima?
### 🔄 **Pedagoška provjera**
**Razumijevanje vizualnog CSS dizajna**: Potvrdite svoje razumijevanje vizualnog CSS-a:
- ✅ Kako dimenzije u postocima stvaraju responzivni dizajn?
- ✅ Zašto prozirnost stvara efekt prozirnog stakla?
- ✅ Koju ulogu ima z-index u slojevitosti elemenata?
- ✅ Kako vrijednosti border-radius oblikuju staklenku?
**Dizajnerski princip**: Primijetite kako gradimo složene vizuale iz jednostavnih oblika:
1. **Pravokutnici** → **Zaobljeni pravokutnici** → **Dijelovi staklenke**
2. **Jednobojne boje** → **Prozirnost** → **Efekt stakla**
3. **Pojedinačni elementi** → **Slojevita kompozicija** → **3D izgled**
---
## Izazov GitHub Copilot Agenta 🚀
Iskoristite Agent način za dovršetak sljedećeg izazova:
**Opis:** Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija.
**Zadatak:** Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret.
Saznajte više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## 🚀 Izazov: Dodavanje odraza stakla
Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu.
Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići:
**Vaš zadatak:**
- **Napravite** suptilne bijele ili svijetle ovalne oblike za odraze stakla
- **Pozicionirajte** ih strateški na lijevoj strani staklenke
- **Primijenite** odgovarajuću prozirnost i zamućenje za realistični odraz svjetla
- **Koristite** `border-radius` za stvaranje organskih, mjehurićastih oblika
- **Igrajte se** s gradijentima ili box-shadow efektima za dodatni realizam
## Kviz nakon predavanja
[Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/18)
## Proširite svoje CSS znanje
CSS može djelovati složeno na početku, ali razumijevanje ovih osnovnih koncepata pruža čvrsti temelj za naprednije tehnike.
**Vaši sljedeći CSS smjerovi:**
- **Flexbox** - pojednostavljuje poravnanje i raspodjelu elemenata
- **CSS Grid** - nudi moćne alate za izradu složenih izgleda
- **CSS varijable** - smanjuju ponavljanje i olakšavaju održavanje koda
- **Responzivni dizajn** - osigurava dobar rad stranica na različitim veličinama ekrana
### Interaktivni resursi za učenje
Vježbajte ove koncepte kroz zanimljive, praktične igre:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovladavanje Flexboxom kroz zabavne izazove
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Učite CSS Grid uz uzgoj virtualne mrkve
- 🎯 [CSS Battle](https://cssbattle.dev/) - Testirajte CSS vještine kroz kodne izazove
### Dodatno učenje
Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
### ⚡ **Što možete učiniti u sljedećih 5 minuta**
- [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel
- [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom
- [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje
- [ ] Vježbajte box model dodavanjem paddinga i margine na div
### 🎯 **Što možete postići u ovom satu**
- [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a
- [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom
- [ ] Kreirati jednostavan raspored koristeći flexbox ili grid
- [ ] Eksperimentirati s CSS prijelazima za glatke efekte
- [ ] Vježbati responzivni dizajn s media queryjima
### 📅 **Vaša tjedna CSS avantura**
- [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom
- [ ] Ovladati CSS Gridom izradom galerije fotografija
- [ ] Učiti CSS animacije za oživljavanje dizajna
- [ ] Istražiti CSS preprocessore poput Sassa ili Lessa
- [ ] Proučiti dizajnerske principe i primijeniti ih u CSS-u
- [ ] Analizirati i reproducirati zanimljive dizajne s interneta
### 🌟 **Vaše mjesečno usavršavanje dizajna**
- [ ] Izgraditi kompletan responzivni sustav dizajna web stranice
- [ ] Naučiti CSS-in-JS ili utility-first okvire poput Tailwinda
- [ ] Doprinijeti open source projektima poboljšanjima CSS-a
- [ ] Ovladati naprednim CSS konceptima poput prilagođenih svojstava i containmenta
- [ ] Kreirati višekratno upotrebljive biblioteke komponenti s modularnim CSS-om
- [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje
## 🎯 Vaš vremenski plan za savladavanje CSS-a
```mermaid
timeline
title Napredak u učenju CSS-a
section Osnove (10 minuta)
Veza datoteka: Poveži CSS s HTML-om
: Razumjeti pravila kaskade
: Naučiti osnove naslijeđivanja
section Selektori (15 minuta)
Ciljanje elemenata: Element selektori
: Uzorci klasa
: Specifičnost ID-a
: Kombinatori
section Model kutije (20 minuta)
Osnove izgleda: Margin i padding
: Svojstva bordoera
: Veličina sadržaja
: Ponašanje box-sizinga
section Pozicioniranje (25 minuta)
Postavljanje elemenata: Statično vs relativno
: Apsolutno pozicioniranje
: Z-index slojevi
: Responzivne jedinice
section Vizualni dizajn (30 minuta)
Majstorstvo stiliziranja: Boje i neprozirnost
: Sjene i efekti
: Prijelazi
: Svojstva transformacije
section Responzivni dizajn (45 minuta)
Više uređaja podrška: Media upiti
: Fleksibilni rasporedi
: Pristup mobilni-prvo
: Optimizacija viewporta
section Napredne tehnike (1 tjedan)
Moderni CSS: Flexbox rasporedi
: CSS Grid sustavi
: Prilagođena svojstva
: Animacijski keyframeovi
section Profesionalne vještine (1 mjesec)
CSS arhitektura: Obrasci komponenti
: Održiv kod
: Optimizacija performansi
: Kompatibilnost između preglednika
```
### 🛠️ Sažetak vašeg CSS alata
Nakon završetka ovog poglavlja, sada imate:
- **Razumijevanje kaskade**: Kako se stilovi nasljeđuju i nadjačavaju
- **Ovladavanje selektorima**: Precizno ciljanje elemenata, klasa i ID-eva
- **Vještine pozicioniranja**: Strateško postavljanje i slojevitost elemenata
- **Vizualni dizajn**: Stvaranje staklenih efekata, sjena i prozirnosti
- **Responzivne tehnike**: Rasporedi u postocima koji se prilagođavaju svakom ekranu
- **Organizacija koda**: Čista, održiva CSS struktura
- **Moderni pristupi**: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca
**Sljedeći koraci**: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript!
## Zadatak
[CSS Refactoring](assignment.md)
---
**Odricanje od odgovornosti**:
Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda.
`?
```css
div { color: blue; }
.special { color: green; }
h1 { color: red; }
```
*Odgovor: Crvena (selektor elementa direktno cilja h1)*
## Ovladavanje CSS selektorima
CSS selektori su tvoj način da ciljano stiliziraš određene elemente. Oni funkcioniraju kao davanje preciznih uputa - umjesto da kažeš "kuća", kažeš "plava kuća s crvenim vratima u Maple Streetu".
CSS nudi različite načine da budeš specifičan, a odabir pravog selektora je poput izbora pravog alata za zadatak. Ponekad trebaš stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.
### Selektori elemenata (Tagovi)
Selektori elemenata ciljaju HTML elemente po imenu taga. Savršeni su za postavljanje osnovnih stilova koji se primjenjuju široko preko stranice:
```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;
}
```
**Što ovi stilovi rade:**
- **Postavlja** dosljednu tipografiju preko cijele stranice pomoću `body` selektora
- **Uklanja** zadane margine i padding preglednika radi bolje kontrole
- **Stilizira** sve naslove bojom, poravnanjem i razmakom
- **Koristi** `rem` jedinice za skalabilne i pristupačne veličine fonta
Iako element selektori dobro funkcioniraju za opće stiliziranje, trebat ćeš specifičnije selektore za stiliziranje pojedinačnih komponenti poput biljaka u tvom terrariju.
### ID selektori za jedinstvene elemente
ID selektori koriste simbol `#` i ciljaju elemente s određenim `id` atributom. Budući da id-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput lijevog i desnog kontejnera s biljkama.
Napravimo stilizaciju za bočne kontejnere terrarija gdje će biljke stajati:
```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;
}
```
**Što ovaj kod radi:**
- **Pozicionira** kontejnere na lijevi i desni rub ekrana koristeći `absolute` pozicioniranje
- **Koristi** `vh` (visina viewporta) jedinice za responzivnu visinu koja se prilagođava veličini ekrana
- **Primjenjuje** `box-sizing: border-box` tako da padding ulazi u ukupnu širinu
- **Uklanja** nepotrebne `px` jedinice za vrijednosti nula radi čišćeg koda
- **Postavlja** suptilnu boju pozadine koja je lakša za oči od oštre sive
✅ **Izazov za kvalitetu koda**: Primijeti kako ovaj CSS krši DRY (Don't Repeat Yourself) princip. Možeš li ga refaktorirati koristeći oba, ID i klasu?
**Poboljšani pristup:**
```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;
}
```
### Klase za ponovnu upotrebu stilova
Klase koriste simbol `.` i idealne su kada želiš primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponavljati po cijelom HTML-u, što ih čini idealnim za dosljedne stilizacijske obrasce.
U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID za jedinstveno pozicioniranje.
**Ovo je HTML struktura za svaku biljku:**
```html
```
**Objašnjenje ključnih elemenata:**
- **Koristi** `class="plant-holder"` za dosljedno stiliziranje kontejnera svih biljaka
- **Primjenjuje** `class="plant"` za zajedničku stilizaciju slike i ponašanje
- **Sadrži** jedinstveni `id="plant1"` za individualno pozicioniranje i JavaScript interakciju
- **Nudi** opisni alt tekst radi pristupačnosti čitačima ekrana
Sada dodaj ove stilove u svoju datoteku `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);
}
```
**Što ovi stilovi rade:**
- **Stvara** relativno pozicioniranje za plant holder koji uspostavlja kontekst pozicije
- **Postavlja** visinu svakog plant holdera na 13% da bi sve biljke stale vertikalno bez skrolanja
- **Pomjera** holder-e malo ulijevo za bolji centar biljaka u njihovim kontejnerima
- **Dozvoljava** biljkama da se skaliraju responzivno uz svojstva `max-width` i `max-height`
- **Koristi** `z-index` da biljke budu slojene iznad ostalih elemenata u terrariju
- **Dodaje** suptilni efekt prilikom lebdenja pomoću CSS prijelaza za bolje korisničko iskustvo
✅ **Kritičko razmišljanje**: Zašto nam trebaju oba selektora `.plant-holder` i `.plant`? Što bi se dogodilo da koristimo samo jedan?
> 💡 **Dizajnerski obrazac**: Kontejner (`.plant-holder`) kontrolira layout i pozicioniranje, dok sadržaj (`.plant`) kontrolira izgled i skaliranje. Ova podjela čini kod održivijim i fleksibilnijim.
## Razumijevanje CSS pozicioniranja
CSS pozicioniranje je kao režija na sceni - ti upravljaš gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje radi dramatičnog efekta.
Kad shvatiš pozicioniranje, mnogi izazovi kod layouta postaju upravljivi. Trebaš li navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želiš li tooltip koji se pojavljuje na određenom mjestu? To je također pozicioniranje.
### Pet vrijednosti pozicije
```mermaid
quadrantChart
title Strategija pozicioniranja u CSS-u
x-axis Tok dokumenta --> Uklonjeno iz toka
y-axis Statička pozicija --> Precizna kontrola
quadrant-1 Apsolutno
quadrant-2 Fiksno
quadrant-3 Statično
quadrant-4 Ljepljivo
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]
```
| Vrijednost pozicije | Ponašanje | Primjena |
|---------------------|-----------|----------|
| `static` | Zadani tijek, ignorira top/left/right/bottom | Normalni raspored dokumenta |
| `relative` | Pozicionirano relativno u odnosu na normalni položaj | Male prilagodbe, stvaranje konteksta pozicije |
| `absolute` | Pozicionirano relativno u odnosu na najbližeg pozicioniranog roditelja | Precizno postavljanje, slojevi preko |
| `fixed` | Pozicionirano relativno prema viewportu | Navigacijske trake, plutajući elementi |
| `sticky` | Mijenja se između relative i fixed ovisno o skrolanju | Zaglavlja koja se lijepe prilikom skrolanja |
### Pozicioniranje u našem terrariju
Naš terrarij koristi stratešku kombinaciju tipova pozicioniranja da stvori željeni layout:
```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 ... */
}
```
**Razumijevanje strategije pozicioniranja:**
- **Apsolutni kontejneri** su izuzeti iz uobičajenog tijeka dokumenta i pričvršćeni su na rubove ekrana
- **Relativni plant holderi** stvaraju kontekst pozicioniranja, a pritom ostaju u tijeku dokumenta
- **Apsolutne biljke** mogu biti precizno pozicionirane unutar relativnih kontejnera
- **Ova kombinacija** omogućava biljkama da se slažu vertikalno, a istovremeno se pojedinačno pozicioniraju
> 🎯 **Zašto je ovo važno**: Elementi "plant" trebaju apsolutno pozicioniranje da bi bili drag'n'drop (povuci i pusti) u sljedećem satu. Apsolutno pozicioniranje uklanja ih iz normalnog tijeka layouta, omogućujući interakciju povlačenja i ispuštanja.
✅ **Vrijeme za eksperiment**: Isprobaj promjenu vrijednosti pozicije i promatraj rezultate:
- Što se dogodi ako promijeniš `.container` iz `absolute` u `relative`?
- Kako se raspored mijenja ako `.plant-holder` koristi `absolute` umjesto `relative`?
- Što se događa kada ` .plant` promijenite u `relative` pozicioniranje?
### 🔄 **Pedagoška provjera**
**Vladanje CSS pozicioniranjem**: Pauzirajte i provjerite svoje razumijevanje:
- ✅ Možete li objasniti zašto biljke trebaju apsolutno pozicioniranje za povuci-i-pusti funkcionalnost?
- ✅ Razumijete li kako relativni spremnici stvaraju kontekst pozicioniranja?
- ✅ Zašto bočni spremnici koriste apsolutno pozicioniranje?
- ✅ Što bi se dogodilo ako u potpunosti uklonite deklaracije pozicija?
**Povezanost s realnim svijetom**: Razmislite kako CSS pozicioniranje odražava stvarni raspored:
- **Static**: Knjige na polici (prirodni redoslijed)
- **Relative**: Pomicanje knjige malo, ali zadržavanje mjesta
- **Absolute**: Postavljanje knjižne oznake na točan broj stranice
- **Fixed**: Ljepljiva bilješka koja ostaje vidljiva dok okrećete stranice
## Izgradnja terarija s CSS-om
Sada ćemo izgraditi staklenku koristeći samo CSS - bez slika ili grafičkog softvera.
Stvaranje realističnog izgleda stakla, sjena i dubine pomoću pozicioniranja i prozirnosti demonstrira vizualne sposobnosti CSS-a. Ova tehnika odražava način na koji su arhitekti Bauhaus pokreta koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Kad razumijete ove principe, prepoznat ćete CSS tehnike iza mnogih web dizajna.
```mermaid
flowchart LR
A[Poklopac Staklenke] --> E[Potpuni Terarij]
B[Zidovi Staklenke] --> E
C[Sloj Zemlje] --> E
D[Donji Dio Staklenke] --> E
F[Efejeti Stakla] --> E
A1["50% širina
5% visina
Vrhunska pozicija"] --> A B1["60% širina
80% visina
Zaobljeni kutovi
0.5 neprozirnost"] --> B C1["60% širina
5% visina
Tamno smeđa
Donji sloj"] --> C D1["50% širina
1% visina
Donja pozicija"] --> D F1["Suptilne sjene
Prozirnost
Slojevanje po Z-indeksu"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Izrada dijelova staklenke Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn: ```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; } ``` **Razumijevanje konstrukcije terarija:** - **Koristi** dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana - **Pozicionira** elemente apsolutno kako bi ih precizno složila i poravnala - **Primjenjuje** različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti - **Koristi** `z-index` slojevito kako bi biljke bile unutar staklenke - **Dodaje** suptilne sjene i fino zaobljene rubove za realističniji izgled ### Responzivni dizajn s postocima Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela: **Zašto je to važno:** - **Osigurava** proporcionalno skaliranje terarija na bilo kojoj veličini ekrana - **Održava** vizualne odnose između dijelova staklenke - **Pruža** dosljedno iskustvo od mobilnih telefona do velikih desktop monitora - **Omogućuje** dizajnu prilagodbu bez narušavanja vizualnog rasporeda ### CSS jedinice u praksi Koristimo `rem` jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji. ✅ **Vizualno eksperimentiranje**: Pokušajte mijenjati ove vrijednosti i promatrajte učinke: - Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla? - Prilagodite boju tla s `#3a241d` na `#8B4513` – koji je vizualni efekt? - Izmijenite `z-index` tla na 2 – što se događa sa slojevima? ### 🔄 **Pedagoška provjera** **Razumijevanje vizualnog CSS dizajna**: Potvrdite svoje razumijevanje vizualnog CSS-a: - ✅ Kako dimenzije u postocima stvaraju responzivni dizajn? - ✅ Zašto prozirnost stvara efekt prozirnog stakla? - ✅ Koju ulogu ima z-index u slojevitosti elemenata? - ✅ Kako vrijednosti border-radius oblikuju staklenku? **Dizajnerski princip**: Primijetite kako gradimo složene vizuale iz jednostavnih oblika: 1. **Pravokutnici** → **Zaobljeni pravokutnici** → **Dijelovi staklenke** 2. **Jednobojne boje** → **Prozirnost** → **Efekt stakla** 3. **Pojedinačni elementi** → **Slojevita kompozicija** → **3D izgled** --- ## Izazov GitHub Copilot Agenta 🚀 Iskoristite Agent način za dovršetak sljedećeg izazova: **Opis:** Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija. **Zadatak:** Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret. Saznajte više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje. ## 🚀 Izazov: Dodavanje odraza stakla Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu. Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići:  **Vaš zadatak:** - **Napravite** suptilne bijele ili svijetle ovalne oblike za odraze stakla - **Pozicionirajte** ih strateški na lijevoj strani staklenke - **Primijenite** odgovarajuću prozirnost i zamućenje za realistični odraz svjetla - **Koristite** `border-radius` za stvaranje organskih, mjehurićastih oblika - **Igrajte se** s gradijentima ili box-shadow efektima za dodatni realizam ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/18) ## Proširite svoje CSS znanje CSS može djelovati složeno na početku, ali razumijevanje ovih osnovnih koncepata pruža čvrsti temelj za naprednije tehnike. **Vaši sljedeći CSS smjerovi:** - **Flexbox** - pojednostavljuje poravnanje i raspodjelu elemenata - **CSS Grid** - nudi moćne alate za izradu složenih izgleda - **CSS varijable** - smanjuju ponavljanje i olakšavaju održavanje koda - **Responzivni dizajn** - osigurava dobar rad stranica na različitim veličinama ekrana ### Interaktivni resursi za učenje Vježbajte ove koncepte kroz zanimljive, praktične igre: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovladavanje Flexboxom kroz zabavne izazove - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Učite CSS Grid uz uzgoj virtualne mrkve - 🎯 [CSS Battle](https://cssbattle.dev/) - Testirajte CSS vještine kroz kodne izazove ### Dodatno učenje Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Što možete učiniti u sljedećih 5 minuta** - [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel - [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom - [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje - [ ] Vježbajte box model dodavanjem paddinga i margine na div ### 🎯 **Što možete postići u ovom satu** - [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a - [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom - [ ] Kreirati jednostavan raspored koristeći flexbox ili grid - [ ] Eksperimentirati s CSS prijelazima za glatke efekte - [ ] Vježbati responzivni dizajn s media queryjima ### 📅 **Vaša tjedna CSS avantura** - [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom - [ ] Ovladati CSS Gridom izradom galerije fotografija - [ ] Učiti CSS animacije za oživljavanje dizajna - [ ] Istražiti CSS preprocessore poput Sassa ili Lessa - [ ] Proučiti dizajnerske principe i primijeniti ih u CSS-u - [ ] Analizirati i reproducirati zanimljive dizajne s interneta ### 🌟 **Vaše mjesečno usavršavanje dizajna** - [ ] Izgraditi kompletan responzivni sustav dizajna web stranice - [ ] Naučiti CSS-in-JS ili utility-first okvire poput Tailwinda - [ ] Doprinijeti open source projektima poboljšanjima CSS-a - [ ] Ovladati naprednim CSS konceptima poput prilagođenih svojstava i containmenta - [ ] Kreirati višekratno upotrebljive biblioteke komponenti s modularnim CSS-om - [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje ## 🎯 Vaš vremenski plan za savladavanje CSS-a ```mermaid timeline title Napredak u učenju CSS-a section Osnove (10 minuta) Veza datoteka: Poveži CSS s HTML-om : Razumjeti pravila kaskade : Naučiti osnove naslijeđivanja section Selektori (15 minuta) Ciljanje elemenata: Element selektori : Uzorci klasa : Specifičnost ID-a : Kombinatori section Model kutije (20 minuta) Osnove izgleda: Margin i padding : Svojstva bordoera : Veličina sadržaja : Ponašanje box-sizinga section Pozicioniranje (25 minuta) Postavljanje elemenata: Statično vs relativno : Apsolutno pozicioniranje : Z-index slojevi : Responzivne jedinice section Vizualni dizajn (30 minuta) Majstorstvo stiliziranja: Boje i neprozirnost : Sjene i efekti : Prijelazi : Svojstva transformacije section Responzivni dizajn (45 minuta) Više uređaja podrška: Media upiti : Fleksibilni rasporedi : Pristup mobilni-prvo : Optimizacija viewporta section Napredne tehnike (1 tjedan) Moderni CSS: Flexbox rasporedi : CSS Grid sustavi : Prilagođena svojstva : Animacijski keyframeovi section Profesionalne vještine (1 mjesec) CSS arhitektura: Obrasci komponenti : Održiv kod : Optimizacija performansi : Kompatibilnost između preglednika ``` ### 🛠️ Sažetak vašeg CSS alata Nakon završetka ovog poglavlja, sada imate: - **Razumijevanje kaskade**: Kako se stilovi nasljeđuju i nadjačavaju - **Ovladavanje selektorima**: Precizno ciljanje elemenata, klasa i ID-eva - **Vještine pozicioniranja**: Strateško postavljanje i slojevitost elemenata - **Vizualni dizajn**: Stvaranje staklenih efekata, sjena i prozirnosti - **Responzivne tehnike**: Rasporedi u postocima koji se prilagođavaju svakom ekranu - **Organizacija koda**: Čista, održiva CSS struktura - **Moderni pristupi**: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca **Sljedeći koraci**: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript! ## Zadatak [CSS Refactoring](assignment.md) --- **Odricanje od odgovornosti**: Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda.
5% visina
Vrhunska pozicija"] --> A B1["60% širina
80% visina
Zaobljeni kutovi
0.5 neprozirnost"] --> B C1["60% širina
5% visina
Tamno smeđa
Donji sloj"] --> C D1["50% širina
1% visina
Donja pozicija"] --> D F1["Suptilne sjene
Prozirnost
Slojevanje po Z-indeksu"] --> F style E fill:#d1e1df,stroke:#3a241d style A fill:#e8f5e8 style B fill:#e8f5e8 style C fill:#8B4513 style D fill:#e8f5e8 ``` ### Izrada dijelova staklenke Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn: ```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; } ``` **Razumijevanje konstrukcije terarija:** - **Koristi** dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana - **Pozicionira** elemente apsolutno kako bi ih precizno složila i poravnala - **Primjenjuje** različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti - **Koristi** `z-index` slojevito kako bi biljke bile unutar staklenke - **Dodaje** suptilne sjene i fino zaobljene rubove za realističniji izgled ### Responzivni dizajn s postocima Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela: **Zašto je to važno:** - **Osigurava** proporcionalno skaliranje terarija na bilo kojoj veličini ekrana - **Održava** vizualne odnose između dijelova staklenke - **Pruža** dosljedno iskustvo od mobilnih telefona do velikih desktop monitora - **Omogućuje** dizajnu prilagodbu bez narušavanja vizualnog rasporeda ### CSS jedinice u praksi Koristimo `rem` jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o [relativnim CSS jedinicama](https://www.w3.org/TR/css-values-3/#font-relative-lengths) u službenoj specifikaciji. ✅ **Vizualno eksperimentiranje**: Pokušajte mijenjati ove vrijednosti i promatrajte učinke: - Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla? - Prilagodite boju tla s `#3a241d` na `#8B4513` – koji je vizualni efekt? - Izmijenite `z-index` tla na 2 – što se događa sa slojevima? ### 🔄 **Pedagoška provjera** **Razumijevanje vizualnog CSS dizajna**: Potvrdite svoje razumijevanje vizualnog CSS-a: - ✅ Kako dimenzije u postocima stvaraju responzivni dizajn? - ✅ Zašto prozirnost stvara efekt prozirnog stakla? - ✅ Koju ulogu ima z-index u slojevitosti elemenata? - ✅ Kako vrijednosti border-radius oblikuju staklenku? **Dizajnerski princip**: Primijetite kako gradimo složene vizuale iz jednostavnih oblika: 1. **Pravokutnici** → **Zaobljeni pravokutnici** → **Dijelovi staklenke** 2. **Jednobojne boje** → **Prozirnost** → **Efekt stakla** 3. **Pojedinačni elementi** → **Slojevita kompozicija** → **3D izgled** --- ## Izazov GitHub Copilot Agenta 🚀 Iskoristite Agent način za dovršetak sljedećeg izazova: **Opis:** Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija. **Zadatak:** Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na `.plant` klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret. Saznajte više o [agent načinu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje. ## 🚀 Izazov: Dodavanje odraza stakla Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu. Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići:  **Vaš zadatak:** - **Napravite** suptilne bijele ili svijetle ovalne oblike za odraze stakla - **Pozicionirajte** ih strateški na lijevoj strani staklenke - **Primijenite** odgovarajuću prozirnost i zamućenje za realistični odraz svjetla - **Koristite** `border-radius` za stvaranje organskih, mjehurićastih oblika - **Igrajte se** s gradijentima ili box-shadow efektima za dodatni realizam ## Kviz nakon predavanja [Kviz nakon predavanja](https://ff-quizzes.netlify.app/web/quiz/18) ## Proširite svoje CSS znanje CSS može djelovati složeno na početku, ali razumijevanje ovih osnovnih koncepata pruža čvrsti temelj za naprednije tehnike. **Vaši sljedeći CSS smjerovi:** - **Flexbox** - pojednostavljuje poravnanje i raspodjelu elemenata - **CSS Grid** - nudi moćne alate za izradu složenih izgleda - **CSS varijable** - smanjuju ponavljanje i olakšavaju održavanje koda - **Responzivni dizajn** - osigurava dobar rad stranica na različitim veličinama ekrana ### Interaktivni resursi za učenje Vježbajte ove koncepte kroz zanimljive, praktične igre: - 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Ovladavanje Flexboxom kroz zabavne izazove - 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Učite CSS Grid uz uzgoj virtualne mrkve - 🎯 [CSS Battle](https://cssbattle.dev/) - Testirajte CSS vještine kroz kodne izazove ### Dodatno učenje Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) ### ⚡ **Što možete učiniti u sljedećih 5 minuta** - [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel - [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom - [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje - [ ] Vježbajte box model dodavanjem paddinga i margine na div ### 🎯 **Što možete postići u ovom satu** - [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a - [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom - [ ] Kreirati jednostavan raspored koristeći flexbox ili grid - [ ] Eksperimentirati s CSS prijelazima za glatke efekte - [ ] Vježbati responzivni dizajn s media queryjima ### 📅 **Vaša tjedna CSS avantura** - [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom - [ ] Ovladati CSS Gridom izradom galerije fotografija - [ ] Učiti CSS animacije za oživljavanje dizajna - [ ] Istražiti CSS preprocessore poput Sassa ili Lessa - [ ] Proučiti dizajnerske principe i primijeniti ih u CSS-u - [ ] Analizirati i reproducirati zanimljive dizajne s interneta ### 🌟 **Vaše mjesečno usavršavanje dizajna** - [ ] Izgraditi kompletan responzivni sustav dizajna web stranice - [ ] Naučiti CSS-in-JS ili utility-first okvire poput Tailwinda - [ ] Doprinijeti open source projektima poboljšanjima CSS-a - [ ] Ovladati naprednim CSS konceptima poput prilagođenih svojstava i containmenta - [ ] Kreirati višekratno upotrebljive biblioteke komponenti s modularnim CSS-om - [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje ## 🎯 Vaš vremenski plan za savladavanje CSS-a ```mermaid timeline title Napredak u učenju CSS-a section Osnove (10 minuta) Veza datoteka: Poveži CSS s HTML-om : Razumjeti pravila kaskade : Naučiti osnove naslijeđivanja section Selektori (15 minuta) Ciljanje elemenata: Element selektori : Uzorci klasa : Specifičnost ID-a : Kombinatori section Model kutije (20 minuta) Osnove izgleda: Margin i padding : Svojstva bordoera : Veličina sadržaja : Ponašanje box-sizinga section Pozicioniranje (25 minuta) Postavljanje elemenata: Statično vs relativno : Apsolutno pozicioniranje : Z-index slojevi : Responzivne jedinice section Vizualni dizajn (30 minuta) Majstorstvo stiliziranja: Boje i neprozirnost : Sjene i efekti : Prijelazi : Svojstva transformacije section Responzivni dizajn (45 minuta) Više uređaja podrška: Media upiti : Fleksibilni rasporedi : Pristup mobilni-prvo : Optimizacija viewporta section Napredne tehnike (1 tjedan) Moderni CSS: Flexbox rasporedi : CSS Grid sustavi : Prilagođena svojstva : Animacijski keyframeovi section Profesionalne vještine (1 mjesec) CSS arhitektura: Obrasci komponenti : Održiv kod : Optimizacija performansi : Kompatibilnost između preglednika ``` ### 🛠️ Sažetak vašeg CSS alata Nakon završetka ovog poglavlja, sada imate: - **Razumijevanje kaskade**: Kako se stilovi nasljeđuju i nadjačavaju - **Ovladavanje selektorima**: Precizno ciljanje elemenata, klasa i ID-eva - **Vještine pozicioniranja**: Strateško postavljanje i slojevitost elemenata - **Vizualni dizajn**: Stvaranje staklenih efekata, sjena i prozirnosti - **Responzivne tehnike**: Rasporedi u postocima koji se prilagođavaju svakom ekranu - **Organizacija koda**: Čista, održiva CSS struktura - **Moderni pristupi**: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca **Sljedeći koraci**: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript! ## Zadatak [CSS Refactoring](assignment.md) --- **Odricanje od odgovornosti**: Ovaj dokument preveden je korištenjem AI usluge prevođenja [Co-op Translator](https://github.com/Azure/co-op-translator). Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda.