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

Işık

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>

 

1
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-07-08 tarihinde yayınlandı,Toplam 1795 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...