Layout: gradient achtergrond

Door Toby hinloopen, 19 jaar geleden, 10.013x bekeken

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

 

Er zijn 10 reacties op 'Layout gradient achtergrond'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Winston Smith
Winston Smith
19 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
19 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
19 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!
Loran DP
Loran DP
19 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
19 jaar geleden
 
0 +1 -0 -1
Je hebt geen GD ge?nstalleerd Loran.
Jan Koehoorn
Jan Koehoorn
19 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
19 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
19 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
19 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;'
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Arian Stolwijk
Arian Stolwijk
19 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.

Inhoudsopgave

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

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

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.