nei css2 avevamo gia' la possibilita di usare filter, ma solo in Internet Explorer.
filter viene molto usato insieme ad alpha per craere opacita' una sintassi abbastanza semplice, ma ancora piu semplice in tutti gli altri browser
pero' in internet explorer si poteva creare anche molto piu coi filter, come invertire i colori, creare sfondi gradienti, ecc... per colpa delle sintassi troppo complicate, queste vennero quasi completamente ignorate. esempio per sfondo gradiente in IE:
ma oggi (per adesso solo su chrome e safari) abbiamo il nuovo filter.
prendiamo un immagine cavia, per esempio il mio avatar:
bene, adesso divertiamoci coi filter
sfochiamo
cambiamo i colori
saturiamo (0%=grigio | 100%=normale | 200%=colori rafforzati)
ci sono alter proprieta come invert, seppia, grayscale
ma credo che questi sono i piu importanti. e probabilmente la cosa che vi interessano di piu
queste proprieta supportano le transizioni e sono applicabili ad ogni oggetto, (anche video)
Edited by flexlex - 30/4/2014, 00:08
filter viene molto usato insieme ad alpha per craere opacita'
CODICE
filter:alpha(opacity=40)
CODICE
opacity:0.4
pero' in internet explorer si poteva creare anche molto piu coi filter, come invertire i colori, creare sfondi gradienti, ecc... per colpa delle sintassi troppo complicate, queste vennero quasi completamente ignorate. esempio per sfondo gradiente in IE:
CODICE
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
ma oggi (per adesso solo su chrome e safari) abbiamo il nuovo filter.
prendiamo un immagine cavia, per esempio il mio avatar:
bene, adesso divertiamoci coi filter
sfochiamo
CODICE
<img style="-webkit-filter:blur(5px)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >
cambiamo i colori
CODICE
<img style="-webkit-filter:hue-rotate(180deg)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >
saturiamo (0%=grigio | 100%=normale | 200%=colori rafforzati)
CODICE
<img style="-webkit-filter:saturate(0%)" src="http://flexylex95.altervista.org/up/gif_avatar.gif" >
ci sono alter proprieta come invert, seppia, grayscale
ma credo che questi sono i piu importanti. e probabilmente la cosa che vi interessano di piu
queste proprieta supportano le transizioni e sono applicabili ad ogni oggetto, (anche video)
Edited by flexlex - 30/4/2014, 00:08
.
