css3-gradient-buttons

Lea Verou in questo post ha spiegato una tecnica interessante per applicare semplici pattern su elementi html sfruttando CSS3.

La tecnica si basa sull’attributo color-stop che viene specificato per il gradiente: indicando due color-stop con la stessa posizione, è possibile ottenere un cambio improvviso di colore, anziché una graduale sfumatura.
Con questa tecnica, l’autrice del post mostra come ottenere pattern più complessi, come quello in stile picnic o a scacchiera.
A parte il risultato finale, il post è interessante anche per alcune scelte della webdesigner, come l’utilizzo di un color-stop trasparente, per sfruttare il colore di sfondo come fallback per i browser che non supportano i gradienti.

In questo Cross Browser CSS gradient buttons Red Team Design mostra come sfruttare la tecnica dei gradient pattern appena vista, insieme alle altre proprietà (RGBA color mode, Box shadow, Text shadow, Rounded corners) che si usano di solito per creare pulsanti con CSS3, per ottenere un risultato abbastanza particolare (proprio per via dei pattern).


Anche in questo caso grande attenzione alla compatibilità con i browser, visto l’utilizzo massiccio di proprietà non sempre supportate.

Ecco i due link:

This entry was posted in Webdesigner and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>