CSS3 滤镜(Filters)

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

了解CSS3滤镜功能

在本章中，我们将讨论CSS3中引入的滤镜效果，您可以在将滤镜效果绘制到网页上之前，对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。

可以使用CSS3 filter属性将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。以下是一个使用示例：

filter:	　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

警告：当前任何版本的Internet Explorer都不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但该功能已被弃用。

模糊效果

Photoshop中可以使用blur()功能应用类似于高斯模糊效果，该函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数，则使用值0。

img {
　　　　-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
　　　　filter: blur(5px);
}

—Come mostrato nell'esempio sopra:

Imposta la luminosità dell'immagine

La funzione brightness() può essere utilizzata per impostare la luminosità dell'immagine. Il valore 0% crea un'immagine completamente nera. I valori 100% o 1 mantengono l'immagine invariata. Gli altri valori sono moltiplicatori lineari dell'effetto.

Puoi anche impostare la luminosità a valori superiori al 100%, il che può rendere l'immagine più luminosa. Se il parametro quantitativo mancante, viene utilizzato il valore 1. Non sono ammessi valori negativi.

img.bright {
　　　　-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
　　　　filter: brightness(200%);
}
img.dark {
　　　　-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
　　　　filter: brightness(50%);
}

—Come mostrato nell'esempio sopra:

Regola la contrasto dell'immagine

La funzione contrast() viene utilizzata per regolare la contrasto dell'immagine. Il valore 0% crea un'immagine completamente nera. I valori 100% o 1 mantengono l'immagine invariata. È anche possibile utilizzare valori superiori al 100%, fornendo risultati di contrasto inferiore. Se il parametro quantitativo mancante o omesso, viene utilizzato il valore 1.

img.bright {
　　　　-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
　　　　filter: contrast(200%);
}
img.dim {
　　　　-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
　　　　filter: contrast(50%);
}

—Come mostrato nell'esempio sopra:

Aggiungi un'ombra all'immagine

Puoi utilizzare la funzione drop-shadow() per applicare l'effetto ombra su immagini come Photoshop. Questa funzione è simile abox-shadowproprietà.

img {
　　　　-webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
　　　　filter: drop-shadow(4px 4px 10px orange);
}

—Come mostrato nell'esempio sopra:

Converti l'immagine in scala di grigio

Utilizzando la funzione grayscale() è possibile convertire l'immagine in scala di grigio. Un valore del 100% rappresenta un'immagine completamente in scala di grigio. Un valore del 0% mantiene l'immagine invariata. I valori tra 0% e 100% sono moltiplicati linearmente per l'effetto. Se manca il parametro quantità, viene utilizzato il valore 0.

img.complete-gray {
　　　　-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
　　　　filter: grayscale(100%);
}
img.partial-gray {
　　　　-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
　　　　filter: grayscale(50%);
}

—Come mostrato nell'esempio sopra:

Applica una rotazione di tonalità sull'immagine

La funzione hue-rotate() applica una rotazione di tonalità sull'immagine. Il parametro passato definisce l'angolo di rotazione attorno alla corona di colori del campione dell'immagine. Un valore di 0deg mantiene l'immagine invariata. Se il parametro angle manca del parametro spaziale, viene utilizzato il valore 0deg. Non c'è un valore massimo, l'effetto del valore superiore si ripete ogni 360deg.

img.hue-normal {
　　　　-webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
　　　　filter: hue-rotate(150deg);
}
img.hue-wrap {
　　　　-webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
　　　　filter: hue-rotate(480deg);
}

—Come mostrato nell'esempio sopra:

Effetto di inversione

È possibile applicare l'effetto di inversione, come quello di Photoshop, alle immagini utilizzando la funzione invert(). Un valore di 100% o 1 inverte completamente. Un valore di 0% mantiene l'input invariato. Tra 0% e 100% è applicato un moltiplicatore lineare dell'effetto. Se manca il parametro 'amount', viene utilizzato il valore 0. Non sono ammessi valori negativi.

img.partially-inverted {
　　　　-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
　　　　filter: invert(80%);
}
img.fully-inverted {
　　　　-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
　　　　filter: invert(100%);
}

—Come mostrato nell'esempio sopra:

Applica opacità all'immagine

La funzione opacity() può essere utilizzata per aggiungere trasparenza alle immagini. Il valore 0% rappresenta la trasparenza completa. Il valore 100% o 1 mantiene l'immagine invariata. Tra il valore 0% e 100% è applicato un moltiplicatore lineare dell'effetto. Se manca il parametro 'amount', viene utilizzato il valore 1. Questa funzione è simile aopacityproprietà.

img {
　　　　-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
　　　　filter: opacity(80%);
}

—Come mostrato nell'esempio sopra:

Applica l'effetto marrone all'immagine

La funzione sepia() trasforma l'immagine in tonalità marrone. Il valore 100% o 1 rappresenta il marrone più scuro. Il valore 0% mantiene l'immagine invariata. Tra il valore 0% e 100% è applicato un moltiplicatore lineare dell'effetto. Se manca il parametro 'amount', viene utilizzato il valore 0.

img.complete-sepia {
　　　　-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
　　　　filter: sepia(100%);
}
img.partial-sepia {
　　　　-webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
　　　　filter:　sepia(30%);
}

—Come mostrato nell'esempio sopra:

Regola la saturazione dell'immagine

La funzione saturate() può essere utilizzata per regolare la saturazione dell'immagine. Il valore 0% rappresenta una completa insaturazione. Il valore 100% mantiene l'immagine invariata. Altri valori sono multiplicatori lineari dell'effetto. È anche possibile utilizzare valori superiori al 100% per ottenere risultati super-saturati. Se manca il parametro 'amount', viene utilizzato il valore 1.

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—Come mostrato nell'esempio sopra: