8 febrero, 2024
Efecto Glassmorphism Mejora el diseño de tu página web
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.
Suscríbete a nuestro canal en Youtube
SuscríbirseEl 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.
Leido 516 veces
HTML
Curso de HTML Básico - Aprende a crear páginas web desde cero
Descarga del código fuente
USD 0.00
