Filtri CSS - Effetti di testo e immagini
Puoi utilizzare i filtri CSS per aggiungere effetti speciali a testo, immagini e altri aspetti di una pagina web senza utilizzare immagini o altri elementi grafici. Filters only work on Internet Explorer 4.0. Se stai sviluppando il tuo sito per più browser, potrebbe non essere una buona idea usare i filtri CSS perché c'è la possibilità che non dia alcun vantaggio.
In questo capitolo vedremo i dettagli di ogni filtro CSS. Questi filtri potrebbero non funzionare nel tuo browser.
Alpha Channel
Il filtro Canale alfa altera l'opacità dell'oggetto, che lo fa sfumare con lo sfondo. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | opacity Livello di opacità. 0 è completamente trasparente, 100 è completamente opaco. |
| 2 | finishopacity Livello di opacità all'altra estremità dell'oggetto. |
| 3 | style La forma del gradiente di opacità. 0 = uniforme 1 = lineare 2 = radiale 3 = rettangolare |
| 4 | startX Coordinata X per l'inizio del gradiente di opacità. |
| 5 | startY Coordinata Y per l'inizio del gradiente di opacità. |
| 6 | finishX Coordinata X per il gradiente di opacità alla fine. |
| 7 | finishY Coordinata Y per la fine del gradiente di opacità. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Sfocatura movimento
Motion Blur viene utilizzato per creare immagini o testo sfocati con la direzione e la forza. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | add Vero o falso. Se vero, l'immagine viene aggiunta all'immagine sfocata; e se falso, l'immagine non viene aggiunta all'immagine sfocata. |
| 2 | direction La direzione della sfocatura, in senso orario, arrotondata a incrementi di 45 gradi. Il valore predefinito è 270 (a sinistra). 0 = in alto 45 = in alto a destra 90 = destra 135 = In basso a destra 180 = in basso 225 = in basso a sinistra 270 = Sinistra 315 = In alto a sinistra |
| 3 | strength Il numero di pixel che la sfocatura si estenderà. L'impostazione predefinita è 5 pixel. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Filtro Chroma
Il filtro Chroma viene utilizzato per rendere trasparente qualsiasi colore particolare e di solito viene utilizzato con le immagini. Puoi usarlo anche con le barre di scorrimento. Il seguente parametro può essere utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vorresti fosse trasparente. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto ombra esterna
L'ombra esterna viene utilizzata per creare un'ombra dell'oggetto con l'offset e il colore X (orizzontale) e Y (verticale) specificati.
I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore, in formato #RRGGBB, dell'ombretto. |
| 2 | offX Numero di pixel dell'ombra discendente rispetto all'oggetto visivo, lungo l'asse x. I numeri interi positivi spostano l'ombra discendente a destra, i numeri interi negativi spostano l'ombra discendente a sinistra. |
| 3 | offY Numero di pixel dell'ombra discendente rispetto all'oggetto visivo, lungo l'asse y. I numeri interi positivi spostano l'ombra discendente verso il basso, i numeri interi negativi spostano l'ombra esterna verso l'alto. |
| 4 | positive Se è vero, tutti i pixel opachi dell'oggetto hanno un'ombra. Se falso, tutti i pixel trasparenti hanno un ombretto. L'impostazione predefinita è true. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto capovolgimento
L'effetto Capovolgi viene utilizzato per creare un'immagine speculare dell'oggetto. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | FlipH Crea un'immagine speculare orizzontale |
| 2 | FlipV Crea un'immagine speculare verticale |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto bagliore
L'effetto bagliore viene utilizzato per creare un bagliore attorno all'oggetto. Se è un'immagine trasparente, viene creato un bagliore attorno ai pixel opachi di essa. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vuoi che sia il bagliore. |
| 2 | strength L'intensità del bagliore (da 1 a 255). |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto scala di grigi
L'effetto scala di grigi viene utilizzato per convertire i colori dell'oggetto in 256 sfumature di grigio. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | grayscale Converte i colori dell'oggetto in 256 sfumature di grigio. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto invertito
L'effetto Inverti viene utilizzato per mappare i colori dell'oggetto ai valori opposti nello spettro dei colori, ovvero per creare un'immagine negativa. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | Invert Mappa i colori dell'oggetto sul loro valore opposto nello spettro dei colori. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Produrrà il seguente risultato:
Effetto maschera
L'effetto maschera viene utilizzato per trasformare i pixel trasparenti in un colore specificato e rende trasparenti i pixel opachi. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che diventeranno le aree trasparenti. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Filtro ombra
Il filtro ombra viene utilizzato per creare un'ombra attenuata nella direzione e nel colore specificati. Questo è un filtro che si trova tra Dropshadow e Glow. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | color Il colore che vuoi che sia l'ombra. |
| 2 | direction La direzione della sfocatura, in senso orario, arrotondata a incrementi di 45 gradi. Il valore predefinito è 270 (a sinistra). 0 = in alto 45 = in alto a destra 90 = destra 135 = In basso a destra 180 = in basso 225 = in basso a sinistra 270 = Sinistra 315 = In alto a sinistra |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Effetto onda
L'effetto onda viene utilizzato per conferire all'oggetto una distorsione sinusoidale per farlo sembrare ondulato. I seguenti parametri possono essere utilizzati in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | add Un valore di 1 aggiunge l'immagine originale all'immagine ondulata, 0 no. |
| 2 | freq Il numero di onde. |
| 3 | light La forza della luce sull'onda (da 0 a 100). |
| 4 | phase A che grado dovrebbe iniziare l'onda sinusoidale (da 0 a 100). |
| 5 | strength L'intensità dell'effetto onda. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato:
Effetto raggi X.
L'effetto Raggi X scala i grigi e appiattisce la profondità del colore. Il seguente parametro viene utilizzato in questo filtro:
| Sr.No. | Parametro e descrizione |
|---|---|
| 1 | xray Scala di grigi e appiattisce la profondità del colore. |
Esempio
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Produrrà il seguente risultato: