Lag gradienter med CSS

Vi trenger
En kodeditor
De alfanumeriske kodene til fargene som skal brukes
En nettleser

Trinn 1

Jeg starter med å lage en mappe for denne opplæringen som jeg vil kalle "trucos_css"Innenfor det vil jeg opprette en ny samtale"css”, I dem vil jeg beholde filene jeg trenger.

Steg 2

Jeg vil gå til kodeditoren min i dette tilfellet, jeg vil bruke Brackets og fortsette med å lage en ny fil "index.html"At jeg vil lagre i roten av mappen"tricks_css", Jeg vil også opprette en fil"style.css"At jeg vil lagre i" css "-mappen som er opprettet i trinn 1.

Trinn 3

I filen min "index.html" vil jeg skrive den grunnleggende html -strukturen og legge til en referanse til stilarket "style.css"Det i det forrige trinnet lagre i banen"css / style.css”.
Kode fra index.html:

 CSS -triks - Gradienter 

Trinn 4

I filen "index.html" vil jeg inkludere en nyder jeg senere vil tildele klassen "gradient"Som jeg skal skrive senere i filen"style.css”.
Index.html -koden vil se slik ut:

 CSS -triks

Trinn 5

Nå skal jeg jobbe med filen "style.css”, Vil jeg starte med å definere størrelsen som etiketten skal dekke , Jeg vil angi en bredde på 100%, en høyde på 100%, jeg vil erklære at den ikke vil ha marginer eller polstring, og jeg vil fortelle deg at posisjonen vil være absolutt slik at den dekker den totale størrelsen på skjermen.
Style.css -kode:

 kropp {bredde: 100%; høyde: 100%; margin: 0px; polstring: 0px; posisjon: absolutt; }

Trinn 6

Vi fortsetter å redigere cssen vår, nå vil jeg legge til klassen "gradient"I den vil jeg indikere at den skal vises med en høyde på 100% og lik bredde, jeg vil skrive at den vil ha en bakgrunnsvelger som vil inneholde egenskapen"lineær-gradient ()Som fungerer som følger …
Innenfor parentesene indikerer vi hvor slutten av gradienten vår er rettet og fargene som den vil vise fra den ene enden til den andre. Syntaksen vil være omtrent slik:

 bakgrunn: lineær-gradient (retning, farge-stopp1, farge-stopp2, …); 

Hvor i posisjonen som kalles retning, vil vi definere retningen som gradienten vil følge på skjermenvenstre topp = venstre og opp
øverst til høyre = høyre og opp
Nede til høyre = ned og til høyre
nede til venstre = ned og til venstre
nederst til høyre = ned og til høyre fra øvre venstre hjørne
nederst til venstre = under og til høyre fra øvre høyre hjørne
øverst til høyre = topp og høyre fra nedre venstre
øverst til venstre = øverst og venstre fra nederst til høyre
Når det gjelder fargene, kan du velge de du foretrekker, i dette tilfellet vil jeg lage en gradient som starter fra hvitt til svart gjennom to nyanser av blått.
Vår css -kode vil da være som følger:

 kropp {bredde: 100%; høyde: 100%; margin: 0px; polstring: 0px; posisjon: absolutt; } .gradient {bredde: 100%; høyde: 100%; bakgrunn: lineær gradient (nederst til høyre, # fff, # 00e2ff, # 00f, # 000); } 

Resultatet ville bli følgende.

Men som alt i denne verden, er det andre måter å gjøre det mye enklere og raskere, og uten å skrive mye, kan vi gå til nettleseren vår og se etter følgende webadresse http: //www.colorzill… radient-editor /

I den vil de finne en serie gradienter som allerede er forhåndsdefinert, og som de også kan tilpasse, de trenger bare å velge en, justere den til deres preferanser hvis de ønsker det, kopiere ccs -koden som vises på høyre side av skjermen og lim den inn i "gradient" -laget som vi allerede har opprettet ved å erstatte det vi finner skrevet i det i trinn 6. Jeg anbefaler dette alternativet fordi jeg spesielt bruker det og koden det gir oss er klar til å fungere i alle nettlesere.

Etter å ha kopiert denne koden, limer vi den inn i css -en vår, slik at den blir slik:

 kropp {bredde: 100%; høyde: 100%; margin: 0px; polstring: 0px; posisjon: absolutt; } .gradient {bredde: 100%; høyde: 100%; bakgrunn: rgb (212,228,239); / * Gamle nettlesere * / bakgrunn: -moz-lineær-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (212,228,239,1)), farge-stopp (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / bakgrunn: -webkit-lineær-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / bakgrunn: -o-lineær-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / bakgrunn: -ms-lineær-gradient (topp, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / bakgrunn: lineær-gradient (til bunn, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

Og resultatet i dette tilfellet ville være dette.
FORSTØRRE
Jeg håper det vil være nyttig, for flere triks ikke glem å følge meg …
Hvis du likte denne opplæringen, ikke glem å rangere den, og hvis du har spørsmål eller kommentarer, legg igjen dem nedenfor, vil jeg gjerne svare deg. Hilsen … Liker du og hjalp denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng