Načrtovanje in razvoj spletnih aplikacij

24: Transformacije

Spoznali bomo
  • Kako s CSS na elementih izvedemo efekte
  • Kako s CSS na elementih izvedemo transformacijo
  • Kako s CSS na elementih izvedemo tranzicijo

Izdelaj spletno stran, ki jo prikazujeta spodnja slika in video. Poimenuj jo 24vaja-css-priimek-ime.html. Stran naj bo izdelana v HTML5 in s CSS. Pazi na pravilno uporabo oznak in obliko zapisa kode.

CSS kodo vstavi v glavo spletne strani v oznako style.

Za predlogo vzemi vajo 23: Senčenje iz poglavja CSS.

Oblikovne lastnosti
  • slike:
- transformacija: rotacija slik od -5 do 5 stopinj
  • povezava na sliki a:
- tranzicija: transformacija poteka 1 sekundo
  • povezava na sliki, ko je na njej kurzor a:
- transformacija: povečava v x in y smeri na 110 odstotkov

Opomba: S pomočjo spodnje slike in videa manjkajoče oblikovne lastnosti določite sami!


Slika spletne strani v brskalniku
Slika 24.vaje: Transformacije

Video spletne strani v brskalniku