Vormgeven met CSS3

Deze cursus biedt:

• 24-7 Toegang tot de online cursus Vormgeven met CSS (49 video’s)
• Downloadbaar bronmateriaal bij video’s
• Nederlandstalig onderwijs
• Certificaat na afronding

Vormgeven van webpagina’s met CSS
De structuur van een webpagina bepaal je met HTML5 maar het uiterlijk met CSS. Met CSS tover je kleur, schaduwen, hippe lettertypes en zelfs overgangen en animaties in beeld. Daarmee bepaal je de look en feel en dat er enorm veel mogelijk is met CSS dat word je in deze cursus wel duidelijk. CSS is opgesplitst in verschillende modules en per module wordt er gewerkt aan nieuwe functionaliteiten en mogelijkheden.

Blijf op de hoogte van de vernieuwingen
Er wordt continu doorgewerkt aan nieuwe mogelijkheden en toepassingen van CSS. Dus het is taak om jezelf hiervan op de hoogte te houden. Er zijn verschillende websites die je hiervoor kunt raadplegen. Een handige is bijvoorbeeld de CSS-referentielijst op www.w3schools.com. En als je dan zo’n nieuwe CSS-eigenschap wilt gaan toepassen is het aan te raden om eerst te controleren in hoeverre deze al ondersteund wordt door de browsers op de website www.caniuse.com.

Doel van de cursus
De cursus loodst je door de fantastische mogelijkheden en toepassingen van CSS-eigenschappen voor achtergronden, verlopen, teksteffecten, patronen, transformaties en animaties. Je leert in deze cursus wat CSS allemaal kan. Maar het is jouw eigen creativiteit die het echt bijzonder moet gaan maken in jouw webpublicaties.

Doelgroep van deze cursus
Webdesigners, webdevelopers en website bouwers die zich verder willen verdiepen in de fantastische mogelijkheden van CSS. Het is belangrijk dat je al kennis en ervaring hebt met HTML.

Lesmaterialen
De cursus bestaat uit video’s met downloadbaar oefenmateriaal. Al onze video’s zijn Nederlands gesproken en ondertiteld. Wij maken zoveel mogelijk gebruik van de Engelse Interface van de software maar we benoemen in onze uitleg ook de Nederlandse (vak)termen. Je dient zelf zorg te dragen voor de installatie van de benodigde software op je computer.

Vereiste voorkennis en vaardigheden
Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Inhoudsoverzicht van instructievideo’s
49 video’s | Totale videoduur is 03:05:19
Docent: Belinda Kampf

Introductie CSS3

• CSS3 en browserverschillen oplossen met prefix
• Algemene cursusinformatie

Borders

• CSS3 – Border-radius, hoekafronding
• CSS3 – Border-shadow, slagschaduw naar binnen of buiten
• CSS3 – Multiple Border-Shadow
• CSS3 – Border-image, randdecoratie
• CSS3 – Border-image maken in Adobe Illustrator
• CSS3 – Eigen patroon toepassen als Border-Image

CSS2 - Backgrounds

• CSS2 – Background-color, -image en -repeat
• CSS2 – Background-color, -image en -repeat
• CSS2 – Background-position
• CSS2 – Achtergrondafbeelding voor teksten

CSS3 - Backgrounds

• CSS3 – Background-size, formaat bepalen
• CSS3 – Background-size, cover & contain
• CSS3 – Background-attachment, fixed & scroll
• CSS3 – Background-origin, en background-clip
• CSS3 – Multiple backgrounds
• CSS3 – Shorthand notation voor achtergrondafbeelding
• CSS3 – Shorthand notation voor multipe backgrounds

CSS3 - Gradients

• CSS3 – Gradients, verlopen maken en toepassen
• CSS3 – Transparante verlopen maken
• CSS3 – Herhalend radiaal verloop maken
• CSS3 – Online Gradient Generator

Text Effects

• CSS3 – Text-shadow
• CSS3 – Text-shadow, online generator
• CSS3 – Wordwrap

2D Transformations

• CSS3 – 2D Transform - Rotate
• CSS3 – 2D Transform - Skew & Scale
• CSS3 – 2D Transform - Origin
• CSS3 – 2D Transform - Translate
• CSS3 – 2D Transform - Matrix

2D Transitions

• Pseudo-classes gebruiken voor transitions
• CSS3 – Transition-property & -duration
• CSS3 – Transition-timing-function & -delay
• CSS3 – Transition-timing-function:cubic-bezier
• CSS3 – Bouncing-effect met translate & cubic-bezier
• CSS3 – Bouncing-effect met position & cubic-bezier
• Collage animatie met transition en transform
• CSS3 – Transition prefixes en online generators

Animations

• Hoe werkt de 'animation'
• CSS3 – Animation toepassen met “from” en “to”
• CSS3 – Animation met 'position' & 'scale'
• CSS3 – Animation met 'cubic-bezier'
• CSS3 – Animation met 'iteration-count' & 'direction'
• CSS3 – Keyframe Animations, procenten 0%-100%
• Browserondersteuning van CSS Controleren op Can I Use
• CSS - Prefixes schrijven

Cheatsheets & Online Generators

• Cheatsheet gebruiken
• Extern animatie stijlblad maken, koppelen & toepassen
• Online animation-generators