KOMPOOS.NL

gradiënt background - php

home » php » gradient-background.html

sitemap


uitleg php gradient achtergrond

Met deze php procedure maak je een hele "strakke" achtergrond, waarvan je de kleuren makkelijk in kan stellen. In de php-function gradient_background() stel je de begin- en eind-kleur in, en ook de hoogte van de gradient-achtergrond (staat nu op 192px).

De stylesheet, die hieronder staat bevat de code zoals die op deze pagina gebruikt is; maar je hebt in feite alleen maar de id "q" nodig voor de procedure zelf. Plaats de stylesheet in de head-sectie van de pagina. Voor de rest valt er eigenlijk niets te melden. Plaats de php-code in de body-sectie en "that's all".

stylesheet voor de php gradient achtergrond


<style type="text/css">
        .q{
                width:100%;
                padding:0 8px 0 4px;
                margin-left:-8px;
                line-height:0px;
                height:1px}
        h1{
                margin-top:-182px}
        .gradient-color,.gradient-color a{
                color:#fb0;background:inherit}
</style>

plaats onderstaande php-code op de plaats waar de gradiënt moet komen


<?php
        $gradient_verloop = gradient_background("002500","005500",192); 
        foreach($gradient_verloop as $gradient){ 
                echo '<div class="q" style="background:#'.$gradient.';"></div>';
        } 
?>  

plaats onderstaand php-script ergens op de pagina


<?php 
        function gradient_background($hex_begin, $hex_eindigt, $gradient_verloop_stappen){ 
                $gradient_begin_kleur['r']=hexdec(substr($hex_begin,0,2)); 
                $gradient_begin_kleur['g']=hexdec(substr($hex_begin,2,2)); 
                $gradient_begin_kleur['b']=hexdec(substr($hex_begin,4,2)); 
                $gradient_eind_kleur['r']=hexdec(substr($hex_eindigt,0,2)); 
                $gradient_eind_kleur['g']=hexdec(substr($hex_eindigt,2,2)); 
                $gradient_eind_kleur['b']=hexdec(substr($hex_eindigt,4,2)); 
                $gradient_stapjes['r']=($gradient_begin_kleur['r']-$gradient_eind_kleur['r'])/($gradient_verloop_stappen); 
                $gradient_stapjes['g']=($gradient_begin_kleur['g']-$gradient_eind_kleur['g'])/($gradient_verloop_stappen); 
                $gradient_stapjes['b']=($gradient_begin_kleur['b']-$gradient_eind_kleur['b'])/($gradient_verloop_stappen); 
                $gradient_resultaat=array(); 
                for($i=0;$i<= $gradient_verloop_stappen;$i++){ 
                        $rgb['r']=floor($gradient_begin_kleur['r']-($gradient_stapjes['r']*$i)); 
                        $rgb['g']=floor($gradient_begin_kleur['g']-($gradient_stapjes['g']*$i)); 
                        $rgb['b']=floor($gradient_begin_kleur['b']-($gradient_stapjes['b']*$i)); 
                        $hex_rgb['r']=sprintf('%02x',($rgb['r'])); 
                        $hex_rgb['g']=sprintf('%02x',($rgb['g'])); 
                        $hex_rgb['b']=sprintf('%02x',($rgb['b'])); 
                        $gradient_resultaat[]=implode(NULL,$hex_rgb);
                } 
                return $gradient_resultaat;
        } 
?>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.