Sihirli Fasulyeler
Yükleniyor...
CSS Mix-Blend-Mode ile Animasyonlu Neon Yazı Oluşturma
 Web-Tasarım   166   28.10.19   28.10.19   0
neon.jpg

Bu web tasarım makalesinde hem CSS'in çok bilinmeyen özelliklerinden biri olan mix-blend-mode özelliğine göz atacağız hem de bu özelliği kullanarak animasyonlu bir neon yazı elde edeceğiz. Makale sonunda işlemlerin anlatıldığı videoyu izleyebilir, oluşturduğumuz animasyonlu neon yazı örneğini bilgisayarınıza indirebilirsiniz.

   

mix-blend-mode, bir eleman ile elemanın arkasındaki görüntünün karışmasını sağlayan CSS özelliğidir. Örneğin aşağıda boyutları tamamen aynı iki farklı resmi HTML ve CSS ile üst üste ekleyelim.

  Neon Yazı  

HTML kodlaması

<div id="temel">
	<img src="resim1.jpg" alt="resim">
	<img src="resim2.jpg" alt="resim">		
</div>
 

CSS kodlaması

#temel{position: relative;}
#temel>img:first-child{position: absolute;}
 

Sonuç

Neon1 Neon2
 

Sonuçta 1. resim önde, 2. resim arkada yer almaktadır. Resimlerin boyutları aynı olduğu için sadece ilk resim gözükmektedir. Şimdi ilk resme CSS mix-blend-mode özelliği ekleyerek 1. resmin görüntüsü ile arkasındaki yani 2. resmin görüntüsünü karıştıralım. Resimlerin hemen altında yer alan seçim elemanından mix-blend-mod seçeneklerini kullanarak resimlerin görüntülerini seçtiğiniz özelliğe göre karıştırabilirsiniz.

 

mix-blend-mode komutunu öğrendiğimize göre artık animasyonlu neon yazımızın yapımına geçiş yapabiliriz.

 

Aşağıdaki videoda animasyonlu neon yazı için tüm detaylı anlatımları bulabilir, buraya tıklayarak tasarladığımız örneği bilgisayarınıza indirebilirsiniz.

 
 

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap