Tutorials
Layout: gradient achtergrond
Kleine tutorial/snippit hoe je een mooie gradient als achtergrond van je website kan krijgen die zich niet herhaalt bij scrollen.
Pagina 1
Introductie
Dit is mijn 1e tutorial dus het kan wat onduidelijk overkomen.
Deze tutorial legt uit met copy-paste voorbeelden uit hoe je een mooie gradient op de achtergrond kan krijgen van je website die zich niet herhaalt na ... pixels.
Deze tutorial legt uit met copy-paste voorbeelden uit hoe je een mooie gradient op de achtergrond kan krijgen van je website die zich niet herhaalt na ... pixels.
Pagina 2
De HTML pagina
Om te beginnen heb je natuurlijk een Pagina nodig
Dit copy-paste voorbeeld is geschreven in xHTML transitional 1.0.
Verder niks bijzonders.
Dit copy-paste voorbeeld is geschreven in xHTML transitional 1.0.
Verder niks bijzonders.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>paginatitel</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
hoi :)
</body>
</html>Pagina 3
De CSS
De CSS:
Deze CSS plaatst de background-image bovenaan in het midden van de pagina door 'background-position:top center'.
Door 'background-repeat:repeat-x;' herhaalt de afbeelding zich oneindig, maar alleen in de breedte. Zo kan je de gradient 1px breed maken en toch een volledige full-screen gradient hebben.
Om te voorkomen dat de gradient bij scrollen naar beneden zich herhaalt staat verticaal herhalen uit. De gradient zal slechts 1x getoont worden. Daaronder komt een vaste kleur.
Die kleur staat in 'background-color'. De background-color stel je als de ONDERSTE pixel van de gradient. Als jij een gradient van blauw (boven) en groen (onder) hebt moet je dus de background-color instellen als precies dezelfde kleur groen als in de gradient.
Zoals in het CSS voorbeeld te zien is heb ik een php script als achtergrond afbeelding.
Op de volgende pagina kan je de bron van die afbeelding/php script zien. Dit is natuurlijk optioneel: je kan met photoshop ook een afbeelding maken.
De hoogte van de afbeelding kan je zelf bepalen. Indien je een full-screen gradient wilt kan je iets rond de 1000 pixels hoog nemen. 1px breed is genoeg, want de gradient wordt oneindig vaak naast elkaar gezet door de CSS.
body {
background-position:top center;
background-repeat:repeat-x;
background-color:#FFFF00;
background-image:url(wall.php?tc=ff8800&bc=ffff00);
}Deze CSS plaatst de background-image bovenaan in het midden van de pagina door 'background-position:top center'.
Door 'background-repeat:repeat-x;' herhaalt de afbeelding zich oneindig, maar alleen in de breedte. Zo kan je de gradient 1px breed maken en toch een volledige full-screen gradient hebben.
Om te voorkomen dat de gradient bij scrollen naar beneden zich herhaalt staat verticaal herhalen uit. De gradient zal slechts 1x getoont worden. Daaronder komt een vaste kleur.
Die kleur staat in 'background-color'. De background-color stel je als de ONDERSTE pixel van de gradient. Als jij een gradient van blauw (boven) en groen (onder) hebt moet je dus de background-color instellen als precies dezelfde kleur groen als in de gradient.
Zoals in het CSS voorbeeld te zien is heb ik een php script als achtergrond afbeelding.
Op de volgende pagina kan je de bron van die afbeelding/php script zien. Dit is natuurlijk optioneel: je kan met photoshop ook een afbeelding maken.
De hoogte van de afbeelding kan je zelf bepalen. Indien je een full-screen gradient wilt kan je iets rond de 1000 pixels hoog nemen. 1px breed is genoeg, want de gradient wordt oneindig vaak naast elkaar gezet door de CSS.
Pagina 4
optioneel: de dynamische gradient
Ik heb zelf met PHP een script gemaakt die gradients kan maken.
Wat doet ie:
hij maakt een gradient op basis van 2 kleuren die ingevoert worden via GET.
voorbeeld:
script.php?tc=F00&bc=0F0
tc staat voor 'top color' en bc staat voor 'bottom color'.
Eerst kijkt ie of de afbeelding bestaat. Bestaat de afbeelding niet, dan maakt ie 1tje aan met de naam 'back[hexkleur1][hexkleur2].png'.
voorbeeld: backFF000000FF00.png
Deze afbeelding is 900px hoog en 1px breed. (kan je makkelijk editen in het script achter 'height' op lijn 37.
Indien het bestand bestaat wordt deze ingevoegt met 'include()' en wordt er een PNG header toegevoegd. De afbeelding wordt dus maar 1x aangemaakt in dezelfde map waar het script staat en daarna wordt ie continue ge-include-t.
Ik hoop dat het zo duidelijk is.
Veel script-plezier.
Wat doet ie:
hij maakt een gradient op basis van 2 kleuren die ingevoert worden via GET.
voorbeeld:
script.php?tc=F00&bc=0F0
tc staat voor 'top color' en bc staat voor 'bottom color'.
Eerst kijkt ie of de afbeelding bestaat. Bestaat de afbeelding niet, dan maakt ie 1tje aan met de naam 'back[hexkleur1][hexkleur2].png'.
voorbeeld: backFF000000FF00.png
Deze afbeelding is 900px hoog en 1px breed. (kan je makkelijk editen in het script achter 'height' op lijn 37.
Indien het bestand bestaat wordt deze ingevoegt met 'include()' en wordt er een PNG header toegevoegd. De afbeelding wordt dus maar 1x aangemaakt in dezelfde map waar het script staat en daarna wordt ie continue ge-include-t.
Ik hoop dat het zo duidelijk is.
Veel script-plezier.
<?php
function parseHex($hex) {
if(!preg_match('/#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i', $hex, $col)) {
preg_match('/#?([0-9a-f])([0-9a-f])([0-9a-f])/i', $hex, $col);
}
$hex = '#'.hexcol($col[1]).hexcol($col[2]).hexcol($col[3]);
return $hex;
}
function hexcol($hex) {
if(strlen($hex)==1){
$hex = $hex.$hex;
}
return $hex;
}
//type = color
//0 = array, 1 = red, 2 = green, 3 = blue.
function hex2rgb($hex,$type = 0) {
$hex=parseHex($hex);
if(!preg_match('/#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i', $hex, $col)) {
preg_match('/#?([0-9a-f])([0-9a-f])([0-9a-f])/i', $hex, $col);
}
if($type==0) {
return array(hexdec(hexcol($col[1])),hexdec(hexcol($col[2])),hexdec(hexcol($col[3])));
} else {
return hexdec(hexcol($col[$type]));
}
}
if(!file_exists('back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png')) {
$tc = hex2rgb($_GET['tc']);
$bc = hex2rgb($_GET['bc']);
$width = 1;
$height = 900;
$img = imagecreatetruecolor($width, $height);
$y=0;
while($y<$height) {
$x=0;
while($x<$width) {
$r = intval($bc[0]*$y/$height)+intval($tc[0]*($height-$y)/$height);
$g = intval($bc[1]*$y/$height)+intval($tc[1]*($height-$y)/$height);
$b = intval($bc[2]*$y/$height)+intval($tc[2]*($height-$y)/$height);
imagesetpixel($img,$x,$y,imagecolorallocate($img, $r, $g, $b));
$x++;
}
$y++;
}
imagepng($img,'back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png');
imagedestroy($img);
}
header('Content-Type: image/png'); //png header setten
include('back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png');
?>
Reacties
0