CSS (engl. Cascading Style Sheets) je skup pravila koja govore web pregledniku kako prikazati određenu HTML oznaku a 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 razne druge efekata. Pogledajte nekoliko primjera na Animatable. S CSS3 pravilima možemo napraviti animacije koje zamjenjuju animirane slike, Flash animacije i Javascript. 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.
U ovom članku nećemo teoretizirati već ćemo predstaviti nekoliko zanimljivih primjena CSS3 pravila u izradi animiranih navigacijskih izbornika. Možda će Vas neki od njih inspirirati da sami izradite izbornik i iskoristite moć koju Vam pruža CSS3.
See the Pen Dribbble rebound “Personal Website” by Mark Campbell (@artsmc) on CodePen
Dribbble rebound “Personal Website”
Autor Mark Campbell
See the Pen Radial Menu Concept by Mike Busby by Joacim Nilsson (@joni) on CodePen
Radial Menu Concept by Mike Busby
Autor Joacim Nilsson
See the Pen A Little Menu Bar by Billy Crist (@billycrist) on CodePen
A Little Menu Bar
Autor Billy Crist
See the Pen Fluid menu with transparent icons by One div (@onediv) on CodePen
Fluid menu with transparent icons
Autor One div
[clear]
See the Pen Pure CSS “Spin-out” Menu by Billy Crist (@billycrist) on CodePen
Pure CSS “Spin-out” Menu
Autor Billy Crist
[clear]
See the Pen CSS3 Menu Animation by Rodrigue Lelotte (@AnnaTorv31) on CodePen
CSS3 Menu Animation
Autor Rodrigue Lelotte
[clear]
See the Pen Bounce Menu by Matt Hoiland (@matthoiland) on CodePen
Bounce Menu
Autor Matt Hoiland
[clear]
See the Pen CSS3 Responsive Navigation Menu by Jeremy Cloutier (@elemental-shift) on CodePen
CSS3 Responsive Navigation Menu
Autor Jeremy Cloutier
[clear]
See the Pen Circle Menu 2 by nschoenwald (@nschoenwald) on CodePen
Circle Menu 2
Autor nschoenwald
[clear]
Flip menu perspective
Autor José Barcelon-Godfrey
[clear]
Hexagon menu
Autor Marco Barría
[clear]
Windows menu
Autor Pashata
[clear]
Fly Menu
Autor Victor Knust
[clear]
Path Menu
Autor devilsbackyard
[clear]
Ring Menu
Autor Rishabh
[clear]
NAPOMENA
Internet Explorer 10, Firefox, i Opera podržavaju @keyframes pravilo i svojstvo “animation”.
Chrome i Safari zahtjevaju prefiks -webkit-.
Pozor: Internet Explorer 9 i ranije verzije ne podržavaju pravilo i “animation”.
