De voorbeelden hieronder kunnen niet weergegeven worden door Mozilla Firefox. De Internet Explorer kan er wel mee overweg.
CSS box met schaduw - deel 2
In de vorige les hebben we het gehad over het box-model. Ik ga weer voorbeelden geven van boxes (in dit geval tekstvakken), maar nu met schaduw.
De codes hieronder kun je selecteren (Ctrl-A), kopiëren (Ctrl-C) en plakken (Ctrl-V) in je webpagina.
* * *
1. Eerst de code voor een gewoon tekstvak zonder schaduw:
Zo ziet het eruit:
Dit is een tekstvak zonder schaduw. De padding is 10 px. Padding is de ruimte tussen de rand van het tekstvak en de tekst. Het tekstvak zelf is 350 px breed.
2. De code voor hetzelfde tekstvak als hierboven maar nu met een grijze schaduw:
Zo ziet het eruit:
Dit is een tekstvak met grijze schaduw. De padding is 10 px. Padding is de ruimte tussen de rand van het tekstvak en de tekst. Het tekstvak zelf is 350 px breed.
3. De code voor hetzelfde tekstvak maar nu met een blauwe schaduw:
Zo ziet het eruit:
Dit is een tekstvak met blauwe schaduw. De padding is 10 px. Padding is de ruimte tussen de rand van het tekstvak en de tekst. Het tekstvak zelf is 350 px breed.
4. De code voor een box zonder randen en met grijze schaduw:
Zo ziet het eruit:
* * *
Een schaduw om een tekstvak kan ook anders gemaakt worden. Het handigst is als je onderstaande code in een intern stylesheet vermeldt.
Tekstvak met grijze rand en schaduw
Zie ook mijn vorige tutorial over CSS tekstvakken en mijn tutorial Borders/Randen maken met een CSS-code.
Voor info over vervormde schaduw zie mijn les Perspectief-schaduw.
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal