Achtergrond met kleurovergang

Door Iemand , 18 jaar geleden, 8.395x bekeken

Maak een file aan copy/paste en voer je kleuren maar in :)
Je kan zelf meerdere kleuren toevoegen als je dat wilt.
Ik heb de kleuren rood,blauw,wit,lichtgrijs,donkergrijs,zwart,groen en geel ingesteld.
Zelf kan je er natuurlijk nog toevoegen.
Het script maakt een afbeelding bg.png aan dus wees zeker dat die afbeelding NIET bestaat,
je kan zelf een andere naam kiezen als je dat wil.

EDIT:
- gebruik van switch ipv oneindig veel if's.
- 5px hoog en niet meer $factor px hoog voor plaats te besparen

Voorbeeld: http://fearofdutch.cogia.net/backgrounds.php

Gesponsorde koppelingen

PHP script bestanden

  1. achtergrond-met-kleurovergang

 

Er zijn 25 reacties op 'Achtergrond met kleurovergang'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Wouter De Schuyter
Wouter De Schuyter
18 jaar geleden
 
0 +1 -0 -1
Een switch lijkt me hier toch handig voor je kleuren te kiezen xD
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
hmm zit wat in :p
---- ----
---- ----
18 jaar geleden
 
0 +1 -0 -1
op joun voorbeeld werk het script niet... ?
ik kan 2kleuren kiesen en als ik op genereer klik krijg ik weer de zelfde boxjes

EDIT:
sorry nu doet die het wel gehe
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
raar, bij mij wel hoor
---- ----
---- ----
18 jaar geleden
 
0 +1 -0 -1
nu een ander probleem
wanneer ik een andere kleur kies
krijg ik steeds het blauwe plaatje te zien
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
? Gebruik jij een eigengemaakte browser fzo? ik use safari en hij lukt perfect, ik zal even uittesten in google chrome opera mozilla en IE.
Pim -
Pim -
18 jaar geleden
 
0 +1 -0 -1
Ten 1e, je hebt maar 1px hoogte nodig... css doet de rest.
Ten 2e, je hebt echt totaal niets aan een bg met max 255 px breedte. Dit kan je wel oplossen door gewoon pixels te kleuren, elke keer breedte/255 pixels dezelfde kleur.
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
in IE doet hij het bij mij ook, maar gebruik f5 en het is inorde, het is gewoon omdat hij images opslaat.

EDIT: ook in opera geldt dat, je kan het oplossen met die ene meta-tag
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
@paradox
Ik gebruik nu switch in plaats van al die if's
Michael -
Michael -
18 jaar geleden
 
0 +1 -0 -1
Zet even alles tussen en tags zodat alles te gelijk kan worden gekopierd.
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
done
Bas IJzelendoorn
Bas IJzelendoorn
18 jaar geleden
 
0 +1 -0 -1
Het werkt wel, maar wanneer zou je dit nou daadwerkelijk gebruiken? Veel webdesigners gebruiken wel iets van photoshop of andere progrmma's dus voor hun zit dit standaard in het programma verwerkt.


18 jaar geleden
 
0 +1 -0 -1
Je gaat toch niet iedere keer opnieuw een plaatje genereren. Pfft. Wat een troep.
En fading backgrounds, dat is ook zoiets van de jaren negentig.
En bagger gescript.
Yearupie Achternaamloos
Yearupie Achternaamloos
18 jaar geleden
 
0 +1 -0 -1
Hier heb je dus echt geen zak aan? Je kan maar 8 standaard kleuren.
Het zou al een iets beter zijn als het mogelijk was om zelf een kleur te selecteren of in te voeren.
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
@yearupie, als je dat erg vindt kan je deze gebruiken: http://fearofdutch.cogia.net/bg2.php

Hier kan je hexadecimale waarden invullen.
Als je de code wilt zeg het dan even.
Wesley Overdijk
wesley Overdijk
18 jaar geleden
 
0 +1 -0 -1
@Yearupie: Je zeikt deze tutorial alleen maar af omdat jou tut ook werd afgezeken. Give me a break. Ik vind het best leuk gevonden tbh.
Ivo K
Ivo K
18 jaar geleden
 
0 +1 -0 -1
Hhmmmm je kan er eventueel een colorpicker in jquery aan toevoegen. Het is namelijk jammer dat je of maar een stuk of acht kleuren hebt of maar net die kleurcode moet weten die je wilt.
Wesley Overdijk
wesley Overdijk
18 jaar geleden
 
0 +1 -0 -1
... Spreekt voor zich.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php            
    ///het door de gebruiker gekozen, hexadecimale getal                    
    $hex = "7b92f6";
    //Vars opzetten, en omzetten naar dec
    $a = hexdec($hex[0]);            
    $b = hexdec($hex[1]);
    $c = hexdec($hex[2]);
    $d = hexdec($hex[3]);
    $e = hexdec($hex[4]);
    $f = hexdec($hex[5]);    
  
   //x=R, y=G, z=B
    $x = ($a*16)+$b;
    $y = ($c*16)+$d;
    $z = ($e*16)+$f;
    
    //Enjoy.
?>
Robert Deiman
Robert Deiman
18 jaar geleden
 
0 +1 -0 -1
@iemand
Op zich leuk, maar je hebt nu altijd een vierkant. Mooier is om een 1px hoge afbeelding met een bepaalde breedte te maken, deze kan je vertikaal laten herhalen, wat behoorlijk veel ruimte scheelt. Is een veel betere optie.
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
@robert, ik vind het een goed idee, maar ik maak hem wel 5px, anders is het moeilijk om erop te klikken :p
Thijs X
Thijs X
18 jaar geleden
 
0 +1 -0 -1
@iemand,
je kan het toch alsnog 1px maken en dan met CSS de achtergrond repeaten ;)
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
ja maar dan kan je niet op de afbeelding klikken om ze te kopieren want ze is te dun.
Het is de bedoeling dat je de afbeelding kopieert om zelf te hergebruiken hé ;)
Robert Deiman
Robert Deiman
18 jaar geleden
 
0 +1 -0 -1
Waarom? Als je hem gewoon 1 px hoog maakt dan doe je in je css:

background-image:url('background.php?color1=000000&color2=ffffff');
background-repeat:repeat-y;
Iemand
iemand
18 jaar geleden
 
0 +1 -0 -1
dat kan je vanaf nu doen: http://fearofdutch.cogia.net/bg.php?c1=000000&c2=FFFFFF
Je vervangt c1 en c2 door een eigen kleur.
script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
//hier komen de variabelen
header('content-type: image/png');
//kijk of er op knop gedrukt is om te vermijden dat we lege afbeeldingen maken

$c1=$_GET[color1];
$c2=$_GET[color2];
$c3=$_GET[c1];
$c4=$_GET[c2];


$f='127'; //verander deze waarde om de breedte en de hoogte van de afbeelding te veranderen.  LET OP: deze waarde mag niet groter dan 127 zijn (127*2 = 254), omdat je maar 255 lines in één image kan trekken. (indien je dat wil doen werk dan met squares van 2/3pt dik ipv lines)
if ($c3 != $null && $c4 != $null) {
create_image($c3,$c4, $f);
} elseif ($c3 == $null) {
create_image($c1,$c4, $f);
} elseif ($c4 == $null) {
create_image($c3,$c1, $f);
}else{
create_image($c1,$c2, $f);
}

$post=true;

//hier komen de functies
//hex2rgb() is 'geript' van http://www.sitemasters.be/scripts/1/28/1138/PHP/Hex_kleur_converten_naar_RGB_kleur

function hex2rgb($hex)
{
  $hex = ltrim($hex, '#');

  if(strlen($hex) == 3)
  {
    $new = '';
    for($i = 0; $i < 3; $i++) $new .= str_repeat($hex{$i}, 2);
    $hex = $new;
  }

  $rgb = array();
  for ($i = 0; $i < 3; $i++) $rgb[] = hexdec(substr($hex, $i*2, 2));
  return '' . implode(', ', $rgb) . '';
}


function create_image($c1,$c2, $factor) {
$im = @imagecreate($factor*2, '1') or die("Afbeelding niet gecreëerd");
//we gaan de kleuren bepalen nu, hierbij maakte ik gebruik van http://web.forret.com/tools/color.asp en van http://nl.wikipedia.org/wiki/Lijst_van_HTML-kleuren

$c1=hex2rgb($c1);
$c2=hex2rgb($c2);
$c1 = explode(',',$c1);
$c2 = explode(',',$c2);


$v1=$c2[0]-$c1[0];
$v2=$c2[1]-$c1[1];
$v3=$c2[2]-$c1[2];

//hier bepalen we hoeveel er tussen de kleuren zit ( RGB appart ), dit verdelen we dan in $factor gelijke deeltjes die er dan geleidelijk aan bijkomen zodat je een kleurovergang verkrijgt.

$v1=$v1 / $factor;
$v2=$v2 / $factor;
$v3=$v3 / $factor;

//nu maken we een while-loop om elke rij te bepalen
$i=0;

while($i < $factor) {
//de breedte van de afbeelding is $factor
$color = imagecolorallocate($im, $c1[0] + round($i*$v1), $c1[1] + round($i*$v2), $c1[2] + round($i*$v3));
imageline ($im,  $i,  0, $i, 1, $color);
$i++;
}

$i=0;

$factor--;
while($i < $factor) {
//de breedte van de afbeelding is $factor
$color = imagecolorallocate($im, $c1[0] + round($i*$v1), $c1[1] + round($i*$v2), $c1[2] + round($i*$v3));
imageline ($im,  $factor*2-$i,  0, $factor*2-$i, 1, $color);
$i++;
}
//image even inpakken
 imagepng($im);
 imagedestroy($im);
}
?>
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Toby hinloopen
toby hinloopen
18 jaar geleden
 
0 +1 -0 -1
Zie ook:
http://phphulp.nl/php/tutorials/5/647/

Had ik zelf een keer geschreven ;)

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. achtergrond-met-kleurovergang

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.