CSS transitions

 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:

Schermafbeelding 1

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!)

Schermafbeelding 2

Als je dit in je browser bekijkt zie je als het goed is het volgende

Schermafbeelding 11.52.20

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

createtransition

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.

action

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

timing

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.

bgcolor

Om ook de Scale opties op te geven, klik je op + en selecteer Transform.

scae

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.

vendor

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)