home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het php-menu

Er staan veel procedures op de dns5 om een pagina een gradient achtergrond te geven. Dit is een hele makkelijke. Het enige wat je nodig hebt is een php-file die .png-file aanmaakt (met de gradient) en een paar regeltjes in de css van de pagina die je een gradient achtergrond wilt geven. Hieronder eerst het stukje CSS wat je in de head van de pagina moet plaatsen.

<style type="text/css">
	body{background:#020;
	background-image:url("doe.php?br=30&hg=200&r=0&g=0&b=122&re=0&ge=34&be=0");
	background-repeat:repeat-x;
</style>
		

Maak een nieuwe file aan met (in dit geval) de naam "doe.php" en plaats onderstaande code daarin.

<?php
if(isset($_GET['br'])){$br=$_GET['br'];}
if(isset($_GET['hg'])){$hg=$_GET['hg'];}
if(isset($_GET['r'])){$r=$_GET['r'];}
if(isset($_GET['g'])){$g=$_GET['g'];}
if(isset($_GET['b'])){$b=$_GET['b'];}
if(isset($_GET['re'])){$re=$_GET['re'];}
if(isset($_GET['ge'])){$ge=$_GET['ge'];}
if(isset($_GET['be'])){$be=$_GET['be'];}
gradient($br,$hg,$r,$g,$b,$re,$ge,$be);
function gradient($image_width, $image_height,$rood, $groen, $blauw, $erood, $egroen, $eblauw)
{
$image_width = (integer)$image_width;
$image_height = (integer)$image_height;
$rood = (integer)$rood;
$groen = (integer)$groen;
$blauw = (integer)$blauw;
$erood = (integer)$erood;
$egroen = (integer)$egroen;
$eblauw = (integer)$eblauw;
$vertical = (bool)$vertical;
$image  = imagecreatetruecolor($image_width, $image_height);
for($i=0; $i<$image_height; $i++)
{
$color_r = floor($i * ($erood-$rood) / $image_height)+$rood;
$color_g = floor($i * ($egroen-$groen) / $image_height)+$groen;
$color_b = floor($i * ($eblauw-$blauw) / $image_height)+$blauw;
$color = ImageColorAllocate($image, $color_r, $color_g, $color_b);
imageline($image, 0, $i, $image_width, $i, $color);
}
header('Content-type: image/png');
ImagePNG($image);
imagedestroy($image);
}
?>		
		

In de url van de background-image staan een paar variabelen.
De betekenis is als volgt:
br = de breedte van de image.
hg = de hoogte van de image.
r, g en b zijn de waarden (van 0-255) van de start-kleur.
re, ge en be zijn de waarden (van 0-255) van de eind-kleur.

Let er even op dat in de broncode (van deze pagina) van het (php)voorbeeld de "&" zijn geschreven als "&". Anders zou de validator een foutmelding op deze (uitleg)pagina geven. Gebruik dus de broncode die op de pagina staat en niet de broncode van de pagina zelf.
Voor de rest is er niets te melden of het zou moeten zijn dat de achtergrond-procedure de gradient foutloos op het scherm zet: alles valideert "volgens het boekje".

cache 25-01-2011