---
# System prepended metadata

title: 'Kriterij Ocenjevanja: CSS Animacija - Logotip'

---


---

# Kriterij Ocenjevanja: CSS Animacija - Logotip

## OSNOVNA NALOGA
Oblikuj in s HTML ter CSS ustvari poljuben logotip. Nato ga oživi z uporabo CSS tranzicij in/ali animacij.

---

## OCENJEVALNI KRITERIJI

### OCENA 2 (ZADOSTNO)
*   **Logotip:** Izdelan preprost logotip (vsaj 2-3 HTML elementi) z osnovnim CSS oblikovanjem.
*   **Animacija:** Vsaj ena preprosta CSS `transition` na `:hover` (npr. sprememba barve, rahla povečava).
*   **Koda:** Ločeni in veljavni HTML ter CSS datoteki z osnovnimi komentarji.

### OCENA 3 (DOBRO)
*   *(Vsi pogoji iz ocene 2)*
*   **Logotip:** Bolj detajlen logotip (vsaj 4-5 HTML elementov ali uporaba psevdo-elementov za oblike).
*   **Animacija:** Vsaj dve različni CSS `transition` na `:hover`, od katerih ena vključuje `transform` (npr. `scale`, `rotate`). Tranzicije so usklajene.
*   **Koda:** Smiselna uporaba CSS razredov.

### OCENA 4 (PRAV DOBRO)
*   *(Vsi pogoji iz ocene 3)*
*   **Logotip:** Kreativen logotip z naprednejšim CSS oblikovanjem (npr. gradienti, sence, kompleksnejši psevdo-elementi).
*   **Animacija:** Vsaj ena preprosta CSS `@keyframes` animacija (2-3 koraki), ki se zgodi ob nalaganju ali na `:hover` (uporabljene lastnosti kot `animation-duration`, `animation-timing-function`). Animacija usklajeno spreminja vsaj dva dela logotipa.

### OCENA 5 (ODLIČNO)
*   *(Vsi pogoji iz ocene 4)*
*   **Logotip:** Izrazito kreativen, unikaten in tehnično dovršen logotip.
*   **Animacija:** Kompleksna `@keyframes` animacija (vsaj 4+ koraki), ki animira več CSS lastnosti hkrati, je tekoča in pripoveduje "zgodbo" logotipa.
    *   **Kreativna nadgradnja animacije:** Izbira ene od možnosti:
        *   Animacija se odziva na interakcijo na ne-trivialen način (npr. drugačna animacija ob kliku).
        *   Uporaba `animation-delay` za zaporedno animiranje delov.
        *   Ustvarjanje iluzije globine ali kompleksnega gibanja.
*   **Koda:** Izjemno čista, strukturirana in učinkovita koda. Premišljena uporaba CSS lastnosti za optimalno delovanje animacij.

---

## TEHNIČNE ZAHTEVE
-   **Jezika:** HTML5, CSS3.
-   **Oddaja:** ZIP datoteka (`index.html`, `style.css`, opcijsko `README.md`).
-   **Delovanje:** V zadnjih različicah brskalnikov Chrome ali Firefox.

## NASVETI
-   Začni preprosto (statičen logotip, nato animacije).
-   Uporabi `transition` za enostavne spremembe, `@keyframes` za kompleksnejše.
-   Pazi na `transform-origin` in časovne funkcije.
-   Subtilnost je pogosto boljša od pretiravanja.

## ROK ODDAJE
**14.6.2025** 

---
*Opomba: Za dosego višje ocene morajo biti izpolnjeni vsi pogoji nižjih ocen.*

---

Primeri prof. Kozmusa:

Gumbi: 

 

Vaja 1: https://jsfiddle.net/5hsgbkjt/ 

Vaja 2: https://jsfiddle.net/r5tudjo7/ 

Vaja 3: https://jsfiddle.net/3rkgvzsc/ 

Vaja 4: https://jsfiddle.net/3hb8td0g/ 

Vaja 5: https://jsfiddle.net/eh49z5s3/ 

Vaja 6: https://jsfiddle.net/bpL8h095/ 

Vaja 7: https://jsfiddle.net/L5rqs37h/ 

 

Meni: 

 

Vaja 1: https://jsfiddle.net/8sh3y4fx/ 

Vaja 1a: https://jsfiddle.net/tga6v1eu/ 

Vaja 2: https://jsfiddle.net/x3v0wjkq/ 

Vaja 3: https://jsfiddle.net/nzhpLkwj/ 

Vaja 4: https://jsfiddle.net/tzrdgqvc/ 

Vaja 5: https://jsfiddle.net/9yvc82ok/ 

Vaja 6: https://jsfiddle.net/e5oz7n1r/ 

Vaja 7: https://jsfiddle.net/pdyc7shu/ 

Vaja 8: https://jsfiddle.net/vcak894q/ 

 

Grafika: (slika v kodi v URLju) 

 

Vaja 1:  https://jsfiddle.net/hupson9c/1/  

Vaja 2: https://jsfiddle.net/krav8bdq/1/  