Vormgeven met CSS3

Cursusduur

03:05:49

Niveau

Gevorderd

deel deze cursus:

Vormgeven met CSS3
49

Leer het uiterlijk van je website vormgeven en aanpassen met behulp van CSS3.

Webdesigner
175

Leer websites bouwen met behulp van HTML, CSS, en Joomla of Wordpress!

Cursusprogramma

  • Introductie CSS3
    • 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
  • 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 – 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 – 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
    • 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