Webbplatsen om Småland har nu utökats med en del visuella effekter, som togs upp i föreläsning 6 och laboration 6A.
HTML- och CSS-kod
Bland reglerna för navigeringen (i koden före media queries) har det lagts till två regler för #globnav a och #globnav a:hover. Dessa gör så att länkarna i den globala navigeringen förstoras, då man pekar på dem. Effekten tas sedan bort igen i media queryn för 900px, där navigeringen förändras.
I media queryn för 600px tillämpas metoden som användes för box 4 i exempel F6a-ex2. Det har lagts till ett div-element som omger ul-listan för den globala navigeringen. I CSS-koden har det lagts in regler, så att ul-listan skjuts in med hjälp av translateY.
Det har också gjorts tillägg, så att kartan förstoras, i regler för #map och #map:hover.
Slutligen lades det på en liten skojeffekt på header på startsidan. Då man pekar på den läggs det på ett färgfilter och en långsam övergång, så att det ser ut som att det blir skymning. Detta görs i reglerna för #frontPageHeader och #frontPageHeader:hover.
Se i övrigt kommentarer i CSS-koden.