Het invoegen van een achtergrond met kleurovergang met behulp van PHP

Trapsgewijs opmaakmodel (CSS) code is geschikt voor het genereren van helling achtergronden op webpagina's. Gezien het feit dat het mogelijk is te mengen van PHP met CSS-code, zolang de CSS bevindt zich in de PHP-bestand, kunt u PHP voor het genereren van verlopen op basis van een formulier. De vorm krijgt van het verloop van instellingen en het verzenden naar de pagina waar u de gradatie achtergrond te verschijnen. Secties van de CSS met PHP voor de uitvoer van de formulierwaarden vervangen door, zal de PHP leiden tot het gewenste verloop.

Instructies

1

Maak een formulier te nemen de waarden voor de kleurovergang. Op een minimum moet u een beginpunt voor het verloop, een beginkleur en een eindkleur. Om te testen dit formulier, moet u ook ingesteld een leeg vak op de pagina waar het verloop wordt weergegeven. Deze HTML-code aan een webpagina toevoegen:

< form action="gradient_maker.php" methode = "post" >
Graad: < input type = "text" name = "mate" / >
Kleur: < input type = "text" name = "start" / >
Eindkleur: < input type = "text" name = "end" / >
< input type = "submit" naam = "submit" waarde = "submit" / >
< / form >
< div id = "preview" >< / div >

"Gradient_maker.php" aan de bestandsnaam van de webpagina waar je deze code wijzigen Hierdoor zal het maken van het formulier op de pagina dat het op, in plaats van een andere pagina plaatsen.

2

De "< >" stijltags vinden op uw Web-pagina of een paar toe te voegen. Deze liggen altijd tussen de "< head >"-codes. Instellen uw voorbeeldvak doordat het leeg DIV-element op de pagina een breedte-, hoogte- en grenzenbeleid

{Preview}

breedte: 300px; hoogte: 300px;
rand: 1px solid #cccccc;
}

3

Krijgen de formulierwaarden binnen de stijlregel, maar alleen als het formulier al was ingediend door de gebruiker:

{Preview}

breedte: 300px; hoogte: 300px;
rand: 1px solid #cccccc;
<? php if(isset($_POST['submit'])):? >
<? php endif;? >
}

De "isset()"-functie in deze voorwaardelijke verklaring van PHP controleert of het formulier is verzonden, door te controleren voor de waarde van de knop "Verzenden". Als "isset()" die waarde vindt, dan is het script kunt proberen te brengen in de waarden uit het formulier en steek ze in sommige CSS.

4

Sommige fundamentele kleurovergang syntaxis schrijven. Instellen van het verloop als achtergrondafbeelding, met behulp van een lineair verloop met een graad, kleur en einde kleur beginnen. De mate zal het verloop waar te beginnen vertellen:

{Preview}

breedte: 300px; hoogte: 300px;
rand: 1px solid #cccccc;
<? php if(isset($_POST['submit'])):? >
achtergrond-afbeelding: lineaire-gradient(deg, start color, end color);
<? php endif;? >
}

5

In de syntaxis voor kleurovergangen vereist door elke browser toevoegen. WebKit gebaseerde browsers, Chrome en Safari, gebruiken een voorvoegsel van "-webkit," en Firefox gebruikt "-moz."

{Preview}

breedte: 300px; hoogte: 300px;
rand: 1px solid #cccccc;
<? php if(isset($_POST['submit'])):? >
achtergrond-afbeelding: lineaire-gradient(deg, start color, end color);
achtergrondafbeelding: - webkit-lineaire-gradient(deg, start color, end color);
achtergrondafbeelding: - moz-lineaire-gradient(deg, start color, end color);
<? php endif;? >
}

6

Plaats deze code voor "deg" binnen elk verloop coderegel:

achtergrond-afbeelding: lineaire-gradient(<?php echo $_POST['degree'];?>deg, start color, end color);

7

Elk exemplaar van de "kleur" en "end kleur" vervangen door de desbetreffende waarden uit het formulier:

achtergrond-afbeelding: lineaire-gradient(<?php echo $_POST['degree'];?>deg, <?php echo $_POST['start'];?>, <?php echo $_POST['end'];?>);

Laden van de pagina in een browser en probeer het uit de vorm. Wanneer u met de rechtermuisknop op de pagina en Bekijk de broncode, vindt u duidelijke CSS-uitgang maken de verlopen op basis van waarden die u indient.

Tips & waarschuwingen

  • Verlopen kunnen meer dan de drie waarden besproken. Vertrouwd raken met hoe verlopen werken en extra velden toevoegen aan uw formulier voor het genereren van meer complexe verlopen.
  • Zorg ervoor dat de webpagina waar u deze vorm plaatst heeft een PHP extensie. Als dit niet het geval is, gaat u naar "Opslaan als" in uw redacteur en opslaan als een PHP bestand.
  • U moet het testen van PHP manuscripten op webservers. Dit betekent dat uploaden naar uw Web hosting account on line of testen op uw computer met behulp van een testserver. WampServer en XAMPP zijn twee test server pakketten die goed op Windows werken, en MAMPP werkt goed op een Mac OS.