Css ile Objelere Yansıma Efektler Verin

08 10 2012 16:34 tarihinde, Css, Web Tasarım kategorisinde yazıldı. 1 yorum yapıldı, 5290 kez okundu

Görüldüğü üzre sol yandaki fotoğrafta yansıma efekti eklenmiş. Bunu bir fotoğrafın orijinali zannetmeyin. Hepsi ufak bir kod.

Yansıma özelliğini şimdilik sadece 3 tarayıcımız destekliyor. Firefox 4 ve  5, Safari, Chrome. Ancak internete erişimde kullanılan tarayıcıların kullanım oranlarına bakıldığında En büyük paya Google Chrome sahip. Bu yüzden ziyaretçilerinizin çoğu görecektir. İnternet Explorer kullanıcıları alınmasınlar ama zaten bu tarayıcı da işgenceden başka bir şey değil. Neyse gelelim konumuza.

Bir objeye yansıma efekti eklemek için kullanacağımız kod basit ve aşağıda örnek verilmiştir.

-webkit-box-reflect: below -5px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.296875)));

Yukarıdaki kodu elementimizin css kodlarına uyguluyoruz. Mesela şöyle bir div oluşturalım ve arkaplan için de fotoğraf belirleyelim. Bu fotoğrafa yansıma efekti nasıl verilir ona bakalım.

<div class="rastgele"></div>

Bu buna arkaplan fotoğrafı ve yansıma kodu eklemek için css koduna şunları tanımlamalıyız:

.rastgele{background-image: url(resminyolu.jpg);
 -webkit-box-reflect: below -5px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.3)));}

linear kodu önündeki  0%  0% ,  0%  100% kodları sırasıyla sol üst sol alt şeklinde yansımayı soldurmanıza yarar. Değerler attıkça solma artar.

to(rgba(255, 255, 255, 0.296875)))

kısmı ise dilerseniz

to(white))

ya da

to(#fff))

şeklinde renk tanımlayabilirsiniz..
Kolaylıklar…

Bu konudaki düşüncelerinizi siz de yorum olarak paylaşabilir, aşağıdaki butonlar aracılığıyla daha çok kişiye ulaştırabilirsiniz.

Bunlar da İlginizi Çekebilir
Bu Makaleye 1 Yorum Yapıldı
  1. kadir kandemirkadir kandemir

    Eline saglık kardeşim çok güzel bir web sitesi ve işe yarar şeyler var

Sponsorlu Bağlantılar

Son Yorumlar

  • kadir kandemir Mamos

    Merhaba öncelikle kolay gelsin hayalete düşmüş bi hesap nasıl kurtalabilir twitter destek'e ne gibi bi mesaj yazılmalıdır ve bu mesajın dili türkçe mi olmalıdır örnek bir mesajla bilgilendirir misiniz bizi
  • kadir kandemir Nebi Garcı

    Bildiğim kadarıyla yok.
  • kadir kandemir Misafir

    Selamünaleyküm Nebi bey. Twitlerimizi beğenenlerin listesini topluca alabileceğimiz bir kod var mı?Yardımınız için teşekkürler.
  • kadir kandemir Burak Garcı

    AddMeFast gibi beğeni siteleri ve krediyle takipçi yollayan bir iki uygulama ve benzerleri Twitter Kuralları'na aykırı. Yani uymanız gereken, sadece limitler değil. Dolayısıyla Limiti aşmadığımız müddetçe istediğimiz gibi hareket edebilmemiz gerekmez mi? sorusuna hayır, istediğimiz gibi hareket edeb...
  • kadir kandemir Misafir

    Merhaba Ben herhangi bir limit aşımı yapmamama rağmen hesabım sıklıkla kilitleniyor Gelen mesajda olağanüstü bir durumla karşılaşıldığı bahanesi gösteriliyor Kilidi açınca da takip ettiklerim sıfırlanmış gözüküyor Bu durumda da takipçilerimden bazıları benim yaptığımı düşünerek takipten çıkıyor Olan...