Web e code script visite 116

Come creare una sfumatura con CSS3

1 min

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di immagini che appesantiscono il caricamento della pagina.

Il termine inglese che indica la sfumatura è gradient e può essere di due tipi:

  • linear-gradient
  • radial-gradient

Per quanto riguarda la compatibilità con i vari browser, la proprietà Radient va declinata con i vari prefissi. Vediamo un semplice esempio pratico (di sfumatura con css3 lineare) con due colori, ma si possono utilizzare anche più colori, sempre divisi dalla virgola.

#sfumatura {
background: -webkit-linear-gradient(green, red); 
/* Per Safari da 5.1 a 6.0 */
background: -o-linear-gradient(green, red); 
/* Per Opera da 11.1 a 12.0 */
background: -moz-linear-gradient(green, red); 
/* Per Firefox da 3.6 a 15 */
background: linear-gradient(green, red); 
/* Sintassi standard */
}

Possiamo poi utilizzare le percentuali per decidere dove deve avvenire la sfumatura. Vediamo un altro esempio (in questo caso di sfumatura radiale) per chiarirci le idee.

#sfumatura {
background: -webkit-radial-gradient(green 15%, blue 60%); 
/* Per Safari da 5.1 a 6.0 */
background: -o-radial-gradient(green 15%, blue 60%); 
/* Per Opera da 11.1 a 12.0 */
background: -moz-radial-gradient(green 15%, blue 60%); 
/* Per Firefox da 3.6 a 15 */
background: radial-gradient(green 15%, blue 60%); 
/* Sintassi standard */
}

sfumatura

Abbiamo visto come realizzare le sfumature più semplici, ma è possibile realizzare sfumature in CSS3 molto più complicate. Potrebbe quindi tornarvi utile un comodo tool con modalità WYSIWYG.

Aprite quindi Colorzilla e sbizzarritevi. Non esagerate però o i vostri colleghi potrebbe dirvi che gli sanguinano gli occhi. 🙂

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Come trasformare un link lungo in un link breve

1 min A chi utilizza i social network o piattaforme (Twitter o YouTube)…

webdesign

Web e code script

Scoprire come sono costruiti i siti

1 min Sei un web designer “in progress”? Ti chiedi spesso come sono…

webdesign

Web e code script

Velocizzare il sito con jQuery Lazy Load Plugin

3 min Abbiamo parlato a più riprese degli strumenti per analizzare la velocità…