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.

Download

Demo

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>