KOMPOOS.NL

schaduw - CSS

home » css » shadow.html

sitemap


voorbeeld schaduw

Dit voorbeeld laat niets aan de verbeelding over. Een div met een schaduw daar omheen...
 

uitleg schaduw procedure

Dit is één van de makkelijkste schaduw-procedures die op de kompoos.nl staat. Je hebt eigenlijk alleen maar de vijf regels van de class ".shadow" nodig om de schaduw te vervaardigen. De "#schaduw-div" is nodig om iets te maken waar de class aan "geknoopt" kan worden. Ook in oude IE-browsers doet deze "schaduw-code" zijn werk. De stylesheet behoort in de head-sectie van jouw pagina thuis, en de html-code moet je in de body-sectie plaatsen.

stylesheet schaduw procedure


<style type="text/css">
        #schaduw-div{
                padding-left:10px;
                display:inline-block;
                width:300px;
                background:#efe;
                color:inherit}
        .schaduw{
                -moz-box-shadow:3px 3px 4px #111;
                -webkit-box-shadow:3px 3px 4px #111;
                box-shadow:3px 3px 4px #111;
                -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color=#111111)";
                filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#111111')}
</style>

html code voor deze schaduw procedure


<div id="schaduw-div" class="schaduw">
        <h4>voorbeeld schaduw</h4>
        <p>
                Dit voorbeeld laat niets aan de verbeelding over. 
                Een div met een schaduw daar omheen...<br /> 
        </p>
</div>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.