Shaded 3d Icon Pack består af 36 PNG-filer med gennemsigtig baggrund. Hver fil har en "normal" -og en "hover"-tilstand. Jeg har modeleret Ikonerne i 3D i høj opløsning. Pakken indeholder desuden HTML og CSS kilde-kode.
Før musen over ikonerne for at se effekten
Nillervision 2014
Hvordan virker det?
Animationen af ikonerne består udelukkende af css-kode og understøttes af alle moderne browsere. Hvert ikon består af en billedfil, der er 200 pixels bred, med to billeder side om side. Billedfilerne bliver angivet som background-image property med på de forskellige elementer med css. De ønskede elemeter får angivet en bredte på 100px og viser derfor kun første del af billedet (da baggrundsbilleder pr. default vises fra venstre). For elementernes hover-tilstand sættes en background-position property til værdien "right" hvilket får billedet til at flytte sig så hover-delen af billedet bliver synlig i stedet.