CSS3 Reflect İle Yansıma Oluşturma

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

Ü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ç

D7fazGhAiyWRAAAAAElFTkSuQmCC

Örnek 2

CSS

Ü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ç

B6RIa9CRYzMTAAAAAElFTkSuQmCC

Örnek 3

Bu örneğimizdede yansımaya maske oluşturacağız.

CSS

Sonuç

MSDNP2vT0DQAAAAASUVORK5CYII=

Ü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

Ö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

mask

CSS

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

İçeriği puanla diğer kullanıcılara ışık tut

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et