CSS ile Bulanık(Blur) Yazı Yazmak

Evet bugün epey kısa bir ders ile karşınızdayım. Bu derste css ile herhangi bir yazıyı nasıl bulanıklaştıracağınızı öğreniceksiniz. Hemen yeni bir sınıf oluşturalım:

.bulandir {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Yukardaki sınıfı bir elemente uyguladığınızda aşağıdaki sonucu alıyorsunuz:

Örnek

Peki ne yaptık rengi transparan yapıp(color: transparent), yazının rengini text-shadow parametresi olarak ayarladık(rgba(0,0,0,0.5)). İlk iki değer(0px 0px) bizim yakınlık uzaklık değerlerimiz onları sıfır yapmasaydık orjinal yazıdan uzaklaşıcaklardı. Üçüncü değer(5px) ise dağılma oranımız bunu artırdıkça dağılma artıcaktır. Son değer ise gölgenin rengi(rgba). Peki buradaki parametreler ne işe yarıyor; ilk değer R yani red = kırmızı, ikinci değer G yani green = yeşil, üçüncü değer ise B yani blue = mavi ve son değer ise A yani alpha bunun Türkçesi alfa fakat bir anlam ifade etmediği için şeffaflık değeri diyebiliriz.

Sonraki derslerde görüşmek üzere…