CSS3 – Bouncing-effect met position & cubic-bezier

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Ik heb dus nu voor het verplaatsen van het element, de eigenschap 'transform' gebruikt.

Maar je had hiervoor dus ook de positioning-eigenschap willen gebruiken, die wil ik ook nog laten zien.

Dan verwijder ik de 'transform' met 'translate' regel.

Zowel voor de box als bij de :hover, de pseudo=class.

In principe kan ik nu in eerste instantie deze transition laten staan.

En ik ga nu vervolgens opnieuw positioneren, maar dan op een andere manier.

Als ik dit bewaar en ik bekijk het voorbeeld. Dan staat dit element gewoon weer keurig in de linker bovenhoek.

Dus het eerste wat ik wil gaan doen. Is dat deze pixels naar boven uit beeld verdwijnt.

Voor het prositioneren gebruik je bijvoorbeeld de css-eigenschappen top, bottom, left of right.

Dus ik zou bijvoorbeeld de top kunnen zetten op - pixels.

Alleen op dit moment zal dit niet resulteren in het gewenste resultaat.

En dat heeft ermee te maken dat ik eerst zijn positie moet bekend maken.

Daarvoor gebruik ik de css-eigenschap 'position'.

Dan kun je kiezen uit static, relative en absolute.

Meestal maak je gebruik van 'relative' of 'absolute'. En het grote verschil tussen die twee.

Is dat bij 'ralative' de eigen ruimte van het element, dus deze oorspronkelijke ruimte die hij nu inneemt.

Niet vrij gegeven wordt voor andere elementen, dus er kan niet iets onder dit element komen te staan.

Als ik position 'absolute' zou kiezen dan wordt altijd de linker bovenhoek van mijn viewport aangehouden.

Maar ook de originele ruimte die het element innam.

Wordt opgegeven, dat betekent dus dat het element gaat zweven.

En kunnen dus andere pagina elementen er onder verdwijnen.

Dus meestal gebruik je de 'position:relative'.

Zodra zijn eigen positie bekend is. Dan pas worden de positionerings-eigenschappen,

die ik bijvoorbeeld bij 'top' heb gegeven, ook daadwerkelijk gebruikt.

Dan is het vrij eenvoudig om ook voor de pseudo-class, de :hover.

De 'top' op een andere positie te plaatsen.

En als ik dit nu

Als ik nu vervolgens kijk naar het eindresultaat

Dan wordt deze direct gewisseld vanwege die :hover.

En dat komt omdat ik weliswaar al een 'transition' heb gemaakt.

Maar in deze 'transition' heb ik nog de eigenschap 'transform' als animatie-eigenschap staan.

En het is dus nu geworden 'top'.

Als ik dit document bewaar en ik kijk nu naar het eindresultaat.

Dan wordt hij keurig netjes toegepast. Op deze manier van positioneren.

Nu kun je gewoon meerdere eigenschappen gaan animeren.

Dus naast dat ik nu de 'top' heb, wil ik bijvoorbeeld ook dat hij naar links geanimeerd wordt van positie.

Dan wil ik wel dat hij begint op .

Maar dan plaats ik vervolgens, bij de :hover, een waarde in dat hij links pixels opzij wordt verplaatst.

Dan wil ik deze ook mee laten nemen in mijn 'transition'.

Je kunt achtereen volgend, komma gescheiden, meerdere keren, aparte waarden invoeren.

Ik kopieer nu even deze eerste reeks waarden voor de eigenschap 'top'.

Plaats een komma en ik plak vervolgens een kopie hiervan. en ik vervang 'top' voor 'left'.

Dan kan ik in principe ook nog de waarden hiervoor anders instellen, maar dat doe ik niet.

Ik wil dat hij verder gewoon exact hetzelfde geanimeerd wordt.

Dus ik zeg nu, bewaar dit document. En als ik nu het resultaat bekijk.

Dan zal hij dus niet alleen naar beneden verschuiven, maar ook naar links verplaatst worden.

En dan kan ik bijvoorbeeld nog veel meer waarden invoeren die ik ook wil mee animeren.

Zoals bijvoorbeeld een background-kleur verandering. Die wil ik donkerder hebben.

Ik wil de teksten, dat is 'color', die wil ik bijvoorbeeld wit hebben.

Die wil ik meenemen in de animatie. Dan kan ik deze natuurlijk, komma gescheiden, achter 'transition' plaatsen.

Maar er is nog een methode. Dus in plaats dat ik deze, apart komma gescheiden, plaats.

Vervang ik de 'property' voor 'all'.

Dat betekent dat nu deze 'transition' wordt toegepast op alle eigenschappen, die gewijzigd moeten gaan worden.

En deze staan dus beschreven in mijn pseudo-class.

Dus als ik nu een voorbeeld ga bekijken in de browser.

Dan gaat deze niet alleen transformeren van 'top' en 'left'.

Maar ook de 'background-color' en de tekst-kleur veranderen mee.

Maar ook de 'background-color' en de tekst-kleur veranderen mee.