JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

Como fazer um efeito glass com CSS

Ir para baixo  Mensagem [Página 1 de 1]

1Como fazer um efeito glass com CSS Empty Como fazer um efeito glass com CSS Qui 13 Fev 2014, 12:53 pm

waghcwb

waghcwb
Desenvolvedores
Desenvolvedores

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
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!

http://wagneraugusto.com.br/

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos