Cheetsheet gebruiken

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.

Als je net begint de mogelijkheden en toepassingen te ontdekken van css animations.

kun je jezelf natuurlijk ook laten inspireren door wat anderen al bedacht en gemaakt hebben.

Je kunt hier heel veel van leren.

En natuurlijk kun je altijd je eigen variaties en aanpassingen erop maken.

Zo kun je bijvoorbeeld op zoek gaan naar animation Cheetsheets. Of animation-generators.

Online is er veel te vinden op het gebied van voorbeeld code.

natuurlijk moet je wel weten hoe je de code in je eigen document kunt toepassen.

En vaak moet je je dan wel aan bepaalde regels houden. Anders werkt het niet.

In deze video behandel ik hoe je online cheetsheets kunt downloaden en kunt toepassen.

En hoe je gebruik kunt maken van een online-generator.

Waarmee je makkelijk en snel best gecompliceerde animaties kunt maken.

Allereerst de cheetsheet.

Een leuke hiervan vind je bijvoorbeeld op de pagina waar je nu naar kijkt.

Het webadres is justinaguilar.com/animations.

Op deze pagina kun je eerst een voorbeeld vragen

van alle verschillende animaties die hij in zijn cheetsheet heeft beschreven.

Als je gebruik wilt maken van één of meerdere van zijn animaties.

Dan klik je eenmaal bovenin het venster op het menu 'download'.

Vervolgens kun je op de 'download-knop' klikken.

En dan verschijnt in een nieuw venster het css-stijlblad, met daarin alle animaties beschreven.

Als ik er bijvoorbeeld maar één animatie wil kopiëren.

Dan moet ik wel zorgen dat ik alle bijbehorende prefixes ook kopieer.

Dus als ik bovenin kijk, dan zie ik daar de aniamtie 'slideDown'.

En de eerste css-regel voor de class .slideDown.

Dat is een voorbeeld hoe je deze animatie verbindt aan een class.

Daar onder staat de animatie beschreven met de @keyframes.

Allereerst de @keyframes slideDown, dit is de officiële css schrijfwijze.

En daar onder een prefix voor webkit.

En op dit moment werken de belangrijke browsers met de prefix -webkit-.

Chrome, Safari, Firefox en Opera.

Dus als ik deze animatie zou willen gaan gebruiken in mijn document.

Dan kopieer ik de animatie en de prefix-animatie.

Maar ook de voorbeeld css-stijl hoe ik deze vervolgens kan verbinden aan een html-element.

Ik kopieer deze code met mijn toetsenbord. Commando of Control C. En ga naar mijn document.

Op de index.html die behoort bij deze video, staat een omsluitende container.

pixels breed, gecentreerd. Met een klein lijntje erom heen.

Bovenin deze container staat een div met de id="object".

In deze div staat een afbeelding geplaatst.

De afbeelding 'cake.png' en die vind je terug in de local root folder 'img'.

Onder de div, in de container, bevindt zich een kopje, een h.

En er staat een lijst met daarin de namen van de animaties van de website.

Waar we zojuist de slideDown van hebben gekopieerd.

Bekijk ik een voorbeeld van deze pagina in een browser.

Dan zie je bovenin de afbeelding, daaronder de h. En de lijst met animaties.

Ik plak in mijn css-stijlblad, met Commando of Control V, de animatie die ik zojuist heb gekopieerd.

Dan zoek ik naar de voorbeeld code waarop je deze animatie kunt toepassen aan een html-element.

Die wordt hier aangegeven met .slideDown.

Als ik deze animatie zou willen toepassen, bijvoorbeeld op de afbeelding.

Dan kan ik de css-regels hier uit weg knippen.

In principe heb ik deze css-class niet meer nodig.

Want deze heb ik namelijk ook niet in mijn document.

En ik wil hem gaan toepassen op de afbeelding.

De afbeelding staat als achtergrondafbeelding van de div met de id="object".

Dus ik plak vervolgens hier de css-eigenschappen voor het activeren van de animation.

De animation-name waarmee ik aangeef om welke animatie het gaat.

Dat is de 'slideDown'.

De animation-duration en de animation-timing-function 'ease'..

Je kunt natuurlijk deze eigenschappen, zoals animation-duration en de timing-function.

Zelf nog aanpassen als je dat wilt. En dan wordt deze animatie nu toegepast op de afbeelding.