Método 1
O primeiro método requer um pouco mais de CSS do que a segunda abordagem que veremos.
Comece criando um
.container. Usaremos isso para representar nosso painel de vidro fosco. Em seguida, aplique uma imagem de plano de fundo ao elemento do corpo. Para este fundo, você precisará aplicar:
1 |
body { |
2 |
background-attachment: fixed; |
3 |
}
|
Fazemos isso porque os filhos do corpo herdam essa imagem de fundo e queremos mantê-la no mesmo tamanho.
Crie um pseudo elemento em nosso .container, é isso que vai nos dar o vidro embaçado. Assim, aplicamos o seguinte:
1 |
.container:before { |
2 |
content: ''; |
3 |
position: absolute; |
4 |
top: 0; |
5 |
left: 0; |
6 |
right: 0; |
7 |
bottom: 0; |
8 |
}
|
Isso nos dá um elemento que cobre o elemento container. Agora é hora de adicionar um pouco de cor, o que faremos usando um box-shadow:
1 |
.container:before { |
2 |
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); |
3 |
}
|
E para nos dar um efeito fosco, para desfocar o vidro, adicionamos um filtro de desfoque:
1 |
.container:before { |
2 |
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); |
3 |
filter: blur(10px); |
4 |
}
|
Isso nos dá a maior parte do que queremos, mas ainda não está lá. Agora precisamos (como discutimos anteriormente) definir um plano de fundo herdado para o pseudoelemento e seu pai.
1 |
.container { |
2 |
background: inherit; |
3 |
}
|
4 |
|
5 |
.container:before { |
6 |
background: inherit; |
7 |
}
|
Com mais alguns ajustes opcionais, aqui está o resultado final:
Método 2
Agora, um método alternativo de vidro de desfoque que usa um estilo de filtro de fundo CSS um pouco menos.
Começamos com o mesmo .container e aplique a mesma imagem de plano de fundo da capa ao elemento do corpo.
Em seguida, voltamos nossa atenção para uma propriedade CSS chamada backdrop-filter. Começamos adicionando alguns estilos de exibição ao nosso .container, incluindo uma cor de fundo que quisermos (vamos optar por um branco pálido):
1 |
.container { |
2 |
background-color: rgba(255, 255, 255, .15); |
3 |
}
|
Em seguida, adicionamos o filtro (você pode querer verificar prefixo automático se estiver no Codepen).
1 |
.container { |
2 |
background-color: rgba(255, 255, 255, .15); |
3 |
backdrop-filter: blur(5px); |
4 |
}
|
É isso! Brinque com o valor do desfoque para obter o efeito desejado, mas não é necessário mais nada. Aqui está o que isso lhe dá:
Conclusão
Se você está procurando um efeito de fundo de vidro que possa usar em uma página da Web, esses dois métodos são um ótimo lugar para começar.
Como mencionado, o suporte do navegador para ambos os métodos é sólido hoje em dia, portanto, como um desfoque de fundo CSS, esse efeito de vidro fosco pode ser uma maneira muito boa de aprimorar as interfaces do usuário e se inclinar para o vidromorfismo.
Mais excelentes tutoriais de CSS
Se você gostou deste tutorial, há muito mais para navegar e ler no Tuts+ da Envato, o site que tem milhares de Como tutoriais para, não apenas CSS, mas para assuntos de Design e Ilustração, Código, Web Design, Foto e Vídeo, Negócios, Música e Áudio, 3D e Motion Graphics, Desenvolvimento de Jogos e Habilidades de Computador.
Além do mais, esses tutoriais são todos gratuitos. Aprenda novas habilidades e atualize o conhecimento existente da equipe de autores mundiais da Envato que o ajudam a se tornar um especialista em sua área de interesse!
