Les 09: Ronde tabellen, film als achtergrond, schuifmenu, transparante DIVs en Google Fonts

1 LESDOELSTELLINGEN

In deze les leer je enkele nieuwigheden uit HTML 5 en CSS3.



2 HTML 5 / CSS3

Hou er rekening mee dat dit codes enkel werken in de recentere browsers.

 

2.1 Ronde tabellen

Klik hier voor een voorbeeld van een ronde tabel.

Klik hier voor een mogelijke manier om die ronde tabel te maken in HTML 5 code.

 

2.2 Film als achtergrond op een webpagina

Klik hier voor een voorbeeld van een site die een film als achtergrond gebruikt. Klik hier voor nog meer voorbeelden.

Op http://easyhtml5video.com/ kun je een softwarepakket downloaden die de code automatsch zal genereren om een filmpje te laten afspelen waarvan de gebruiker de grootte kan aanpassen

Klik hier om een handleiding te vinden. (Code moet nog worden getest.).

 

2.3 Schuifmenu in CSS

Klik hier om verschillende tutorials te vinden voor interessante menusystemen voor websites.

Klik hier voor een voorbeeld van een horizontaal schuifmenu.

 

2.4 Transparante DIV

Je kunt een DIV doorzichtig maken door opacity te gebruiken in CSS. Zie http://www.css3.info/preview/opacity/ voor een voorbeeld en de uitleg.

 

2.5 Google Fonts

Wil je een lettertype gebruiken, die de meeste gebruikers niet op hun computer hebben dan kan dat nu via Google Fonts. Klik hier voor de uitleg.


Last update 20.11.2014