Mappa del sito
Il filtro blur - Blur filter
Visita anche Risorse per i webmasterarchivio di risorse per la creazione di pagine web
Il filtro blur (blur filter) trova spesso applicazione nella prima zona visibile di una pagina web perchè crea suggestivi e attrattivi effetti grafici. Spesso viene utilizzato per portare in risalto il titolo della pagina.
Le regole di stile per applicare questo filtro nel modo desiderato non sono sempre immediatamente intuibili e comprensibili.
Vediamo di spiegarle in modo semplice e chiaro per tutti.
La funzione blur
La funzione css blur() crea una sfocatura gaussiana (da Gauss suo creatore) sull'elemento a cui viene applicata.Il raggio della sfocatura può avere valori differenti, solitamente espressi in px. A valore più alto corrisponde sfocatura maggiore.
filter e backdrop-filter, differenza
Abbiamo un div genitore e un div figlio. Il div genitore ha un'immagine di background.
<style>
.container {
background-image: url('background.jpg');
background-size: cover;
}
</style>
<div class="container">
<div class="content"></div>
</div>
.container {
background-image: url('background.jpg');
background-size: cover;
}
</style>
<div class="container">
<div class="content"></div>
</div>
Se applichamo la regola filter: blur(2px) al div genitore, otterremo una sfocatura dell'immagine di sfondo e la stessa sfocatura verrà applicata anche al contenuto (testo o immagine) del div figlio.
.container {
background-image: url('background.jpg');
background-size: cover;
-webkit-filter: blur(2px);
filter: blur(2px);
}
background-image: url('background.jpg');
background-size: cover;
-webkit-filter: blur(2px);
filter: blur(2px);
}
Identica situazione di prima, ma questa volta applichiamo la regola backdrop-filter: blur(2px) al div figlio, lasciando l'immagine di sfondo al div padre. L'immagine di sfondo risulterà sfocata come prima, ma il contenuto del div figlio sarà nitido e perfettamente a fuoco.
.container {
background-image: url('background.jpg');
background-size: cover;
}
.content {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
background-image: url('background.jpg');
background-size: cover;
}
.content {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
Conclusione
Queste sono le indicazioni di base per comprendere l'effetto blur e la sua applicazione. Naturalmente, a queste regole possono essere abbinate altre regole per ottenere effetti avanzati.Nella sezione dedicata alla grafica di "Strumenti per i webmaster" puoi trovare altre soluzioni per ottenere effetti speciali.
Continua con
Leggi tutto