Labo 11

Zorg dat je de volgende folder structuur volgt:

webtechnologie/
├─ labo-01/
│  ├─ oefening-01/
│  │  ├─ index.html
│  │  ├─ images/
│  │  │  ├─ image-1.jpg 
│  │  │  ├─ image-n.jpg 
│  │  ├─ css/
│  │  │  ├─ reset.css
│  │  │  ├─ style.css
│  ├─ oefening-02/
│  ├─ oefening-n/
├─ labo-02/
├─ labo-n/      

Voor elke oefening maak je een nieuwe lege pagina en link je een CSS bestand.

oefening 1

Bouw de onderstaande animatie na met CSS:

59KB

01-animation-resultaat.mp4

Resultaat oefening 1

oefening 2

Bouw de onderstaande animatie na met CSS:

147KB

02-animation-resultaat.mp4

Resultaat oefening 2

oefening 3

Bouw de onderstaande transitie na met CSS:

385KB

03-transition-resultaat.mp4

Resultaat oefening 3

oefening 4

Bouw de onderstaande transitie na met CSS:

263KB

04-transition-resultaat.mp4

Resultaat oefening 4

Voor de tegels voorzie je:

• afgeronde hoekjes van 8px

• Gebruik de ingebouwde box-shadow editor van je browser devtools om een soortgelijke box-shadow te genereren.

• Zorg dat je geen css dupliceert. Hergebruik css classes.

Tips

• Bekijk hier hoe je het emoji keyboard kunt openen op Windows.

• Bekijk hier hoe je de ingebouwde box-shadow generator van Google Chrome gebruikt.

oefening 5

Bouw de onderstaande webpagina na met HTML en CSS:

4MB

06-css-advanced-grote-oef-resultaat.mp4

Resultaat oefening 5

Gebruik voor de animatie de volgende afbeelding:

Circulaire tekst