blur() css
blur es una función de css que genera un desenfoque gaussiano esto es un efecto de suavidad o difuminado. En otras palabras blur genera un efecto borroso más o menos.😅
Yo probé esto en una imagen, texto y elemento div.
Nota:
Cuando blur esta en 0 no se efectúa el desenfoque.
p {
filter: blur(0);
}
3 Ejemplos blur
Ejmeplo #1
Desenfoque o efecto de blur en texto.
h1 {
color: white;
filter: blur(0px);
text-align: center;
font-family: 'Belanosima', sans-serif;
font-family: 'Cherry Bomb One', cursive;
font-family: 'Lumanosimo', cursive;
font-family: 'Righteous', cursive;
}
Ejemplo #2
Desenfoque o efecto blur en una imagen.
img {
border-radius: 50vw;
height: 300px;
filter: blur(4px);
}
Ejemplo #3
Desenfoque o efecto blur en un elemento.
h1 {
color: white;
text-align: center;
font-family: 'Belanosima', sans-serif;
font-family: 'Cherry Bomb One', cursive;
font-family: 'Lumanosimo', cursive;
font-family: 'Righteous', cursive;
filter: blur(2px);
}
Antes de hacer este post realmente creí que blur() solo funcionaba para texto, si estaba equivocada. 😅
Vídeo del archivo con desenfoque
Aquí les dejo el enlace de este archivo con los 3 ejemplos.
