Como criar um efeito reflexo de vidro somente com CSS3

Mesmo depois de muito pesquisar, não encontrei nenhum tutorial que fosse aceitável. Então, acabei por criar meu próprio efeito de reflexo de vidro, usando somente CSS3 (sem javascript).

Sem delongas, segue o código base:

HTML

<div class="glass-wrapper">
  <h3>Glass Reflection Box</h3>
  <div class="content">Your Glass content goes here</div>       
  <div class="glass"></div>
</div>

CSS

.glass-wrapper {
  font-family:Arial;
  width: 40%;
  margin:0 auto;
  overflow: hidden;
  min-height: 400px;
  padding:50px;
  box-sizing:border-box;
  background: #DF1922;
  color: #fff;
  border-radius:8px;
  position: relative;
}
.content {
  width: 100%;
  box-sizing:border-box;
  text-align: center;
  font-size: 2em;
  text-shadow: 1px 1px 1px #fff, 1px 1px 1px #000, 1px 1px 1px #ccc;
}

.glass {
  width: 160%;
  height: 316px;
  opacity: .1;
  background: #fff;
  position: absolute;
  top: -114px;
  left: -200px;
  z-index: 9;
  border-radius: 50%;
}

Veja o demo

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *