HTML5 en CSS3, de website krijgt vorm

door Kris Bergstra · 6 mei 2010

Dit artikel is bijgewerkt op 10 oktober 2018
Vandaag het vervolg op de serie artikelen ‘een website maken met HTML5 en CSS3’. De HTML code is af, nu wordt het zaak om de site een uitstraling te gaan geven. Zoals je natuurlijk kunt verwachten doen we dat niet meer met html-code, maar met CSS, met stylesheets.
CSS3 is het vervolg op CSS2.1 en bevat veel nieuwe onderdelen. Deze onderdelen zullen nog niet in iedere browser werken, maar de ondersteuning zal in de komende tijd fors verbeteren.

Het ontwerp

Voordat we kunnen gaan stylen eerst een ontwerp. Hierbij heb ik de schets uit het eerste artikel als uitgangspunt genomen. Het ontwerp gaat er als volgt uit zien:

Ontwerp van onze website in HTML5 en CSS3

Het ontwerp is vlot gemaakt, maar geeft grofweg een idee hoe de opzet van de pagina moet worden. Verschillende onderdelen zal ik er uit lichten om eventueel nader uit te leggen.

Herkenbare CSS

De eerste stap is waarschijnlijk herkenbare CSS. Dit wordt ook in CSS 2.1 gebruikt.

```
{
```
```
    margin: 0;
```
```
    padding: 0;
```
```
}
```
```
 
```

/* HTML5 onderdelen als blok element behandelen */

```
header, footer, aside, nav, article {
```
```
    display: block;
```
```
}
```
```
 
```
```
body {
```
```
    margin: 0 auto;
```
```
    width: 700px;
```

    font: 13px/18px Helvetica, Arial, sans-serif;

```
    background: #FFF;
```
```
}
```
```
 
```
```
h2 {
```
```
    font-size: 24px;
```
```
    line-height: 28px;
```
```
}
```
```
 
```
```
h3 {
```
```
    font-size: 18px;
```
```
    line-height: 22px;
```
```
}
```

In dit gedeelte zie je dat we de verschillende HTML5 onderdelen als block element laten behandelen. Op deze manier is het met terugwerkende kracht toch werkend te krijgen. Oudere browsers zullen dit namelijk wel oppikken.

Blokken met ronde hoeken

Nu gaan we aan de slag met het maken van de drie blokken met ronde hoeken. Eerst weer wat basisstijlen en floaten van de blokken.

```
#blokken {
```
```
	width: 700px;
```
```
	text-align: center;
```
```
	clear: both;
```
```
}
```
```
#bloknieuws, #blokvideo, #blokoverig {
```
```
	float: left;
```
```
	width: 180px;
```
```
	padding: 10px;
```
```
	margin: 10px 30px 10px 0;
```
```
	background-color: #b6ff57;
```
```
	text-align: left;
```
```
}
```

Ronde hoeken radius

Het resultaat is dat er drie blokken naast elkaar staan, waarmee verder nog niets bijzonders is gebeurd. Nu gaan we er natuurlijk wat CSS3 doorheen gooien om de afgeronde hoeken te krijgen. Dit gaat als volgt:

```
#bloknieuws, #blokvideo, #blokoverig {
```
```
	float: left;
```
```
	width: 180px;
```
```
	padding: 10px;
```
```
	margin: 10px 30px 10px 0;
```
```
	background-color: #b6ff57;
```
```
	text-align: left;
```
```
	border-top-left-radius: .5em;
```
```
	border-top-right-radius: .5em;
```
```
	border-bottom-left-radius: .5em;
```
```
	border-bottom-right-radius: .5em;
```
```
	-webkit-border-top-left-radius: .5em;
```
```
	-webkit-border-top-right-radius: .5em;
```

	-webkit-border-bottom-left-radius: .5em;

	-webkit-border-bottom-right-radius: .5em;

```
	-moz-border-radius-topleft: .5em;
```
```
	-moz-border-radius-topright: .5em;
```
```
	-moz-border-radius-bottomleft: .5em;
```
```
	-moz-border-radius-bottomright: .5em;
```
```
}
```

Onderaan zie je een hele lijst verschijnen. Dit is om meerdere browsers dit goed te laten doen. Voor de duidelijkheid heb ik het helemaal uitgeschreven. -webkit- geldt voor Safari en -moz- geldt voor Firefox. De eerste vier zijn de officiele CSS3 declaraties.

Schaduw

wat ook interessant is, is om de blokken een schaduw mee te geven. Dat kan met de volgende stijl:

```
-webkit-box-shadow: 2px 5px 3px #bbb;
```
```
 box-shadow: 2px 5px 3px #bbb;
```

Je ziet vier waardes. De eerste (2px) is de horizontale verschuiving, de tweede (3px) is de verticale verschuiving, de derde (5px) is de blur en de vierde is de kleur.

De titel

Tenslotte voor vandaag, het aanpassen van de titel. Ook hier kun je schaduw meegeven. Hier is de code:

```
h1 {
```
```
	font-size: 28px;
```
```
	line-height: 32px;
```
```
	color: #F90;
```
```
	text-shadow: 2px 2px 2px #cccccc;
```
```
}
```

Als je nu zou gaan kijken in een browser die CSS3 ondersteunt zie je het volgende (je kunt weer klikken voor de daadwerkelijke versie):

HTML5 website, tweede versie, nu met CSS

Dat was het voor vandaag. Ik denk dat je wel weer wat zaken bijgeleerd hebt. Ik hoop morgen te vervolgen met de CSS code. Dan om de eerste pagina af te maken en de andere twee pagina’s al wat vorm te geven.

Jord schreef:
7 mei 2010 om 08:16
Oh dit artikel helpt echt, goed werk en bedankt 😉
Beantwoorden
Edwin Noorlander schreef:
29 november 2010 om 13:15
Duidelijk, bedankt 😉
Beantwoorden

CSS background-size cover
3 september 2017
[…] Wil je meer lezen over de verschillende browsers, lees dan een eerder artikel hierover eens: HTML5 en CSS3. […]
Het 10-stappen Plan om een Website te Maken - meneer simmering
7 mei 2019
[…] en CSS deel 1 Een website maken met HTML en CSS deel 2 Een website maken met HTML en CSS deel 3 Een website maken met HTML en CSS deel 4 Een website maken met HTML en CSS deel […]

HTML5 en CSS3, de website krijgt vorm

Het ontwerp

Herkenbare CSS

Blokken met ronde hoeken

Ronde hoeken radius

Schaduw

De titel

4 reacties

Geef een reactie Reactie annuleren