Olá amigos, hoje venho compartilhar uma maneira legal de criar um efeito glass em um degrade, que você pode aplicar em algum elemento que você deseje..
É bem simples, vejam:
Primeiro criamos um elemento para que possamos manipular
E agora estilizamos esse elemento
Basta alterar o background color a gosto, e mudar os valores da opacidade do rgba() dos elementos, veja:
É só mudar o valor da opacidade!
É bem simples, vejam:
Primeiro criamos um elemento para que possamos manipular
- Código:
<div class="glass"></div>
E agora estilizamos esse elemento
- Código:
.glass{
background-color: #ac0000;
background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4));
background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4));
background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4));
background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4));
background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4));
}
Basta alterar o background color a gosto, e mudar os valores da opacidade do rgba() dos elementos, veja:
- Código:
rgba(RED,GREEN,BLUE,OPACIDADE)
É só mudar o valor da opacidade!