lostyazilim

Css ile Yazılara Arka Plan Eklemek

3 Mesajlar 2.178 Okunma
lstbozum
wmaraci reklam

Berke Berke Yine Yeni Yeniden Kullanıcı
  • Üyelik 03.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek Öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad B** G**
  • Mesajlar 1097
  • Beğeniler 2 / 208
  • Ticaret 1, (%100)
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
 

 

wmaraci
reklam

Hucukii Hucukii </ismailcaakir> Kullanıcı
  • Üyelik 14.09.2013
  • Yaş/Cinsiyet 29 / E
  • Meslek Freelancer
  • Konum Bursa
  • Ad Soyad İ** Ç**
  • Mesajlar 382
  • Beğeniler 57 / 78
  • Ticaret 8, (%100)
Başarılı bir konu teşekkürler :)
 

 

Develops everything always..

Berke Berke Yine Yeni Yeniden Kullanıcı
  • Üyelik 03.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek Öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad B** G**
  • Mesajlar 1097
  • Beğeniler 2 / 208
  • Ticaret 1, (%100)

Hucukii adlı üyeden alıntı

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


Rica ederim :)
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al