Opdracht: Transities

HTML: Hovers en Transities Hovers Maak een nieuwe pagina aan op jouw site en verbind via het menu met de andere pagina’s op de site. Maak een paragraaf aan op de nieuwe pagina en vul die met een kort stukje tekst over een land waar je graag naar toe zou willen gaan op vakantie (of al bent geweest). Zet daarna de CSS zo dat als je met de muis over het stukje heengaat de tekst groter wordt. Voeg daarna een ongeordende lijst toe met 3 linkjes naar informatie over het land wat je gekozen hebt. Als je met je muis op een van de linkjes gaat staan, moet de kleur van de link veranderen. Ook moet de link een monospace lettertype krijgen. Voeg ten slotte een 4 bij 3 of 3 bij 4 tabel toe op de pagina. Zet in de tabel de maanden van het jaar. Als je met de muis op een van de cellen van de tabel gaat staan, moet de achtergrondkleur veranderen. Ook moet de tekst in het vakje groter worden. Transities Alle hover effecten die we tot nu toe gebruikt hebben werken zodra je er met de muis op gaat staan of de muis weer weghaalt. Nu gaan we bij deze effecten ook transities toevoegen. Geef de paragraaf met de groter wordende tekst een transitie die 1 seconde duurt. Deze transitie moet zowel gaan werken als je met de muis erop gaat staan en als je de muis weer van de tekst afhaalt. De lijst met linkjes moet ook een transitie krijgen. Deze transitie moet 2 seconden duren en moet alleen werken als je op de tekst gaat staan met de muis. Dus als je de muis van de tekst afhaalt krijg de tekst meteen weer zijn oorspronkelijke kleur. St. Michaël College | Programmeren kun je leren! | 2014-2015 HTML: Hovers en Transities Geef ten slotte de tabel een transitie. Deze transitie moet eerst een halve seconde wachten en daarna in een halve seconde de kleur veranderen. De transitie moet zowel als je met de muis erop gaat staan of als je de muis weghaalt gebeuren. Meerdere transities Voeg nog een paragraaf toe en zet er een regel tekst neer. Voeg hier twee hover effecten aan toe: van kleur veranderen en van grootte veranderen. Voeg daarna twee transities toe. De eerste transitie wacht 1 seconde en verandert daarna in 2 seconden de kleur. Deze transitie moet zowel gebeuren als je met de muis erop gaat staan en als je de muis weghaalt. De tweede transitie verandert in anderhalve seconde de grootte van de tekst. Deze transitie moet alleen gebeuren als je met de muis op de tekst gaat staan, maar niet als je de muis weghaalt. St. Michaël College | Programmeren kun je leren! | 2014-2015

Download Report