Crea gradienti con CSS

Avremo bisogno
Un editor di codice
I codici alfanumerici dei colori da utilizzare
Un browser web

Passo 1

Inizierò creando una cartella per questo tutorial che chiamerò "trucos_css"Al suo interno creerò un'altra chiamata"css”, In essi conserverò i file di cui avrò bisogno.

Passo 2

Andrò al mio editor di codice in questo caso utilizzerò le parentesi e procederò alla creazione di un nuovo file "index.html"Che salverò nella radice della cartella"trucchi_css", creerò anche un file"stile.css"Che salverò nella cartella" css "creata nel passo 1.

Passaggio 3

Nel mio file "index.html" scriverò la struttura html di base e aggiungerò un riferimento al foglio di stile "stile.css"Che nel passaggio precedente salvi nel percorso"css / style.css”.
Codice da index.html:

 Trucchi CSS - Sfumature 

Passaggio 4

Nel file "index.html" includerò un nuovoall'interno della quale assegnerò in seguito la classe "pendenza"Che scriverò in seguito nel file"stile.css”.
Il codice index.html sarà simile a questo:

 trucchi CSS

Passaggio 5

Ora lavorerò sul file "stile.css”, comincerò definendo la taglia che coprirà l'etichetta , imposterò una larghezza del 100%, un'altezza del 100%, dichiarerò che non avrà margini o padding e ti dirò che la sua posizione sarà assoluta in modo che copra la dimensione totale sullo schermo.
Codice stile.css:

 corpo {larghezza: 100%; altezza: 100%; margine: 0px; imbottitura: 0px; posizione: assoluta; }

Passaggio 6

Continuiamo a modificare il nostro css, ora aggiungerò la classe "pendenza"In esso indicherò che deve essere visualizzato con un'altezza del 100% e una larghezza uguale, scriverò che avrà un selettore di sfondo che conterrà la proprietà"gradiente lineare ()Che funziona come segue…
All'interno delle parentesi indichiamo dove è diretta la fine del nostro gradiente e i colori che mostrerà da un'estremità all'altra. La sintassi sarebbe qualcosa del genere:

 sfondo: gradiente lineare (direzione, color-stop1, color-stop2,…); 

Dove nella posizione chiamata direzione definiremo la direzione che il gradiente seguirà sullo schermoin alto a sinistra = sinistra e su
in alto a destra = destra e su
in basso a destra = in basso e a destra
in basso a sinistra = in basso ea sinistra
in basso a destra = in basso ea destra partendo dall'angolo in alto a sinistra
in basso a sinistra = in basso ea destra partendo dall'angolo in alto a destra
in alto a destra = in alto ea destra partendo da in basso a sinistra
in alto a sinistra = in alto ea sinistra partendo da quello in basso a destra
Per quanto riguarda i colori potete scegliere quelli che preferite, in questo caso farò un gradiente che partirà dal bianco al nero passando per due tonalità di blu.
Il nostro codice CSS sarebbe quindi il seguente:

 corpo {larghezza: 100%; altezza: 100%; margine: 0px; imbottitura: 0px; posizione: assoluta; } .gradiente {larghezza: 100%; altezza: 100%; sfondo: gradiente lineare (in basso a destra, # fff, # 00e2ff, # 00f, # 000); } 

Il risultato sarebbe il seguente.

Ma come tutto in questo mondo, ci sono altri modi per farlo molto più facilmente e velocemente e senza digitare molto, possiamo andare sul nostro browser e cercare il seguente indirizzo web http: //www.colorzill… radient-editor /

In esso troveranno una serie di gradienti già predefiniti e che possono anche personalizzare, dovranno solo selezionarne uno, adattarlo alle loro preferenze se lo desiderano, copiare il codice ccs che viene mostrato sul lato destro dello schermo e incollalo all'interno del livello "gradiente" che abbiamo già creato sostituendo ciò che troviamo scritto in esso nel passaggio 6. Consiglio questa opzione perché la uso particolarmente e il codice che ci fornisce è pronto per funzionare su qualsiasi browser.

Dopo aver copiato questo codice lo incolleremo nel nostro css, lasciandolo come segue:

 corpo {larghezza: 100%; altezza: 100%; margine: 0px; imbottitura: 0px; posizione: assoluta; } .gradiente {larghezza: 100%; altezza: 100%; fondo: rgb (212,228,239); / * Vecchi browser * / background: -moz-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, rgba (212,228,239,1)), color-stop (64%, rgba (134,174,204,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); /* Chrome10+, Safari5.1+*/sfondo: -o-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / sfondo: gradiente lineare (verso il basso, rgba (212,228,239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

E il risultato in questo caso sarebbe questo.
INGRANDIRE
Spero possa essere utile, per altri trucchi non dimenticarti di seguirmi…
Se ti è piaciuto questo tutorial, non dimenticare di votarlo e se hai domande o commenti lasciali qui sotto, sarò felice di risponderti. Saluti … Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo