Pseudo-classes gebruiken voor transitions

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.

In deze video maak je kennis met de css-eigenschap 'transitions'.

Deze worden meestal toegepast in combinatie met een pseudo-class.

Daarom besteed ik eerst nog weer even aandacht aan de zogeheten pseudo-classes.

In het hoofdstuk 'basiskennis-css' heb je al kennis gemaakt met het vormgeven met de zogeheten pseudo-classes.

Deze gebruik je veelvuldig om links mee te stijlen en vorm te geven.

Maar ze zijn ook perfect geschikt om overgangen mee te maken.

Omdat het nu niet specifiek gaat om het stijlen van links.

Maar juist van alle andere mogelijke html-elementen, zijn vooral de pseudo-classas 'hover' en 'active' interessant.

Voordat we ons gaan bezighouden met de css-eigenschap 'transition'.

Laat ik eerst zien hoe je gebruik maakt van de pseudo-classes.

En dan vooral ook in combinatie met de css-eigenschappen 'transform'.

Op de index.html die behoort bij deze video staat een div-element met een class="box".

En deze vind je ook terug als selector in je css-stijlblad

Bovenin de div staat een kop vormgegeven met het html-element h, en daaronder staat een paragraaf.

Binnen de paragraaf is ook een afbeelding opgenomen.

En deze staat linkslijnend vormgegeven in je css-stijlblad.

Ik schrijf voor het div-element met de class="box", .box

Een pseudo class en wel de :hover, dus dat betekent. Zodra de bezoeker met de muis over het object heen beweegt,

Dan worden vervolgens de css-regels van deze pseudo-class doorgevoerd.

En dan kies ik voor de transformeer opdracht 'transform:scale'.

En tussen de haakjes plaats ik dan vervolgens het getal wat ik wil schalen, staat voor %.

Dus . staat dan voor % vergroten.

Dat zou betekenen dat als ik nu met de muis over de box heen beweeg.

Direct de transformeer opdracht wordt uitgevoerd.

Natuurlijk kun je niet alleen maar transformeer opdrachten geven, maar in principe

elk soort stijl regel gaan schrijven die je voor de verandering wilt doorvoeren.

De stijl, ik wil als background-color een donkere kleur hebben.

Kan ik hier bijvoorbeeld een donkere grijs voor uitkiezen en als ik bijvoorbeeld de teksten dan wit wil maken.

Dan zet ik deze op de waarde voor wit, #FFF.

Als ik nu met mijn muis hier overheen beweeg, dan wordt hij niet alleen groter.

Maar ook de achtergrond en de tekstkleur veranderen.

Wat je wel ziet is dat de vergroting vanuit het midden wordt toegepast.

Standaard worden namelijk transformeer opdrachten vanuit het midden uitgevoerd.

Maar deze kun je met de opdracht 'transform:origin' zelf weer positioneren.

Default staat deze dus op %, %.

En ik wil deze nu naar het midden verplaatsen horizontaal.

Maar wel aan de bovenkant en daarvoor zet ik voor de verticale waarde 'top'.

Als het goed is dan wordt deze nu vanuit het midden vergroot. Maar er verdwijnt geen tekst.

Want de vergroting vindt plaats vanaf de bovenkant van het element.

Ik heb nu voor de div een 'hover' gemaakt.

Maar binnen de div staan ook een aantal child-elementen, waaronder bijvoorbeeld de afbeelding.

Deze kan ik ook nog een 'hover' meegeven, 'img:hover'.

En dan kies ik ook nu voor een transform opdracht, maar wel 'rotate'.

En dan plaats ik tussen de haakjes het aantal graden dat ik wil roteren.

En ik kies voor 'deg' en dat schrijf je dus op deze manier en dat is de afkorting voor de Engelse 'graden'.

Beweeg ik met mijn muis over de div, dan wordt voor de gehele div, inclusief alle kind-elementen,

De vergroting van . doorgevoerd.

Maar zodra ik nu ook de afbeelding raak.

Dan wordt de pseudo-class voor dit ene kind-element doorgevoerd en dat is de rotatie.

Je kunt dus zowel voor de parent als voor de kinderen ander pseudo-classes schrijven.

Je kunt dus zowel voor de parent als voor de kinderen ander pseudo-classes schrijven.