Dentro del desarrollo web existen una cantidad inmensa de efectos, una de ellas es el efecto Blur en CSS, el cual básicamente consiste en desenfocar una sección en específica de la página web, para que se vea como borroso, es muy similar como el efecto que tienen las cámaras cuando se desenfoca el fondo de una imagen.
Éste efecto se aplica a las páginas web para que de una sensación de qué te estás enfocando en una sección en específico, también es posible definir que se aplique el efecto blur en CSS dependiendo de la zona en la que se esté interactuando o dependiendo del lugar donde se encuentra el puntero del Mouse.
Creación de archivos para el efecto blur en CSS
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN HTML y CSS? 👊
Entonces te recomiendo tomar este curso de HTML y CSS donde aprenderás estos lenguajes desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Creación de archivo HTML
Primero que nada antes de aplicar el efecto Blur en CSS, es necesario crear un archivo de HTML el cual va a contener la información a la cual se le va a aplicar el efecto, este archivo HTML en este caso va a tener una simple información básica, como de una imagen y un título que va a estar centrado en la página para poder ver el efecto.
A continuación se presenta el código que va a ser utilizado para este ejemplo, al cual obviamente se pueden realizar tantas modificaciones como se desee.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header class="header">
<div class="header-content">
<img src="img-8.png" alt="IMG test" class="logo" >
<h3 class="title">My web page</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing
Lorem ipsum dolor sit amet, consectetur adipisicing</p>
</div>
</header>
</body>
</html>
Si no sabes cómo crear un archivo HTML o cómo estructurarlo de manera correcta, te recomiendo que visites esta página donde explico cómo hacer un archivo HTML desde cero para construir una página web.
Obviamente que por defecto si sólo se deja este archivo HTML se va a mostrar la información sin ningún estilo ni ningún color y sin ningún tipo de efecto como en la siguiente imagen.
Cómo se puede observar en la imagen anterior, si no se la aplica ningún efecto ni ningún estilo CSS, la página web no sería atractiva para ninguna persona, por lo cual es importante aplicarle unos efectos para que se vea más interesante y en este caso el efecto blur en CSS.
Creación de archivo CSS
Para poder aplicar el efecto del blur, es importante crear un archivo CSS en el cual se lo van a indicar todas las instrucciones para que se realice este efecto, el archivo se puede llamar con el nombre que sea, pero es importante que contenga al final la extensión .css para especificar que se trata de este archivo.
Una vez que se creó el archivo CSS lo siguiente que hay que hacer es definir en nuestro archivo HTML cuál archivo es el que vamos a escribir los estilos, para el cual se debe agregar una etiqueta en el fichero HTML, como la que se presenta continuación.
<link rel="stylesheet" href="style2.css">
ahora si procederemos a empezar a realizar los estilos dentro de nuestro archivo CSS.
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Estilos en el archivo CSS
Antes que aplicar el efecto blur en CSS, se van a aplicar unos efectos generales a todo el cuerpo de la página, primero se le va asignar un color de fondo negro con un opacidad del 80%, también se le va a colocar un margen del 0% y un color de letra en blanco, además se le va a definir un tipo de letra Arial.
body{
background: rgba(0,0,0,.8);
margin: 0;
color: #fff;
font-family: arial, sans-serif;
}
Ahora se van a aplicar unos estilos al contenido principal, primeramente a la imagen se le va a definir un ancho específico de 200 pixeles para que la imagen no sea muy grande, después al título se le va asignar el tipo de letra por defecto y el tamaño de letra un poco más grande, al igual que al texto se le va a aplicar un espaciado entre las palabras y un margen superior para que se separe con el título.
.header-content img{
width: 200px;
}
.title{
font-family: serif;
font-size: 2rem;
}
.text{
line-height: 1.7;
margin-top: 1rem;
}
A todo el contenido principal que se le va a aplicar el efecto del Blur en CSS, antes de aplicarle el efecto, se le van a asignar todas las siguientes estilos que va a contener, que son los márgenes se va a centrar, se le va asignar un ancho y un alto específico, también se le va a definir una transición de 100 ms que va a ser la que va a ser usada para el efecto blur de desenfoque y enfoque, es decir que va a tardar un segundo en enfocar el contenido y un segundo en desenfocar.
.header-content{
position: absolute;
z-index: 1;
top: 10%;
left: 50%;
margin-top: 105px;
margin-left: -145px;
text-align: center;
width: 300px;
height: 350px;
transition: all 1000ms;
}
Por último se va a aplicar el efecto del bluer en CSS, para esto se le va a ser cuando la selección del contenido se encuentre en :hover, es decir cuando el cursor se encuentre dentro de este contenido. Simplemente usando la sentencia Filter se va a aplicar el efecto blur en CSS de la cantidad de pixeles que se quiera colocar, entre más pixeles se coloque el desenfoque va a ser mayor.
.header .header-content:hover{
filter: blur(2px);
-webkit-filter: blur(2px);
}
Nuestro resultado final va a ser el siguiente, primero se muestra la imagen como se ve cuando no hay un efecto blur en CSS, y después se muestra cuando se le pase el cursor por encima y se encuentra el efecto blur en CSS.
Claro que todos los estilos se pueden modificar para que sean diferentes y se vea de una mejor manera, además de que realizar el efecto Blur en CSS no es lo único que se puede hacer, existe una gran cantidad de defectos y estilos que se le pueden aplicar a una página web, los cuales los puedes encontrar en la siguiente página.
