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.

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ç

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.