Versio

Layout: gradient achtergrond

Kleine tutorial/snippit hoe je een mooie gradient als achtergrond van je website kan krijgen die zich niet herhaalt bij scrollen.

Gesponsorde koppelingen

Inhoudsopgave

  1. Introductie
  2. De HTML pagina
  3. De CSS
  4. optioneel: de dynamische gradient

 

10 reacties op 'Layout: gradient achtergrond'

PHP hulp
PHP hulp
0 seconden vanaf nu
 
Gesponsorde koppelingen
Kasper Isgek
Kasper Isgek
4 jaar geleden
 
0 +1 -0 -1
Ik denk dat met name het script-gedeelte van je tutorial wel interessant is en meer mogelijkheden biedt dan een plaatje van 1000px bij 1px in Photoshop of The Gimp te maken. Zo kan je bijvoorbeeld bezoekers hun eigen achtergrond laten maken. Wist trouwens ook niet dat je een script als url kan meegeven in CSS, bedankt daarvoor. :)
Toby hinloopen
toby hinloopen
4 jaar geleden
 
0 +1 -0 -1
@kasper: je kan ook een PHP script als CSS nemen, als je maar de goede headers gebruikt.

header('Content-Type: text/css');

is voor CSS.

Hetzelfde voor javascript.
RvW Of toch niet
RvW Of toch niet
4 jaar geleden
 
0 +1 -0 -1
heb hier ook wel en aantal dingen uit geleerd zo als kasper aan geeft had er niet aan gedacht om script als url mee tegeven :) tnx!
ILoran punt NL
iLoran punt NL
4 jaar geleden
 
0 +1 -0 -1
Bij die PHP code is een error:
Fatal error: Call to undefined function imagecreatetruecolor() in * on line 39

Edit by PHPerik: vetgedrukte foutmelding hoeft niet, zeker aangezien het een configuratiefout van jouzelf is en niet een fout in het script
PHP Newbie
PHP Newbie
4 jaar geleden
 
0 +1 -0 -1
Je hebt geen GD ge?nstalleerd Loran.
Jan Koehoorn
Jan Koehoorn
4 jaar geleden
 
0 +1 -0 -1
Wel geinig verzonnen ;-)

Je CSS kan een stuk korter, via de background-shorthand:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
body {background: #ff0 url(wall.php?tc=f80&bc=ff0) top center repeat-x;}
Robert Deiman
Robert Deiman
4 jaar geleden
 
0 +1 -0 -1
@Jan

Als je het goed wil doen volgens de syntaxis van css hoort er voor zover ik weet een enkele quote om de waarde tussen de ( en ) achter URL.


@toby
Wel een leuke snippit zo, leuk om eens mee te stoeien.
Jan Koehoorn
Jan Koehoorn
4 jaar geleden
 
0 +1 -0 -1
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
Als je het goed wil doen volgens de syntaxis van css hoort er voor zover ik weet een enkele quote om de waarde tussen de ( en ) achter URL.


@ Robert: dat zou je verwachten, maar zo is het niet. In heel veel browsers werkt het dan juist niet.
Toby hinloopen
toby hinloopen
4 jaar geleden
 
0 +1 -0 -1
@jan:
a: ik vergeet de volgorde altijd:P
b: als er een waarde is met een spatie (zoals 'top center' of '5xp 4px' bij border) wordt het helemaal een gekloot.
c: dit werkt wat overzichtelijker. vooral nu, omdat dit een tutorial is.

maar meestal werk ik wel met de verkorte versie als het gewoon 3 waarden zijn met 1 woordje zoals 'border:1px solid #fff;'
Arian Stolwijk
Arian Stolwijk
4 jaar geleden
 
0 +1 -0 -1
Die top en center hoeft niet eens eigenlijk.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
body {
    background: #ff0 url(wall.php?tc=f80&bc=ff0) repeat-x;
}

/* of */
body {
     background: #ff0 url(wall.php?tc=f80&bc=ff0);
     background-position: top center;
}


kan ook heel goed (Y)

Verder is het een leuke tutorial, vooral voor de 'niet super gevorderde' onder ons ;)

Verder maakt de volgorde niet zoveel uit.
Alleen de position moet je goed doen. Met top center, of juist 20px 40px. Dan moet je alleen even kijken of de volgorde juist is.

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

  • Labels
  • Geen tags toegevoegd.