Creare sfondi accattivanti tramite CSS: i gradients

Transcript

1 Creare sfondi accattivanti tramite : 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. I gradients vengono riconosciuti dal 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 : Tra le parentesi vanno inseriti i vari attributi in questa maniera: 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 1 / 5

2 id per poter settare dimensioni e gradient: HTML Nel, 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: 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: 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: Questo sarà il risultato: 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: 2 / 5

3 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: Vediamo un esempio per capire meglio come funziona. Modifichiamo il del nostro tasto in questa maniera: 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 colorstop indichiamo invece il colore e la porzione, sempre in percentuale, dello sfondo che riceverà quel colore. Il risultato sarà questo: 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. 3 / 5

4 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, 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 : Questo sarà il risultato: 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: il risultato sarà il seguente (visibile, ovviamente, solo con Chrome e Safari): 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 4 / 5

5 Powered by TCPDF ( Your Inspiration Web 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. 5 / 5