Sette inn en Gradient Bakgrunn Bruke PHP

December 16

Cascading Style Sheet (CSS) kode er i stand til å generere gradient bakgrunn på websider. Tatt i betraktning at det er mulig å blande PHP på med CSS-kode, så lenge CSS ligger innenfor PHP-fil, kan du bruke PHP til å generere graderinger basert på et skjema. Skjemaet vil få innstillinger gradienten og sende den til siden der du vil at gradient bakgrunnen skal vises. Skifte deler av CSS med PHP å sende skjema verdier, vil PHP skape den ønskede gradient.

Bruksanvisning

1 Lag et skjema for å ta i verdiene for graderingen. På et minimum, trenger du et utgangspunkt for graderingen, en start farge og en sluttfarge. For å teste dette skjemaet, må du også sette opp en tom boks på siden der graderingen vises. Legg denne HTML-koden til en webside:

<Form action = "gradient_maker.php" method = "post">
Grad: <input type = "text" name = "grad" />
Start Farge: <input type = "text" name = "start" />
Slutt Farge: <input type = "text" name = "end" />
<Input type = "submit" name = "submit" value = "submit" />
</ Form>
<Div id = "preview"> </ div>

Change "gradient_maker.php" til filen navnet på websiden der du legge inn dette. Å gjøre dette vil gjøre skjemaet post til siden som den er på, i stedet for en annen side.

2 Finn "<style>" koder på websiden eller legge til et par. Disse er alltid plassert mellom "<head>" koder. Sett opp din forhåndsvisningsboksen ved å gi den tomme div på siden en bredde, høyde og kant:

forhåndsvisning {

width: 300px; height: 300px;
border: 1px solid #cccccc;
}

3 Få skjema verdier innen stilen regel, men bare hvis skjemaet ble allerede sendt av brukeren:

forhåndsvisning {

width: 300px; height: 300px;
border: 1px solid #cccccc;
<? Php if (isset ($ _ POST [ 'submit'])):?>
<? Php endif; ?>
}

Den "isset ()" -funksjonen i denne PHP betinget statement sjekker om skjemaet ble sendt, ved å sjekke for verdien av "Send" -knappen. Hvis "isset ()" finner denne verdien, så skriptet kan prøve å få inn verdier fra skjemaet og plugge dem inn til noen CSS.

4 Skriv noen grunnleggende gradient syntaks. Sett gradient som et bakgrunnsbilde, ved hjelp av en lineær gradient med en grad, start farge og end farge. Graden vil fortelle gradient hvor du skal begynne:

5 Legg i syntaksen for gradienter som kreves av hver nettleser. WebKit-baserte nettlesere - Chrome og Safari - bruk en prefikset "-webkit", og Firefox bruker "-moz."

forhåndsvisning {

width: 300px; height: 300px;
border: 1px solid #cccccc;
<? Php if (isset ($ _ POST [ 'submit'])):?>
background-image: lineær-gradient (grader, starte farge, end farge);
background-image: -webkit-lineær-gradient (grader, starte farge, end farge);
background-image: -moz-lineær-gradient (grader, starte farge, end farge);
<? Php endif; ?>
}

6 Plasser denne koden foran "deg" inni hver linje av gradient-kode:

background-image: lineær-gradient (<? php echo $ _POST [ 'grad'];?> grader, starte farge, end farge);

7 Erstatt hver forekomst av "start farge" og "end farge" med sine relevante verdier fra skjemaet:

background-image: lineær-gradient (<? php echo $ _POST [ 'grad'];?> grader, <? php echo $ _POST [ 'start'];?>, <? php echo $ _POST [ 'end']? ;?>);

Last siden i en nettleser og prøv ut skjemaet. Når du høyreklikker på siden og vise kildekoden, vil du finne ren CSS utgang skape graderinger basert på verdiene du sender inn.

Hint

Gradienter kan ta mer enn de tre verdiene diskutert. Bli kjent med hvordan gradienter arbeide og legge til ekstra felt i skjemaet for å generere mer komplekse gradienter.
Kontroller at Web-siden hvor du plasserer denne formen har en PHP forlengelsen. Hvis den ikke gjør det, gå til "Lagre som" i redigeringsprogrammet og lagre det som en PHP-fil.
Du må teste PHP-skript på webservere. Dette betyr opplasting til web hosting konto online eller testing på datamaskinen ved hjelp av en test-server. WampServer og XAMPP er to test server pakker som fungerer godt på Windows, og MAMPP fungerer godt på en Mac OS.