Creare sfondi accattivanti tramite CSS: i gradients

I gradients sono elementi molto importanti che donano ai nostri siti uno stile sorprendente, interessante, ma soprattutto, accattivante.

La novità nei gradients non sta nella possibilità di poter sfumare colori semplicemente dall’alto in basso o da destra a sinistra, queste tecniche sono già abbastanza conosciute e piuttosto “antiche”. La vera novità sta nella possibilità di poter sfumare i colori dall’angolo in alto a sinistra a quello in basso a destra senza l’ausilio di un programma di grafica esterno.

Ed è anche possibile creare delle sfocature semplicemente modificando un parametro.

Ringrazio fin da subito la mia amica e collega Agnieszka Czerwinska che ha collaborato alla stesura di questo articolo.

Diagonal Gradient

Come già detto poco più sopra, lo scopo dei gradients è quello di creare sfondi accattivanti senza l’ausilio di programmi esterni. A questo scopo, per creare quindi i gradienti diagonali, sfocati in mezzo ecc. useremo solo ed esclusivamente il CSS.

I gradients vengono riconosciuti dal CSS come immagini, pertanto il loro utilizzo va abbinato alla proprietà “background-image” o alla short form “background”. Un loro utilizzo con le altre proprietà background non sarà riconosciuto.

Inoltre, bisogna specificare, che i gradients non sono supportati allo stesso modo da tutti i browser, pertanto sarà necessario inserire i proprietari davanti ai vari gradients.

Per creare quindi dei gradienti diagonali sarà necessario utilizzare la seguente sintassi in CSS:

background: -moz-linear-gradient() → per Mozilla Firefox;
		 -ms-linear-gradient() → per Internet Explorer;
		 -webkit-linear-gradient() → per Chrome e Safari;
		 -o-linear-gradient() → per Opera.
		 linear-gradient() → sintassi standard (va sempre per ultima!)

Tra le parentesi vanno inseriti i vari attributi in questa maniera:

(inclinazione, rgba(0,0,0,1) inizio quindi 0%, rgba(0,0,0,1)metà%, rgba(0,0,0,1) fine, quindi,100%).

La sintassi è praticamente identica per tutti i vari browser, tuttavia, per quanto riguarda il webkit (quindi per Chrome e Safari) bisogna fare un discorso a parte (ci arriveremo fra poco).

Dopo aver specificato la proprietà del gradient con le varie sigle proprietarie, tra parentesi si specifica quali colori andranno utilizzati, in quale porzione del vostro sfondo sarà posizionata la sfumatura (indicato con la percentuale) e di quanti gradi deve essere inclinato il gradient.

Facciamo un esempio: nella nostra pagina html creiamo un “a” e assegnamogli una classe e un id per poter settare dimensioni e gradient:

HTML

<a href="#" class="bottone" id="esempio1"><span>CLICCA QUI!</span></a>

Nel CSS, invece, settiamo le proprietà della classe “bottone” per dargli la forma di un tasto e allineiamo il testo al centro; usiamo l’id, per settare il gradient. In questo modo ci sarà più facile creare più tasti uguali ma con gradient differenti:

 CSS

CSS:

.bottone{
position:relative;
width:150px;
height:50px;
border: 1px solid black;
border-radius: 10px;
text-align: center;
font-size:1.2em;
color:white;
font-weight:bold;
font-family:sans-serif;
display: block;
text-decoration: none;
}

.bottone span{
position:relative;
top:14px;
display:block;
}

#esempio1{
background: linear-gradient(-180deg, rgba(68,198,173,1)0%, rgba(46,179,153,1)50%, rgba(28,164,137,1) 100%);

border-color: rgba(37,132,115,1);
} 

In questo caso ho impostato una inclinazione del gradient di -180 gradi (in pratica orizzontale a colori invertiti) e poi settato i vari colori per le varie porzioni della sezione in cui inserisco il gradient.

Il risultato sarà il seguente:

CLICCA QUI!

Le porzioni di un background non devono essere necessariamente solo 3 per poter settare un gradient, ma si può dividerlo anche in 2 o in più parti, a patto che non dimentichiate che il nostro scopo è quello di creare degli sfondi accattivanti e ed esteticamente piacevoli, non costumi per carnevale ;).

Vediamo quindi un altro paio di esempi a riguardo, modificando i valori del background.

Magari avete intenzione di donare al vostro tasto una sfumatura “sanguigna”. Per farlo basta settare il nostro gradient con tonalità diverse di rosso, in questa maniera:

CSS

#esempio1{
background: linear-gradient(180deg, rgba(230,24,14,1) 0%, rgba(181,12,4,1) 48%, rgba(133,10,4,1) 100%);
border-color: rgba(230,24,14,1);

} 

Questo sarà il risultato:

CLICCA QUI!

O magari a uno stile del genere preferite qualcosa di più “gioioso”, quindi si potrebbero sfumare colori più accesi e brillanti, come in questo caso:

CSS

#esempio1{
background: linear-gradient(180deg, rgba(242,176,21,1) 0%, rgba(228,159,18,1) 50%, rgba(213,140,14,1) 100%);
border-color: rgba(196,124,0,1);

} 

CLICCA QUI!

“Vecchia” sintassi per il Webkit

