Vormgeven met CSS
Deze cursus is ook te koop op
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 cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot te onderwerpen.
Ga naar Vormgeven met CSSIn de cursus worden de volgende onderdelen behandeld:
- 1 CSS3 en browserverschillen oplossen met prefix
- 2 CSS3 – Border-radius, hoekafronding
- 3 CSS3 – Border-shadow, slagschaduw naar binnen of buiten
- 4 CSS3 – Border-image, randdecoratie
- 5 CSS2 – Background-color, -image en -repeat
- 6 CSS3 – Background-size, formaat bepalen
- 7 CSS3 – Background-origin, en background-clip
- 8 CSS3 – Multiple backgrounds
- 9 CSS3 – Shorthand notation voor achtergrondafbeelding
- 10 CSS3 – Gradients, verlopen maken en toepassen
- 11 CSS3 – Text-shadow
- 12 CSS3 – 2D Transform – Rotate
- 13 CSS3 – 2D Transform – Matrix
- 14 Pseudo-classes gebruiken voor transitions
- 15 CSS3 – Transition-timing-function:cubic-bezier
- 16 Collage animatie met transition en transform
- 17 Hoe werkt de ‘animation’
- 18 CSS3 – Keyframe Animations, procenten 0%-100%
- 19 Browserondersteuning van CSS Controleren op Can I Use
- 20 Cheetsheet gebruiken
- 21 CSS3 – Multiple Border-Shadow
- 22 CSS3 – Border-image maken in Adobe Illustrator
- 23 CSS3 – Eigen patroon toepassen als Border-Image
- 24 CSS2 – Background-attachment
- 25 CSS2 – Background-position
- 26 CSS2 – Achtergrondafbeelding voor teksten
- 27 CSS3 – Background-size, cover & contain
- 28 CSS3 – Background-attachment, fixed & scroll
- 29 CSS3 – Shorthand notation voor multiple backgrounds
- 30 CSS3 – Transparante verlopen maken
- 31 CSS3 – Herhalend radiaal verloop maken
- 32 CSS3 – Online Gradient Generator
- 33 CSS3 – Text-shadow, online generator
- 34 CSS3 – Wordwrap
- 35 CSS3 – 2D Transform – Skew & Scale
- 36 CSS3 – 2D Transform – Origin
- 37 CSS3 – 2D Transform – Translate
- 38 CSS3 – Transition-property & -duration
- 39 CSS3 – Transition-timing-function & -delay
- 40 CSS3 – Bouncing-effect met translate & cubic-bezier
- 41 CSS3 – Bouncing-effect met position & cubic-bezier
- 42 CSS3 – Transition prefixes en online generators
- 43 CSS3 – Animation toepassen met “from” en “to”
- 44 CSS3 – Animation met ‘position’ & ‘scale’
- 45 CSS3 – Animation met ‘cubic-bezier’
- 46 CSS3 – Animation met ‘iteration-count’ & ‘direction’
- 47 CSS – Prefixes schrijven
- 48 Extern animatie stijlblad maken, koppelen & toepassen
- 49 Online animation-generators