Stapeltje papier met CSS
Stapeltje Papier
Hiernaast zie je een plaatje van een stapeltje papier. Toch is dit geen plaatje, het is helemaal gemaakt met CSS.
Op deze pagina wordt uitgelegd hoe je dat doet. De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- Het maken van het stapeltje papier
- Het plaatsen van het figuurtje in je webdocument
- Het stapeltje papier
- Het stapeltje papier is een eenvoudige <div>-tag met de class stapeltje. In het voorbeeld op deze pagina is de width 70px en is de height 100px.
- De achtergrond van de <div> is wit.
- Het 'stapel-effect' wordt gemaakt met de CSS-eigenschap box-shadow. Om het ook goed te laten werken op de iPad
en de iPhone is de vendor-prefix
-webkitnoodzakelijk. - De 'stapel' wordt zichtbaar gemaakt door afwisselend lichtgrijze en donkergrijze schaduwen toe te voegen: Eerst een schaduw van 4px breed, lichtgrijs. Daarna een schaduw van 5px breed, donkergrijs. Deze steekt nu 1px buiten de lichtgrijze schaduw uit.
- Vervolgens zijn er schaduwen van 9px en 10 px breed.
- Tenslotte is er een schaduw van 14 px breed.
- Voor de breedte van de verloop-rand (blur) is 0 genomen. Dan krijg je de slagschaduwen (lees; scherpe randen) die
hier nodig zijn.
- Plaatsen in je webdocument
- Om de plaats van het figuurtje in je webdocument te kunnen bepalen, is een aparte class plaats gemaakt en aan de <div>-tag toegevoegd.
- De class plaats heeft twee css-eigenschappen: float:right en margin:0 10px 0 20px. Voor de toepassing op deze pagina is dat voldoende. Voor je eigen toepassing kun je dit aanpassen naar je eigen smaak en behoefte.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.stapeltje {
border:1px solid #888; background-color:#fff;
-webkit-box-shadow:
4px 4px 0 #ddd,
5px 5px 0 #888,
9px 9px 0 #ddd,
10px 10px 0 #888,
14px 14px 0 #ddd;
box-shadow:
4px 4px 0 #ddd,
5px 5px 0 #888,
9px 9px 0 #ddd,
10px 10px 0 #888,
14px 14px 0 #ddd;
width:70px; height:100px;
padding:10px
}
.plaats {
float:right; margin:0 10px 0 20px;
}
</style>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
<div class="stapeltje plaats">Stapeltje Papier</div>
Downloaden:
Druk op de knop:
File: voorb395.zip, 446 bytes.
