Glassmorphism com CSS
1a atrás
Glassmorphism é um conceito de UI que imita as características do vidro. Tem sido muito usado nos designs da Apple e Microsoft.
Propriedades
- Translucidez: os objetos atrás do elemento com glassmorphismo podem ser visíveis, mas não totalmente, geralmente apresentam um efeito embaçado, como se tivesse sendo visto através do vidro.
- Elevação: para dar a ideia de diferentes elevações são usados sombreamentos nos elementos.
- Background: o background deve destacar o efeito vitrificado.
Implementação
Primeiramente, no seu HTML, vamos estilizar o body:
body {
background-image: url('https://images.unsplash.com/photo-1579546929662-711aa81148cf?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
width: 100%;
}
No #CSS acima, definimos o tamanho e background da página. Agora precisamos adicionar no HTML o elemento que vai receber o glassmorphism:
<div class="card">
<h1>Exemplo de glassmorphism</h1>
<p>Esse elemento é um exemplo de como utilizar glassmorphism.</p>
</div>
E o seguinte CSS:
.card {
backdrop-filter: blur(32px);
background-color: rgba(255, 255, 255, 0.25);
border-radius: 1em;
left: 50%;
padding: 1em;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
O resultado será o seguinte:
Glassmorphism CSS Generator
Se você quer uma maneira mais fácil de gerar seus CSS de glassmorphismo você pode usar uma ferramenta online para isso. Existem várias, um exemplo é:
glassmorphism-generator
## Build Setup
Comentários (0)