English Deutsch Español Italiano Русский Svenska 日本語

CSS3 Gradientee

Le sfumature sono alcune dei migliori effetti che si possono aggiungere a siti web informativi, in quanto non danno fastidio. È possibile aggiungere gradienti per Safari, Chrome e Firefox, questo arriverà a coprire oltre la metà dei vostri ospiti per alcuni tipi di siti.

Ecco un'istantanea di Firefox che mostra i gradienti CSS3:


CSS3 Gradientes


La sintassi per CSS3 Gradientei lineari varia tra le versioni di Firefox e Safari / Chrome.
   Firefox gradienti lineari:
-moz-linear-gradient(<point> || <angle>, color-stops)
   Safari, Chrome gradienti lineari
-webkit-gradient(linear, <point>, color-stops )

* Punto o angolo: Questo è utilizzato per definire il punto iniziale della sfumatura. Il valore può essere una percentuale (%), in pixel, o "left", "center" o "right" per orizzontale e "top", "center" o "bottom" per il posizionamento verticale. Se una posizione orizzontale o verticale non è specificata, il valore di default è "center", o al 50%. In Firefox, i valori degli angoli sono accettati, come ad esempio 45deg.
* Color-stop: I colori in cui il gradiente passa da e per. Se più di due colori vengono specificati senza un valore esplicito di stop per ciascun colore, il gradiente passerà da uno all'altro in modo uniforme fino al colore finale di arresto.
      - In Firefox, ogni interruzione di colore segue la sintassi: <Farbe> [ <Prozent> | <Länge> ].Se un valore percentuale (da 0 a 100%) o lunghezza (0-1,0) è definito dopo il nome del colore, il colore precedente svanirà verso quel colore di fermata in quel punto di arresto. Se nessun valore è presente, il colore si dissolve gradualmente dal colore iniziale verso il colore finale.
      - In Safari, ogni interruzione di colore segue la sintassi: color-stop (valore, colore). .Il valore di arresto è una percentuale (da 0 a 100%) o valore di lunghezza (0-1,0), o da (colore) e (colore). Le ultime due sono funzioni stenografiche equivalenti a colori-stop (0, colore) e il colore-stop (1.0, colore)..

Il codice riportato di seguito viene generato per il gradiente CSS3 in CSS3Menu:
background-image: -moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));
background-image: -webkit-gradient(linear,50% 0%,50% 100%, from(rgba(255,255,255,0.38)), to(rgba(255,255,255,0.16)));

Gradient CSS è supportato in FF3.6 +, Opera 10.50, Safari 2 + e Google Chrome.

Vedi anche:
CSS3 Angoli arrotondati, CSS3 Ombra, CSS3 Animazione, CSS3 Text Ombra, CSS3 Gradientee, CSS3 Transition




Download




Altri modelli