Vormgeven met CSS
Vormgeven van webpagina’s met css
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
CSS is opgesplitst in aparte Levels en Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:
- Backgrounds & Borders
- Text Effects
- 2D/3D Transformations
- Animations
Doelgroep van deze cursus
Webdesigners, webdevelopers en website bouwers die webpagina’s willen leren vormgeven met de mogelijkheden van CSS.
Wat ga je leren
Natuurlijk wordt er in deze cursus uitgebreid aandacht besteed aan alle leuke en fancy mogelijkheden van CSS, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.
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.
Ga naar Vormgeven met CSSIn de cursus worden de volgende onderdelen behandeld:
Has Sub:
- 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