Dicevamo che per quanto riguarda il “webkit” c’è da fare un discorso a parte. Oltre alla sintassi che vi ho già esposto poco fa, più recente e standard, per Chrome e Safari esiste una sintassi esclusiva ma ormai desueta.

Tuttavia, è giusto mostrarne il funzionamento, giacché alcuni potrebbero trovare questa sintassi più comoda. Possiamo non definire i gradi dell’inclinazione del gradient, ma semplicemente descrivere come la diagonale dovrebbe essere, con questo codice:

 

background: gradient(linear, left bottom, right top, color-stop(% rgba()), color-stop(%rgba()),….

Vediamo un esempio per capire meglio come funziona. Modifichiamo il CSS del nostro tasto in questa maniera:

CSS

esempio1{
background: -webkit-gradient(linear,center bottom, center top, color-stop(0%,rgba(86,166,220,1)), color-stop(50%, rgba(65,148,203,1)), color-stop(100%,rgba(46,131,188,1)));
border-color: rgba(86,166,220,1);

} 

Possiamo notare che la differenza più eclatante, come già accennato, con la sintassi precedente è proprio il fatto che indichiamo il comportamento della diagonale, senza usare i gradi, ma definendo con parole il suo punto di partenza e il suo punto d’arrivo. Nelle varie sezioni “color-stop” indichiamo invece il colore e la porzione, sempre in percentuale, dello sfondo che riceverà quel colore.

Il risultato sarà questo:

CLICCA QUI!

Gradiente mezzo sfocato

Qualche volta può capitare che si voglia aggiungere al proprio sito un tocco un po’ “misterioso”. Per questo proposito, la migliore soluzione da adottare può essere l’utilizzo di un gradiente mezzo sfocato.

Come ottenerlo?

La sintassi non differisce dalle due viste in precedenza, ciò che andremo a modificare è la cifra che corrisponde alla “a” in “rgba”.

Mentre “rgb” sta per “red, green, blue”, quindi servono per ottenere il colore desiderato, “a” sta per “alpha” ed indica l’opacità del colore. L’opacità, in CSS, ha valori che vanno da 0.0 a 1.0. Il primo corrisponde a “completamente invisibile” e il secondo corrisponde a “completamente visibile”.

Quindi noi andremo ad agire proprio su quest’ultimo parametro per dare un effetto “sfocato” al nostro colore e ottenere un effetto più “misterioso”:

CSS

#esempio1{
background: linear-gradient(to bottom, rgba(94,23,123,1) 0%,rgba(94,23,123,0.99) 1%,rgba(94,23,123,0.5) 45%,rgba(94,23,123,1) 100%);
border-color: rgba(82,21,107,1);
} 

Questo sarà il risultato:

CLICCA QUI!

Da notare che nella sintassi da me fornita, invece di indicare i gradi della diagonale, ho fornito la direzione verso cui il gradiente lineare deve arrivare.

Parte da sopra, al centro viene sfocato (notare la manipolazione del parametro “alpha”, segnato in rosso) e termina nuovamente col colore completo, non sfocato, in basso.

È, dunque, possibile, oltre che settare l’inclinazione della diagonale, impostare anche la direzione da cui il gradiente deve partire o la direzione verso cui deve arrivare.

Non bisogna fare confusione con la sintassi relativa al “webkit”, in cui viene descritto per intero il comportamento della diagonale del gradient (dove parte e dove arriva), mentre qui è sottinteso.

Ovviamente, lo stesso effetto si può ottenere anche con la sintassi relativa a Chrome/Safari:

CSS

#esempio1{
background: -webkit-gradient(linear, center bottom, center top, color-stop(0%,rgba(29,81,140,1)), color-stop(1%, rgba(29,81,140,0.99)), color-stop(45%,rgba(29,81,140,0.5)), color-stop(100%,rgba(29,81,140,1)));
border-color: rgba(29,81,140,1);
}

il risultato sarà il seguente (visibile, ovviamente, solo con Chrome e Safari):

CLICCA QUI!

Conclusioni

Quello dei gradients è un argomento relativamente nuovo, giovane, che indubbiamente andrebbe ulteriormente approfondito.

Qui, mi sono limitato a offrirvi dei metodi per approcciarvi a tale tecnologia con un po’ di attenzione in più verso la sintassi. Ovviamente potete usare questa tecnica non solo per creare sfondi per tasti, ma anche sfondi per intere pagine web, banners ecc.

Tutto ciò che vi serve di più è la fantasia (che se fate questo mestiere, certamente non vi manca :) ) per ottenere belle combinazioni di colori, belle sfumature e sfocature.

Avete intenzione di usare i gradients? Vi è stata utile questa guida? Fatemi sapere nei commenti.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Da sempre appassionato di PC e tecnologia in generale, ho creato e pubblicato il mio primo sito internet a 13 anni. Non avevo mai considerato il web design e la programmazione come un lavoro vero e proprio fino all'anno scorso quando, insieme alla mia più grande amica e collega, abbiamo deciso di lanciarci nel mondo della programmazione e del web design freelance.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

13 commenti

    • Andrea Grilli
  1. Gianfranco
    • Andrea Grilli
  2. Fox
    • Andrea Grilli
    • Andrea Grilli
    • Andrea Grilli

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *