CSS

  CSS (engl. Cascading Style Sheets) je skup pravila koja govore web pregledniku kako prikazati određenu HTML oznaku. Prvenstveno je napravljen kako bi se odvojio dizajn web stranice od sadržaja dokumenta. CSS3 je najnovija verzija CSS-a.


  Korištenjem CSS atributa HTML elementi mogu biti pomaknuti unutar web stranice, te se može utjecati na njihovu visinu, širinu, boju i mnoštvo drugih efekata. Novost u CSS3-u je atribut transform pomoću kojeg se elementi mogu skalirati, pomicati bez uporabe pozicioniranja te rotirati. Do uvođenja CSS3-a animacije su bile moguće korištenjem JavaScript-a, a sada su animacije moguće i kada je JavaScript onemogućen.


  Glavni nedostatak vizualnih efekata u CSS3-u je što u različitim web-preglednicima treba iskoristiti prefikse, ovisno o tome koji atribut se upotrebljava pa je istu liniju koda potrebno upisati više puta.
  CSS3 možemo podijeliti u module:

  • selektore
  • kutije (engl. box models)
  • pozadina i granice
  • tekstualni efekti
  • 2D/3D transformacije
  • animacije
  • izgled s višestrukim stupcima
  • korisničko sučelje

CSS Transformacije


 Transformacija je efekt koji utječe na element tako da mijenja njegov oblik, veličinu ili poziciju. CSS3 transformacije omogućuju pomicanje, skaliranje, okretanje i rastezanje elemenata.

  CSS vizualni model opisuje koordinatni sustav u kojem je svaki element pozicioniran. Pozicije i veličine elemenata u ovom kooridnatnom sustavu izražavaju se u pikselima počevši od gornjeg lijevog kuta. Koordinarni sustav se može modificirati pomoću svojstva transform. Atribut transform podržan je u Operi, Mozilli, Internet Exploreru (prefiks -ms-), te Google Chrome-u i Safari-ju uz prefiks -webkit-.


  Dodatna svojstva čine transformacije jednostavnijima i dopuštaju autoru da kontrolira interakciju ugniježđenih 3D transformacija:


  • Transform-origin omogućuje pogodan način za kontroliranje koja je transformacija upotrebljena na kojem elementu.
  • Svojstvo perspective omogućuje autoru da elementu napravi posebne elemente (djecu) 3D transformacijama tako da oni i dalje čine isti 3D prostor. Svojstvo perspective-origin omogućuje odrediti na koju je perspektivu to svojstvo upotrebljeno ne imajući utjecaj na ostale elemente.
  • Transform-style omogućuje stvaranje hijerarhije 3D objekata na kojima su primijenjene 3D transformacije.
  • Backface-visibility je svojstvo koje dolazi do izražaja kada se objekt okreće preko trodimenzionalnih transformacija i utječe na to da je zadnja strana vidljiva gledatelju. Vrlo često je poželjno sakriti zadnju stranu što se postiže atributom hidden.


2D transformacije

  2D transformacije preko atributa transform omogućuju skaliranje, rotiranje i translaciju elemenata. Jednom elementu moguće je pridružiti više transformacija. Sve promjene rade se uporabom matrice homogenog 2D prostora koja je sljedećeg oblika:


  Funkcije koje omogućuju 2D transformacije:


  • matrix(a, b, c, d, e, f)
  • translate(tx [, ty])
  • translateX(tx), translateY(ty)
  • scale( sx [, sy])
  • scaleX( sx), scaleY(sy)
  • rotate(α)
  • skew(α [, β])
  • skewX(α), skewY(α)


