HTML + CSS
Efecto Glassmorphism Mejora el diseño de tu página web
8 febrero, 2024
•
2,997 lecturas
El efecto Glassmorphism es una tendencia de diseño que busca imitar la apariencia del vidrio translúcido. Se logra utilizando fondos semitransparentes, desenfoque y sombras para crear una sensación de profundidad y transparencia. A continuación, te mostraré un ejemplo básico de cómo implementar el efecto Glassmorphism en HTML y CSS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efecto Glassmorphism en CSS</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #D9E3F0, #F0F0F0);
}
.card {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.15); /* Fondo semitransparente */
backdrop-filter: blur(10px); /* Desenfoque del fondo */
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2); /* Borde semitransparente */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Sombra */
backdrop-filter: blur(15px);
padding: 20px;
}
h1 {
color: #fff;
text-align: center;
}
p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<h1>Efecto Glassmorphism</h1>
<p>Este es un ejemplo de Glassmorphism utilizando CSS.</p>
</div>
</body>
</html>
En este ejemplo, creamos una tarjeta (div con la clase .card) que representa el efecto Glassmorphism. Aquí hay algunas cosas clave a tener en cuenta:
background: Utilizamos un color de fondo semitransparente (rgba(255, 255, 255, 0.15)) para simular la transparencia del vidrio.backdrop-filter: Aplicamos un filtro de desenfoque al fondo (blur(10px)) para dar una sensación de profundidad y translucidez.box-shadow: Agregamos una sombra (box-shadow) para realzar el efecto de profundidad.border: El borde también puede ser semitransparente para complementar el efecto.- Dentro de la tarjeta, agregamos contenido (un título
<h1>y un párrafo<p>) para demostrar cómo se puede aplicar el efecto en diferentes elementos.
Este es solo un ejemplo básico. Puedes ajustar los valores de los colores, desenfoque y sombras según tus preferencias para crear diferentes variaciones del efecto Glassmorphism.
Tutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
