CSS3 ile beraber gelen yenilikler gün geçtikçe daha fazla önem kazanıyor ve gün geçtikçe yaratıcılıkta sınır tanımayanlar için muhteşem bir kaynak haline geliyor CSS3 bu makalemizde CSS3 ile beraber yansımanın nasıl yapıldığını örnekli olarak açıklayama çalışıcağım.
CSS3 Reflect ile Yansıma Oluşturma
CSS3 reflect
özelliği ile resimlerinize veya diğer nesnelerinize yansıma efekti verebilirsiniz.
Şuan sadece WebKit(Safari, Chrome v.b) teknolojisini kullanan tarayıcılar tarafından desteklenmektedir.
Şimdi en basit anlamda reflect
özelliğinin kullanımını görelim biz reflect
‘i img
etiketi için kullanacağız örneğimizde.
Örnek 1
CSS
1 2 3 | img { -webkit-box-reflect: below; } |
Üstteki kod sonucunda sayfanızdaki img
etiketli tüm görseller below
değerinden dolayı altına bir kopyası oluşturulacak ve ters çevrilmiş olcaktır. below
yerine şu değerleride verebilirsiniz: above, right, left
Örneğimizde ben bir img etiketi oluşturdum ve src özelliğinede sitemin logosuna ait url’i girdim sonuç olarak logomun ters çevirip altına bir kopyasını oluşturdu.
Sonuç
Örnek 2
CSS
1 2 3 | img { -webkit-box-reflect: below 10px; } |
Üstteki css kodumuzda örnek 1’dekinden farklı olarak 10px değerininin eklendiğini görüyoruz bu değerin amacı yansıma ile kaynak resmin arasında oluşturulacak 10 piksellik boşluğu ifade etmektedir örnek1’de herhangi bir değer belirtilmediği için varsayılan olarak 0 atanmaktadır tarayıcı tarafından.
Sonuç
Örnek 3
Bu örneğimizdede yansımaya maske oluşturacağız.
CSS
1 2 3 | img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } |
Sonuç
Üstteki resimdende gördüğünüz gibi yansıma yukarıdan aşağıya doğru silinerek geçiş yapıyor böylelikle tam anlamıyla bir yansıma efektini ortaya çıkarabiliyoruz silinerek geçiş yapmak için -webkit-box-reflect
üçüncü parametre olarak -webkit-gradient
‘i geçmemiz gerekiyor.
Örnek 4
CSS
1 2 3 | img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 0.1))); } |
Örnek 3’deki kodumuza ek olarak -webkit-gradient
css özelliğine color-stop(%70, transparent)
kısmını ekledik bunun amacı geçiş işlemini %70’de keserek %70’den %100’e kadar olan kısım saydam olarak ayarlanacaktır bu şekilde daha gerçekçi bir yansıma efekti elde edebilirsiniz. sonuç olarak alttaki resme gözatabilirsiniz.
Sonuç
Örnek 5
Photoshop kullanmayı sevdiğimden yansıma’da en sevdiğim yöntem ise kendi hazırladığınız maskeleri kullanbiliyor olmanız ben photoshop’dan aşağıdaki maskeyi hazırladım ve -webkit-gradient yerine url özelliğini kullanıp parametre olarak hazırladığım maskenin yolunu belirttim.
Maske
CSS
1 2 3 | img { -webkit-box-reflect: below 0px url(mask.png); } |
Sonuç
Üstteki sonuç resmindende nasıl dalgalı bir görünüm oluştuğunu görüyorsunuz daha farklı maskeler oluşturarak etkileyici sonuçlar elde edebilirsiniz