8 Çarpıcı CSS ve JavaScript 3B Metin Efektleri Örneği

0
28

Web projelerinizde görsel bir etki yaratmak istiyorsanız, 3B metin efektleri bunu yapmanın kesin yoludur. Sıradan bir web sitesi manşetini kaçırılmayacak bir sanat eserine dönüştürebilirler.

Harika olan şey, CSS ve JavaScript kullanılarak çok çeşitli 3B efektlerin oluşturulabilmesidir. Düşünceli bir şekilde uygulandığında, bu, metnin erişilebilir ve duyarlı kalmasını sağlar. Bu tür etkilerin yalnızca görüntülerin kullanımıyla elde edilebildiği günlerden çok uzak.

Bugün, güzel 3B metin efektlerine sahip bazı parçacıklara bir göz atacağız. Sakin ve şıktan çılgınca canlandırılana kadar gamı ​​yönetiyorlar. Burada hemen hemen her ihtiyaç için bir şeyler var.

Web Designer Araç Kutusu

Sınırsız İndirme: 1.000.000+ Web Şablonu, Temalar, Eklentiler, Tasarım Varlıkları ve çok daha fazlası!

Raftaki Mektuplar

İşte Three.js kitaplığının gücünü gösteren eğlenceli bir örnek. Bir dizi rafta 3B metin görünür – ancak göründüğünden daha fazlası vardır. Bir harfe tıklayın veya dokunduğunuzda, yaklaşan kıyametine döner.

Angela Galliat’tan Three.js ve Cannon.js kullanarak Pen Interactive 3D-Letters’ı görün

Dot Matrix Tabela

Bu metin parçacığı, nokta vuruşlu bir işaretin görünümünü simüle eder ve hatta kendi özel metninizi girmenize izin verir. İşaret yatay olarak dönerken, tondaki ince değişikliklere dikkat edin. Gerçek dünyada göreceğiniz gölgeleme efektini güzel bir şekilde taklit eder. İmlecinizi yukarı ve aşağı hareket ettirmek aynı zamanda görüş açısını da yatırır.

JK tarafından hazırlanan Pen Pseudo 3D metnine bakın

Çizgi Roman Kahramanları

Karikatürize yazı tipi ve CSS animasyonunun kullanılması bu örneği öne çıkarır. Bunun yerine, her kelime size kademeli aralıklarla “atlar”. Metin anahatları ve gölgeleme, bu üçüncü boyutu ortaya çıkarmaya yardımcı olur.

Kyle Wetton’ın Kalem CSS 3D Metin Efektini görün

Dalgalı Kelimeler

Şaşırtıcı bir şekilde, bu 3B dalga efekti, saf CSS (ve önyüklemek için 50’den fazla satır) ile yapılır. Eşsiz katmanlı bir görünüm, bir mistisizm dokunuşu eklemek için bir karışım moduyla birleştirildi. Nazik animasyon, kullanıcıları bunaltmadan metne dikkat çekebileceğiniz anlamına gelir.

Yusuke Nakaya’dan Yalnızca Kalem CSS: Metin Dalgasına bakın

Gölgeler içinde

Kulağa basit gelebilir, ancak CSS gölgeleri bir 3B efekti eklemenin etkili bir yolunu sunar. Burada, üç boyuta ulaşmanın iki farklı yolunun bir gösterimi var. CSS filtresi özelliğini kullanmak, sayfa arka planının bir kısmının geçmesine izin verirken, metin gölgesi daha geleneksel bir görünüm sağlar.

Zastrow’un gölgeli Kalem 3B efektini görün

Retro Olmak

Bu özel etkinin çoğu proje için uygun olmayabileceğini kabul ediyoruz. Ama yine de çok eğlenceli. Retro video oyunu havası ve titreşimli metin, PAC-MAN ve noktalar gibi bir araya gelir. Hatta eski Commodore 64’ü depodan çıkarmak istemenize bile neden olabilir.

CurleyWebDev’in Pen’in 80’lerden Esinlenen Saf CSS grafiklerini görün

Vuruşlar

3D, onursuz anlamına gelmek zorunda değildir. Örneğin bu konturlu metni ele alalım. Çok sayıda çok boyutlu etki sunar, ancak uyum sağlayacak şekilde tasarlanmıştır. Bu minimum etki, makale başlıkları veya sayfa başlıkları için harika olabilir.

@TimLamber tarafından Kalemi YPZJQz görün

Taş Set

Daha fazla incelik mi istiyorsunuz? Bu gravür efekti, boyut ve biraz da sınıf katar. Stil CSS ile hazırlanmış, güncel tarih ise JavaScript ile oluşturulmuştur. Kimsenin yüzüne girmeden 3D oluyor.

Michael Burridge’in yalnızca kalem CSS’sini 3 boyutlu oyulmuş taşı görün

CSS ve JavaScript ile 3D Metin Efektleri Ekleyin

Hareket ve etkileşim ya da ince dekorasyon eklemek istiyorsanız, 3B metin efektleri yardımcı olabilir. Önemli içeriğe dikkat çekiyorlar ve sıradanlığın dışına çıkmanıza izin veriyorlar.

Dahası, benzersiz bir şey yaratmak için çok büyük miktarda kod yazmanıza gerek yoktur. Yukarıdaki örneklerden bazıları nispeten küçük bir CSS parçasıyla oluşturulmuştur. Küçük başlayabilir ve gerekirse daha büyük bir şeye doğru ilerleyebilirsiniz.

Daha fazla 3B metin parçacığı mı arıyorsunuz? İlham almak için CodePen koleksiyonumuza bir göz atın.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz