Met transitions kun je onderdelen van een website laten veranderen.
Bekijk eerst deze voorbeelden
Transitions toepassen op menu-items – Oefening 1
In deze eerste oefening veranderen menu-items als de bezoeker er overheen hovert. Bij de tweede oefening verandert de opacity van een afbeelding.
HTML en CSS schrijven
Eerst maak je een nieuw html bestand met de volgende code:
Vervolgens maak je een CSS bestand en koppel je dit aan de html. Om het menu een beetje vorm te geven voeg je de volgende codes toe (aanpassen naar eigen smaak mag natuurlijk: graag zelfs!)
Als je dit in je browser bekijkt zie je als het goed is het volgende
Als de muis/cursor/aanwijzer over een menu-item gaat, wil ik dat het volgende verandert:
- Een soepele overgang van de achtergrondkleur van elk menu-item naar een andere kleur
- Het gelijkmatig vergroten tot 1,5 keer de huidige omvang, zodat het menu-item groter is dan de andere menu-onderdelen
CSS transitie in Dreamweaver toevoegen
Stap 1 – Open CSS Transitions paneel met behulp van Venster> CSS-overgangen
Stap 2 – Klik op de + om de Transition (overgang) te maken.
Stap 3 – Kies het onderdeel dat moet veranderen. In dit voorbeeld is dat de hyperlink. Dus kies ik <a> uit het menu.
Stap 4 – Omdat ik dezelfde overgang toe wil passen op alle hyperlinks, selecteer ik Gebruik dezelfde overgang voor alle eigenschappen. Daarna kies ik voor een Duration van 2 seconden. Je kunt ook een vertraging (Delay) instellen. In dit voorbeeld wil ik de overgang onmiddellijk laten beginnen, dus dit laat je leeg
Stap 5 – Nu moeten we de eigenschappen selecteren. In dit voorbeeld zullen we de achtergrond-kleur selecteren en veranderen.
Klik op + onder het veld Property of Eigenschap en selecteer achtergrond-kleur van het menu.
Om ook de Scale opties op te geven, klik je op + en selecteer Transform.
Klik op Create .
Als je nu je stylesheet bekijkt zie dat er een aantal regels is toegevoegd. Je kunt aanpassingen natuurlijk ook rechtstreeks in je css typen i.p.v. via de dreamweaver-interface.
Je kunt de overgang altijd wijzigen. Dubbelklik op een overgang die je wilt bewerken. Bijvoorbeeld, om Rotate te kiezen in plaats van Scale (voor de eigenschap Transform), dubbelklik je op Transform in het veld Eigenschap.
Opdracht
- Maak deze oefening en maak daarna tenminste 3 verschillende transitions.
- Laat je opdrachten aftekenen door je docent en lever ze op tijd, dat betekent voor het eind van de eerste les in via e-mail.
Opacity van afbeeldingen aanpassen – Oefening 2
Lees deze uitleg hoe je afmeting van een afbeelding kunt aanpassen:
http://www.webteacher.ws/2013/08/20/creating-transitions-in-dreamweaver-cc/
En bekijk vervolgens een voorbeeld waar de opacity aangepast wordt: lucbrouns.nl/voorbeeld/opacity/
De code bij dit voorbeeld kun je hier downloaden: voorbeeldcode opacity
Opdracht
Neem de eerste oefening erbij en plaats daarin 3 afbeeldingen. Zorg ervoor dat de opacity verandert als je er over de afbeelding hovert. Je moet dus de code van oefening 1 en voorbeeldcode opacity combineren.
Ook handig
Voor meer uitleg zie ook over het maken van transitions met dreamweaver zie ook https://helpx.adobe.com/dreamweaver/how-to/use-the-css-transitions-panel.html?set=dreamweaver–fundamentals–work-css
(En als je dacht dat je alles al wist over CCS3 dan moet je hier naar kijken: http://vimeo.com/31719130)