Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Japanese ritual of tranquility and... slim figure!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

 

 
Cómo crear un efecto de enfoque al pasar el mouse usando CSS
 
Usemos CSS para crear el efecto de enfoque que consiste en hacer que un objeto sea más visible al pasar el mouse por encima

Si llegó a esta página, significa que lo más probable es que esté buscando nuevos efectos para insertar en las páginas web, como la creación de un efecto de enfoque al pasar el mouse.
Pero antes de comenzar, comprendamos qué es este efecto y cómo funciona.
El efecto Focus es uno de los efectos que más vemos en las páginas web, consiste en hacer más visible un objeto cuando el mouse pasa sobre otro, mejorando así la experiencia de los visitantes.

 

Cómo animar elementos HTML al pasar el mouse

 
 
Cómo crear un efecto de enfoque al pasar el mouse usando CSS
 

Comencemos creando un nuevo documento HTML y configurando la estructura de la página:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus effect on hover using CSS</title>
</head>
<body>
</body>
</html>

Una vez creado el archivo HTML, podemos proceder con los elementos principales que compondrán nuestro documento.

<body>
<div class="card-container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>


Hemos creado una macro contenedora a la que le hemos asignado la clase card-container y dos <div></div>elementos internos que serán las tarjetas sobre las que se insertará la animación Web y por tanto el efecto Focus que será activado al pasar el mouse.
Una vez creada esta primera parte en HTML, podemos pasar a escribir el código CSS para formatear los elementos HTML y definir su apariencia estética. Una vez que se completa la parte HTML, podemos continuar agregando el estilo a cada elemento creado.

Para mayor comodidad y organización procedemos a la creación de un nuevo archivo CSS en el que insertaremos el código deseado.
Lo guardamos y le ponemos un nombre para poder recordarlo fácilmente.

<link href="style.css" rel="stylesheet" type="text/css">


Una vez que el archivo 'style.css' se ha incluido en el archivo HTML, podemos proceder a compilar el archivo definiendo el estilo de todos los elementos presentes en su interior. Así que procedamos con la definición del estilo de los elementos:
.card-container{
background-color: #f1f1f1;
}

.card{ width: 50%; aspect-ratio:1; float: left; cursor: pointer; border-radius: 15px; background-color: #afb1ae; transition: opacity 230ms; }


Lo primero que debe hacer es decidir el tamaño y cuánto espacio tendrá que ocupar la tarjeta. Como se puede observar en el código anterior, la tarjeta tiene un ancho del 50% y una altura proporcional a su ancho gracias a las propiedades aspect-ratio:1;.
Además, utilizando la regla cursor:pointer; podremos cambiar automáticamente la apariencia del cursor cuando se posiciona sobre las cartas.
Luego agregamos un efecto redondeado a las esquinas a través de la propiedad border-radius.
La última línea de código CSS presente para los elementos de la tarjeta está destinada a la transición, de hecho, cuando pasamos el mouse sobre la tarjeta en 230 milisegundos, la animación de la opacidad en la tarjeta será visible.

Entraremos en detalles en breve. Ahora definamos el color de fondo de las tarjetas individuales para distinguirlas mejor. Así que agreguemos una clase que usaremos para asignar diferentes colores y crear un efecto aún más visible.
<div class="card-container">
<div class="card card1"></div>
<div class="card card2"></div>
<div class="card card3"></div>
<div class="card card4"></div>
<div class="card card5"></div>
<div class="card card6"></div>
</div>


 

CSS

.card1{ background-color: #CC0000;height:300px;}
.card2{ background-color: #0000CC;height:300px;}
.card3{ background-color: #FFFF00;height:200px;}
.card4{ background-color: #66CC00;height:200px;}
.card5{ background-color: #FF007F;height:150px;}
.card6{ background-color: #660066;height:150px;}


Una vez que hemos decidido el tamaño y la apariencia de nuestros objetos, es hora de escribir las líneas de código relacionadas con la animación del efecto Focus.
Comienzo anticipando que este es un efecto que generalmente se crea con el uso de JavaScript pero gracias a las recientes evoluciones de CSS es posible crearlo incluso de una manera más simplificada. A continuación veremos cómo es posible crear el mismo efecto para que también lo puedan conseguir aquellos que no conocen JavaScript.
Insertamos la siguiente construcción de código:
.card-container:hover .card:not(:hover){
opacity: 0.4;
}


Las líneas de código escritas arriba están relacionadas con el efecto Focus, como puede ver, estamos declarando la clase card-container insertando el efecto hover. Ahora recordemos la tarjeta de clase insertando el valor not(:hover), de esta manera será posible enfocarse solo en la tarjeta seleccionada al pasar el mouse mientras que los otros elementos sufrirán una disminución de opacidad.
Habiendo declarado varias cartas, también debemos incluir el valor: no para que cada vez que pasemos el mouse sobre una de las cartas, todos los demás elementos con la misma clase sufran el efecto Focus en la dirección opuesta y por lo tanto resalten el elemento seleccionado.
Una vez declaradas las clases y efectos que queremos aplicar, podemos proceder a la creación del efecto final, simplemente insertando la propiedad opacity y definiendo la intensidad de la opacidad, en nuestro caso 0.4.
Gracias a esta sencilla línea de código hemos impuesto a la clase card-container que al pasar el ratón sobre ella la opacidad será de 0,4, además hemos indicado en la clase card que solo la card on por el que pasará el ratón debe respetar la regla prevista.

Me parece un efecto muy bonito y muy sencillo de crear, gracias a la animación del efecto Focus podrás mejorar la experiencia de usuario de tus proyectos y aumentar el tiempo de navegación dentro de las páginas web, ofreciendo a los visitantes una mejor interacción.


 

Aquí el ejemplo completo 'style.css'

 

.card-container{
background-color: #f1f1f1;
}

.card{ width: 50%; aspect-ratio:1; float: left; cursor: pointer; border-radius: 15px; background-color: #afb1ae; transition: opacity 230ms; } .card1{ background-color: #CC0000;height:300px;} .card2{ background-color: #0000CC;height:300px;} .card3{ background-color: #FFFF00;height:200px;} .card4{ background-color: #66CC00;height:200px;} .card5{ background-color: #FF007F;height:150px;} .card6{ background-color: #660066;height:150px;} .card-container:hover .card:not(:hover){ opacity: 0.4; }


 

The html file

 


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Focus effect on hover using CSS</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="card-container"> <div class="card card1"></div> <div class="card card2"></div> <div class="card card3"></div> <div class="card card4"></div> <div class="card card5"></div> <div class="card card6"></div> </div> </div> </body> </html>

Disfrutar

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo crear un menú con css y javascript

Cómo se redondea el radio del borde en CSS?

Cómo crear un formulario de registro con HTML y CSS

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

A MALE SOLUTION TO PROSTATE PROBLEMS!