CSS kullanarak RGB Animasyonlu 3B Metin Oluşturun

CSS kullanarak RGB Animasyonlu 3B Metin Oluşturun

Hadi Başlayalım

Bir metin div oluşturmaya başlayalım. Onun için de bir sınıf atayacağım.

<div class="emboss-txt">HELLO.</div>

Sonra uygun bir yazı tipi bulacağız. Bu eğitim için, güzel bir kalın metin stiline sahip olan Dock11 yazı tipini kullanacağım . Fontu indirip web klasörüne yerleştirdikten sonra CSS üzerinde çalışalım.

Font-face kuralını kullanarak özel fontumuzu içe aktaracağım.

@font-face {
  font-family: dock11;
  src:url(heavy_dock11.otf);
}

 

Ardından yazı tipi boyutunu ve ailesini ayarlayın ve harf aralığı ekleyin. Ayrıca rengi neredeyse beyaza çevirin.

.emboss-txt {
  position: relative;
  font-size: 180px;
  font-family: dock11;
  letter-spacing: 5px;
  color:rgb(207,207,207);
}

Şimdi bunun gibi bir şey görmelisiniz (div'i ortalamak ve arka plan rengini gri olarak ayarlamak için gövdede esnek düzeni kullanıyorum)

 

Sahte 3D

Ve işte kilit adım. CSS ile gerçek bir 3B metin oluşturamadığımız için, bunun yerine 3B efekti taklit etmek için birden çok metin gölgesi katmanı uygulayacağız.

İlk önce 3 kat beyaz duman rengi kullanarak metin gövdesini oluşturacağım. Bu teknikle metin aslında derinliğe sahipmiş gibi görünecektir.

 

.emboss-txt {
...
  text-shadow: 
  /*3d layers*/
  0px 0px 1px rgb(167,167,167),
  0px 1px 1px rgb(167,167,167),
  0px 2px 1px rgb(167,167,167);
}

Ne kadar derinliğe ihtiyacınız olduğuna bağlı olarak istediğiniz kadar tekrarlayabiliriz. Bu ders için bunu üç kez (3×3 katman) yapacağım. Her katmanın ofsetini de artırmayı unutmayın.

.emboss-txt {
...
  text-shadow: 
  /*3D layers*/
  0px 0px 1px rgb(167,167,167),
  0px 1px 1px rgb(167,167,167),
  0px 2px 1px rgb(167,167,167),

  1px 1px 1px rgb(167,167,167),
  1px 2px 1px rgb(167,167,167),
  1px 3px 1px rgb(167,167,167),

  2px 2px 1px rgb(167,167,167),
  2px 3px 1px rgb(167,167,167),
  2px 4px 1px rgb(167,167,167);
}

 

Sonra gerçek gölgeyi yaratacağız. İlk önce uzun yumuşak alt gölge ile başlayalım. iki katman yüksek bulanıklık miktarı şeffaf siyah gölge kullanacağız. Ardından, 3B derinliği vurgulamak için kısa bir alt gölge oluşturacağız. Son olarak, orta derecede bulanıklık miktarıyla sol ve sağ yan gölge ekleyin.

...

/*long soft bottom*/
1px 10px 30px rgba(0,0,0,0.8),
1px 10px 70px rgba(0,0,0,0.8),

/*short soft bottom*/
0px 5px 5px rgba(0,0,0,0.8),

/*left shadow*/
-5px 5px 20px rgba(0,0,0,0.8),
/*right shadow*/
5px 5px 20px rgba(0,0,0,0.8);

 

Ardından, çok yüksek bulanıklık miktarında beyaz gölge kullanarak metne beyaz bir parlak ışık ekleyin.

/*white light*/
1px 1px 120px rgba(255,255,255,0.5);

 

Bu noktada, birçoğunuz sonuçtan zaten memnun olabilirsiniz. Ancak bu eğitim için metne RGB ışık döngüsü efekti eklemeye çalışacağız.

RGB Animasyonu

İlk önce bir sözde eleman oluşturalım. Orijinalden tüm metin özelliklerini çoğaltacağım. Ardından mutlak konumu ve sıfır üst/sol kullanın (doğrudan ebeveyninin üzerine yerleştireceğiz)

 

.emboss-txt::after {
  content: "HELLO.";
  font-size: 180px;
  letter-spacing: 5px;
  font-family: dock11;
  position: absolute;
  top:0;
  left:0;
}

 

Şimdi orijinal metinle örtüşmek yerine metnin sol üst köşeye atladığını göreceksiniz. Bunun nedeni, henüz ebeveyn için konum belirlememiş olmamızdır.

Konumu ebeveyne ayarlayalım ve mavi ışık efektini ekleyelim.

.emboss-txt {
  position: relative;
...
}
.emboss-txt::after {
...
  text-shadow: 0px 0px 100px rgba(11,124,199,0.5);
}

Ardından, animasyonu tanımlayalım. Metin gölgesini değiştirerek 5 renk arasında geçiş yapmak için @keyframes kullanacağız. (5 olması şart değil, dilediğiniz gibi daha az kullanabilir veya daha fazla renk ekleyebilirsiniz)

@keyframes cycle {
  0% { text-shadow: 0px 0px 100px rgba(11,124,199,0.5);}
  20% { text-shadow: 0px 0px 100px rgba(168,11,199,0.5);}
  40% { text-shadow: 0px 0px 100px rgba(11,199,96,0.5);}
  60% { text-shadow: 0px 0px 100px rgba(199,11,11,0.5);}
  80% { text-shadow: 0px 0px 100px rgba(199,96,11,0.5);}
}

 

Ardından animasyon zamanlama işlevini ayarlayın ve tekrarlayın.

.emboss-txt::after {
...
  animation: cycle 10s linear infinite;
}

 

İşlem Bu Kadar !!