Hoe maak je een..Versiering met CSS
Gepubliceerd op 23 oktober 2006
Als je goed kijkt naar ontwerpen van websites zie je dat ze eigenlijk erg simpel zijn. Het zijn vaak details die de website aantrekkelijk maken. De mogelijkheden van CSS lijken simpel maar wanneer je ze verfijnd combineert is er geen betere manier om je website een stijlvol uiterlijk te geven.
Gerelateerde kennis
Opmaak (Hoe maak je een..)
Uitklapmenu (Hoe maak je een..)
Lay-out (Hoe maak je een..)
Standaard CSS: 'border'
In CSS zijn tal van soorten randen aanwezig. Het draait allemaal om de CSS code:
border: [breedte] [type] [kleur];
Onderstaand voorbeeld is een zwarte ('#000') gestreepte ('dashed') rand van 3 pixels breed ('3px'):
border: 3px dashed #000;
Alleen al fijne combinaties van randtypes met kleuren en achtergrondkleuren kunnen voldoende zijn om genoeg detail aan je lay-out te geven! Zie het voorbeeld hieronder.
Klik op de afbeelding om de broncode te downloaden
Geavanceerde effecten: ronde hoeken en schaduw
De rechte hoeken van de CSS blokken vinden veel mensen te saai. Vandaar dat ze op zoek zijn gegaan naar manieren om fijnere overgangen te maken.
Download hier de broncode van dit voorbeeld
[-
16 Kb
]
Links en meer informatie
Nog steeds zijn allerlei mensen aan het spelen met CSS! De mogelijkheden zijn nog lang niet uitgeput
Onion skinned drop shadows
Sliding Door Box: Rounded corners for all
CSS Play - Een erg leuke website met allerlei CSS experimenten
Mountaintop Corners
|
ThinkQuest Lounge