Warning, world wide web development

Alcuni filtri CSS più o meno famosi.


Ecco alcuni filtri per fogli di stile o CSS da poter utilizzare a proprio comodo nelle proprie pagine web. Alcuni sono più conosciuti e altri meno nell'ambito dello sviluppo di siti internet. Gli effetti elencati sono i seguenti: Alpha, Blur, Chroma, Drop, Shadow, Mask, Invert, Xray, Glow, Greyscale,FlipH, FlipV e Wave. Per ognuno di questi è definito un esempio dei tag usati, della sintassi e delle opzioni che è possibile specificare. Nel dettaglio: Alpha Altera l'opacità dell'oggetto, facendolo diventare trasparente sullo sfondo.

Alpha <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">Alpha</span>
  <img src="image.gif" width="88" height="31" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">
opacity Livello di opacità. 0 è trasparente, 100 è opaco.
finishopacity Livello di opacità dall'altra parte dell'ogetto.
style La forma del gradiente di opacità .0 = uniforme 1 = lineare 2 = radiale 3 =rettangolare
startX X coordinata per il gradiente di opacità all'inizio.
startY Y coordinata per il gradiente di opacità all'inizio.
finishX X coordinata per il gradiente di opacità alla fine.
finishY Y coordinata per il gradiente di opacità alla fine.

Blur Applica un effetto blur definendo forza e direzione. Un interessante mouseover per i link!
Blur <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:blur(add=0, direction=200, strength=5)">Blur</span>
  <img src="image.gif" width="88" height="31" style="filter:blur(add=0, direction=200, strength=5)">
add True or false. Se true, l'immgagine è aggiunta all'immagine con effetto blur; se false, questo non avviente.
direction Default value 270 (left).0 = top 45 = top right 90 = right 135 = bottom right 180 = bottom 225 = bottom left 270 = left 315 = top left
strength Il numero di pixels che estende l'effetto blur. Di default = 5

Chroma Definisce un colore come trasparente. Usato di solito con le immagini e lavora su scrollbars e backgrounds. Usato anche per fixare la trasparenza su IE6.
Chroma <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:chroma(color=#000000)">Chroma</span>
  <img src="image.gif" width="88" height="31" style="filter:chroma(color=#A57B94)">
color Il colore che vuoi sia trasparente

DropShadow Crea l'ombra di un tuo oggetto specificando l'asse X (orizzontale) e Y (verticale) offset e colori.
Drop <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:dropshadow(color=#9BAD71, offx=5, offy=5)">Shadow</span>
  <img src="image.gif" width="88" height="31" style="filter:dropshadow(color=#9BAD71, offx=5, offy=5)">
color Il colore in formato #RRGGBB dell'ombra a cascata dropshadow.
offX La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse x. Interi positici spostano l'ombra a destra, negativi a sinistra.
offY La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse y. Interi positici spostano l'ombra a cascata giù, negativi su.
positive Se true, tutti i pixel opachi dell'oggetto avranno un ombra. Se false, tutti i pixel trasparenti avranno un ombra a cascata. Il valore di defaut è true.

FlipH Crea una immagine riflessa dell'oggetto orizzontalmente.
FlipH <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:fliph">FlipH</span>
  <img src="image.gif" width="88" height="31" style="filter:fliph">

FlipV Crea una immagine riflessa dell'oggetto verticalmente.
FlipV <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:flipv">FlipV</span>
  <img src="image.gif" width="88" height="31" style="filter:flipv">

Glow Crea un effetto calore intorno all'oggetto. Se esso è una immagine trasparente , il guanto è creato intorno ai suoi pixel opachi.
Glow <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:glow(color=#9BAD71, strength=7)">Glow</span>
  <img src="image.gif" width="88" height="31" style="filter:glow(color=#9BAD71, strength=7)">
color Il colore che vuoi che sia contornato.
strength L'intensità del glow (da 1 a 255).

Grayscale Converte i colori in scala di grigi.
Grayscale <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:gray">Grayscale</span>
  <img src="image.gif" width="88" height="31" style="filter:gray">

Invert Crea un "negativo." dell'oggetto.
Invert <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#CC0000; font-weight:bold; filter:invert">Invert</span>
  <img src="image.gif" width="88" height="31" style="filter:invert">

Mask Trasforma i pixel selezionati di un determinato colore e i pixel trasparenti li rende opachi.
Mask <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:mask(color=#000000)">Mask</span>
  <img src="image.gif" width="88" height="31" style="filter:mask(color=#000000)">
color Il colore che vogliamo maskeri le aree trasparenti.

Shadow Crea un ombra attenuata nella direzione e nei colori specificati.E' un incrocio tra Dropshadow e Glow.
Shadow <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:shadow(color=#9BAD71, direction=225)">Shadow</span>
  <img src="image.gif" width="88" height="31" style="filter:shadow(color=#9BAD71, direction=225)">
color Il colore al quale applicare l'ombra.
direction La direzione nella quale vuoi che vada l'ombra, espressa in termini di gradi a partire dalla verticale. Il valore di default è 225 gradi (bottom left).0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left

Wave Da una distorsione sinusoidale all'oggetto creando una forma ad onda o wave.
Wave <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">Wave</span>
  <img src="image.gif" width="88" height="31" style="filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">
add A value of 1 adds the original image to the waved image, 0 does not.
freq The number of waves.
light The strength of the light on the wave (from 0 to 100).
phase At what degree the sine wave should start (from 0 to 100).
strength The intensity of the wave effect.

Xray Scala di grigi e appiattimento dei colori .
XRay <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:xray">XRay</span>
  <img src="image.gif" width="88" height="31" style="filter:xray">

Articoli correlati

  • Vulnerabilità XSS in Google Docs.
  • Esecuzione di codice arbitrario attraverso il protocollo MHTML e Internet Explorer 6/7
  • Il temibile potere di Google incombe sulla nostra Privacy
  • VULNERABILITA’ LINUX
  • OpenSource Windows
  • Seguici Tramite Feed Rss Se ti è piaciuto questo articolo, seguici


    Scrivi un commento

    Close
    E-mail It