3D transformacije

  Uporabom atributa transform stvara se lokalni koordinatni sustav za element na kojem je primjenjena transformacija. Preslikavanje mjesta u koordinatnom sustavu od kuda će element biti prikazan u lokalni koordinatni sustav određuje transformacijska matrica koju zovemo matrica transformacije pogleda. Transformacije su kumulativne, što znači da element ostvaruje svoj koordinatni sustav unutar koordinatnog sustava roditelja. Koordinatni sustav se sastoji od 2 osi: X koja se povećava vodoravno u desno i Y koja se povećava okomito prema dolje. 3D transformacijske funkcije proširuju koordinatni sustav u 3 dimenzije, dodavši Z os koja je okomita na ravninu ekrana i raste prema gledatelju.


  Pozicija svakog elementa u 3D prostoru određena je zbirnom transformacijskom matricom u tom 3D prostoru kroz element koji ostvaruje 3D kontekst prikaza i sve elemente koji su dio tog konteksta.

  Element ostvaruje i postaje dio 3D konteksta prikaza na sljedeći način:

  • 3D kontekst prikaza ostvaruje transformacijski element čija vrijednost atributa transform-style je preserve-3d i koji sam po sebi nije dio 3D konteksta prikaza, ali sudjeluje u tom kontekstu.
  • Element čija vrijednost atributa transform-style iznosi preserve-3d i koji je dio tog konteksta, proširuje postojeći 3D kontekst prikaza.
  • Element sudjeluje u 3D kontekstu prikaza ukoliko blok koji ga sadrži ili ostvaruje ili proširuje 3D kontekst prikaza.
  • Konačna vrijednost transformacije koja se koristi za prikaz 3D konteksta računa pomoć zbirne 3D transformacijske matrice


 Funkcije koje omogućuju 3d transformacije:


  • matrix(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)
  • translate3D( tx, ty, tz)
  • translateZ(tz)
  • scale3d(sx, sy, sz)
  • scaleZ(sz)
  • rotate3d( x, y, z, α)
  • rotateX(α) = rotate3d(1, 0, 0, α)
  • rotateY(α) = rotate3d(0, 1, 0, α)
  • rotateZ(α) = rotate3d(0, 0, 1, α) = rotate(α)
  • perspective(d)
  • translateX(tx), translateY(ty), scaleX(sx), scaleY(sy)

CSS Tranzicije


  Jedan od mogućih načina ostvarivanja animacija u CSS-u je pomoću tranzicija. Ova mogućnost je uvedena u CSS3 i njome možemo dodati efekte da se promjena odvija postupno jednog stila u drugi u određenom periodu. Internet Explorer, Firefox, Chrome i Opera podržavaju transition atribut. U Safari-ju je ispred transition potrebno navesti prefiks -webkit-.


  • transition-property
    Određuje na koje CSS svojstvo će se prijelaz primijeniti. Inicijalna vrijednost je all. Uz CSS svojstva moguće je navesti i sljedeće vrijednosti : none, inherit .
  • transition-duration
    Određuje trajanje prijelaza. Podrazumijevana vrijednost je 0s.
  • transition-delay
    Određuje vremenski odmak početka tranzicije.
  • transition-timing-function
    Svojstvo koje opisuje kako će se vrijednosti izmjenjivati. Ono dopušta da se brzina mijenja tijekom trajanja prijelaza. Tranzicijske funkcije su definirane step-funkcijom ili na kubnom Bezierovom krivuljom.


    •   Ovo su definicije vremenskih funkcija(engl. timing functions):


      • ease ≡ cubic-bezier(0.25, 0.1, 0.25, 1)
      • linear ≡ cubic-bezier(0, 0, 1, 1)
      • ease-in ≡ cubic-bezier(0.42, 0, 1, 1)
      • ease-out ≡ cubic-bezier(0, 0, 0.58, 1)
      • ease-in-out ≡ cubic-bezier(0.42, 0, 0.58, 1)
      • step-start ≡ steps(1, start)
      • step-end ≡ steps(1, end)
      • steps(x [, [ start | end ] ])
      • cubic-bezier(x, y, z, w)

      Prođi mišem preko pravokutnika


      EASE

      EASE-IN

      EASE-OUT

      LINEAR

      EASE-IN-OUT

      (1.0, -0.5, 0.5, 1)


CSS Animacije

  S pojavom CSS3-a možemo stvarati animacije koje mogu zamijeniti animirane slike, Flash ili JavaScript animacije na web stranicama. Animacija se sastoji od 2 komponente: stila koji opisuje CSS animaciju i niza okvira (engl. keyframes) koji određuju početno i konačno stanje animacije, te međustanja.


  Da bi se stvorio slijed CSS animacija elementu se pridružuje svojstvo animation i/ili njegova podsvojstva. Time se podešava trajanje i vremenski trenutak primjene dijela animacije. Animacija se primjenjuje na element koji za vrijednost atibuta animation-name svojstvo koje referencira važeće @keyframes pravilo. Animacija završava primjenom kombinacije svojstva animation-duration, animation-iteration-count i animation-fill-mode.


  Podsvojstva atributa animation koja se mogu koristiti su:


  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation-fill-mode


  @keyframes pravilo sastoji se od ključne riječi @keyframes, identifikatora pravila koji daje ime animaciji i niza pravila u vitičastim zagradama koji definiraju animaciju. Svaki ključni okvir određuje se animirani element treba prikazati tijekom trajanja animacije. Ključni okviri koriste postotak kako bi odredili vrijeme kada se određeni dio animacije prikazuje. Zbog njihove važnosti 0% i 100% imaju svoje aliase: from i to. Sve vrijednosti za ključne okvire moraju biti sortirane rastući po iznosu postotka, a ukoliko se neka preklapaju upotrijebiti će se ono koje je zadnje navedeno.