Css ile Yazılara Arka Plan Eklemek

Merhaba arkadaşlar, çok hoşuma giden ve Photoshop da sık sık kullandığım yazılara arka plan eklemekten bahsedeceğim. Olayın mantığı yazdığımız yazıya renk yerine seçtiğimiz yazıyı yazmamızdan ibaret. Bu işlem Css de background-clip ve text-fill-color olarak uygulanmakta ve oldukça basit bir yapıda. Bu sistemi sadece resimlerde değil gradient (renk geçişleri) de de kullanabilirsiniz. Fazla uzatmadan anlatıma geçiyim :)

Nasıl Yapılır

Arka plan resim kullanmak için:

Başta dediğim gibi background-clip ve text-fill-color sistemlerini kullanacağız ,bunun için normal css kodlarını yazıp uygulamadaki gibi kodlarımızı ekliyoruz.

.yazı-arkaplan{
background: url('http://www.berkeguler.com/wp-content/uploads/2014/09/2806417207_d7b0e61fa5.jpg') 21% 21%;
-webkit-text-fill-color: rgba(255,255,255,0.25);
-webkit-background-clip: text;
font-Weight:bold;
font-size: 55px;
}
Son olarak Html kodlarımızı çağırıyoruz

berkeguler.com

önizleme: http://jsfiddle.net/berkegulercom/cjz1ncvq/

Arka plan gradient (renk geçişleri) kullanmak için:

Yukarı yaptığımız gibi normal css kodlarımızın yanına ek kodlarımızı yazıyoruz.

.arkaplan-gradint {
background: -webkit-linear-gradient(#000, #777);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-Weight:bold;
font-size: 55px;
}

Yine html ile sonlandırıyoruz.

berkeguler.com

önizleme: http://jsfiddle.net/berkegulercom/pa4tsx8v/1/

Sonuç olarak elimizde böyle bir işlem kalıyor.

İyi çalışmalar

Başarılı bir konu teşekkürler :)

Rica ederim :)