HTML5 en CSS3, de website krijgt vorm

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

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):

de ronde hoeken voor de blokken

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.

ย 
Vond je dit een interessant artikel?
Wil je op de hoogte gehouden worden als er weer een nieuw artikel verschijnt?
Meld je dan aan ยป

Deze bijdrage was gepubliceerd in Algemeen.

3 gedachten over “HTML5 en CSS3, de website krijgt vorm

  1. Pingback: CSS background-size cover

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *