La barra de navegación es el componente principal de cualquier sitio web a través del cual el usuario puede navegar a través de todos los componentes y secciones de un sitio. Por eso es muy importante tener una barra o menú de navegación bien diseñado. Así que hoy veremos una barra de navegación en la que todos los elementos se vuelven borrosos excepto el elemento flotante.
Enfoque: el enfoque es usar la función de desenfoque() y el selector de desplazamiento para desenfocar todos los elementos excepto el que se encuentra sobre el cursor .
Código HTML: aquí, hemos creado una lista desordenada simple con 3 elementos de lista.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blurred Menu Design</title> </head> <body> <ul> <li>Home</li> <li>About</li> <li>Contact Us</li> </ul> </body> </html>
Código CSS: Para CSS, siga estos pasos.
- Primero, aplicamos un fondo y lo alineamos sobre una lista desordenada en forma de barra de navegación usando flexbox.
- Luego, usamos el cursor sobre ul con un desenfoque de 2 px, lo que hace que cada elemento de la lista se desenfoque cuando pasamos el cursor sobre ul.
- Ahora hemos utilizado el desplazamiento sobre li con el desenfoque establecido en 0 para desenfocar el elemento de la lista que se encuentra sobre el cursor.
Ahora, para aquellos que no entienden el concepto, traten de visualizar dos cajas. El más pequeño representa li que está envuelto dentro de la caja más grande que representa ul. Ahora, nuestra primera selección de desplazamiento sobre ul hace que todo el li se desenfoque como no lo hemos hecho hasta que ingresamos al límite del cuadro más pequeño y, cuando ingresamos al límite del cuadro más pequeño, activamos la selección de desplazamiento de li, lo que hace que el elemento de la lista flotante no se vea borroso. .
CSS
body{
background: green;
font-family:Arial, Helvetica, sans-serif;
}
ul{
position: absolute;
top:40%;
left:40%;
display: flex;
}
ul li{
list-style: none;
position: relative;
display: block;
margin: 10px;
}
ul:hover li{
opacity: .2;
filter: blur(2px);
}
ul li:hover{
opacity: 1;
filter:blur(0px);
}
Código Completo: Es la combinación de los dos códigos anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blured Menu Design</title>
<style>
body{
background: green;
font-family:Arial, Helvetica, sans-serif;
}
ul{
position: absolute;
top:40%;
left:40%;
display: flex;
}
ul li{
list-style: none;
position: relative;
display: block;
margin: 10px;
}
ul:hover li{
opacity: .2;
filter: blur(2px);
}
ul li:hover{
opacity: 1;
filter:blur(0px);
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA