Işık yansıması gibi görünen harf efekti

Banner olarak kullanabileceğiniz  yada yazılarınızda kullanabileceğiniz  güzel bir Css3 efekt. Tam olarak  kimin tarafından hazırlandığını  bilmediğim bu  örnek Chad  nickinde  biri  tarafından yayınlanmış.

Quantum kelimesi  gölge  efektine sahip olduğu  için ve 3D  görünümde hazırlandığı  için havada  asılı bir  görüntüsü  bulunuyor. Lighting  kelimesi  ise arkaplanda batmış gibi  bir görüntüsü  var mouse  üstüne geldiğine ise resimdeki gibi parlıyor.

Kullanım

Css :

/* Global ------------------------------------------------------ */

html {
  overflow: hidden; /*FF fix*/
  height: 100%;
  font-family: Geneva, sans-serif;
  background: hsl(210, 30%, 0%) radial-gradient( hsl(210, 30%, 20%), hsl(210, 30%, 0%));
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

p {
    margin: 0;
}

/* box ------------------------------------------------------ */

#box {
  padding: 100px;
  text-align: center;
  min-width: 500px;
  font-size: 3em;
  font-weight: bold;
  -webkit-backface-visibility: hidden; /* fixes flashing */
}

/* flashlight ------------------------------------------------------ */

#flashlight {
  color: hsla(0,0%,0%,0);
  perspective: 70px;
  outline: none;
}

/* flash ------------------------------------------------------ */

#flash {
  display: inline-block;
  text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0,0,0,0.8) 0 30px 25px;
  transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
}

#box:hover #flash {
  margin-left: 20px;
  transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
}

/* light ------------------------------------------------------ */

#light {
  display: inline-block;
  text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}

#box:hover #light {
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
  transform: rotateY(-60deg);
  transition:         transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
}

 Html : 

<div id="box">
  <p id="flashlight">
    <span id="flash">Quantum</span>
    <span id="light">Lighting</span>
  </p>
</div>