Hvordan lage en Gradient med CSS

Cascading Style Sheets (CSS) har blitt en standard del av webutvikling. CSS gir webdesignere med en praktisk måte å håndtere fonter, farger og andre stilelementer som et nettsted bruker. Ved å gjøre endringer i en CSS-fil er endringen umiddelbart reflektert på alle sidene på nettstedet, noe som gjør designendringer en uanstrengt prosess. En vanlig bruk av CSS stilelementer er å opprette en gradient bakgrunn, hvor overganger fra en farge til en annen nyanse av den samme farge.

Bruksanvisning

1 Åpne CSS-filen. Bruk Notepad eller en lignende tekst editor for å åpne CSS-fil for nettstedet. Hvis dette er et nytt nettsted som ennå ikke har en CSS-fil, åpne en tom tekstdokument og lagre det som style.css.

2 Legg en standard bakgrunns til CSS. Standard bakgrunnen vil bli brukt i tilfelle at en bruker er å surfe på Internett med en nettleser som ikke imøtekomme CSS. For å legge til en standard bakgrunn, inkluderer følgende linje i din CSS-filen:

bakgrunn: #FFFFFF; /

For ikke-CSS3 nettlesere /

Bytt #FFFFFF med den heksadesimale koden for bakgrunnsfargen du ønsker å vise som standard.

3 Lag en gradient stil som vil bli vist for brukere som bruker Internet Explorer nettleser. Ta med følgende linje med kode til din CSS-fil:

filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# cccccc', endColorstr = '# 000000');

Bytt #CCCCCC og # 000000 med heksadesimale koder for start- og slutt fargene ønsket gradient spekteret.

4 Lag en gradient som vil bli vist for medlemmer som bruker Firefox nettleser. Legg til følgende linje med kode til din CSS-fil:

bakgrunn: -moz-lineær-gradient (topp, #ccc, # 000);

Endre #CCC å være ønsket start fargen på gradient, og endre # 000 for å gjenspeile den fargen du vil skal vises på slutten av graderingen.

5 Legg en gradient som skal vises av Webkit nettlesere. Webkit er et format som brukes av Safari, Google Chrome og mange mobilnettlesere. For å legge til en gradient bakgrunn til Webkit brukere, legg til følgende linje med kode inn i CSS-filen:

bakgrunn: -webkit-gradient (lineær, venstre øverst, venstre nederst, fra (#ccc), til (# 000));

Du kan justere venstre topp til venstre nederst til å styre retningen at gradienten flyter på skjermen. Oppdater #CCC å reflektere starten fargen på gradient, og endre # 000 for å reflektere slutten fargen du ønsker.

6 Lagre CSS-filen. Bare klikk på "File" og deretter "Lagre" for å lagre filen under det eksisterende filnavnet.

7 Last opp CSS-filen til serveren din. Bruk en FTP-program, som FileZilla eller SmartFTP, for å overføre en kopi av CSS-filen fra datamaskinen til webserveren din.