HTML'de Kodlarla Yansıma Efekti

Bu dersimizde kendimin sık kullandığı bir efekt uygulamasını anlatmaya çalıştım. Pratik bir çalışma olduğu için işinize yarayacaktır.

Bu dersimizde kendimin sık kullandığı bir efekt uygulamasını anlatmaya çalıştım. Pratik bir çalışma olduğu için işinize yarayacaktır.

Genelikle kendi adıma konuşayım resmin yansıma halinide JPG olarak kaydedip o hali ile kullanırdım. Ama bunun çok pratik yolu da var: Reflection koduyla bir iki dokunuşla direk yansıma elde edebiliyorsunuz. Benim artık demirbaş kodlarımdan birisi haline geldi. Sizin de işinize yarayacağına eminim.

Öncelikle aşağıdaki linke sağ tıklayarak Farklı Kaydet yolu ile "yansima.js" dosyasını indiriyoruz ve çalıştığımız klasör içine kaydediyoruz.

İNDİRMEK İÇİN TIKLAYIN.

Daha sonra HTML kodlarını düzenlemek için programımızı açıyoruz ve

tagları arasına aşağıdaki kodu yazıyoruz:


<script type="text/javascript" src="yansima.js"></script>



Bu kodu yapıştırıp yansıma yapmak istediğimiz resmin kodunu bulup src'den sonraki kısma:


class="reflect rheight50 ropacity15"



kodumuzu yapıştırıyoruz.



Her yansıma yapmak istediğimiz resim için kullanıyoruz.

Bu benim ilk paylaşımım umarım faydalı olmuştur..

Kaynak ve daha geniş bilgi için buraya tıklayınız.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 12 yıl önce
@Bu benim ilk paylaşımım umarım faydalı olmuştur.. ama döküman senin deil kaynak ajax-tr tabiki birilerinde faydalı olmuşdur.
• 12 yıl önce
aylar öncesi HTML arşivime aldığım bir kod.. kaynak ise şu : http://www.dillonwelding.com/reflection/readme.html
• 12 yıl önce
Teşekkürler arkadaşım.bu güzellikte çalışmalarının devamını bekleriz.
• 12 yıl önce
Arkadaşlar kaynak diye bir olay yok. Kaynak= AJAX Kim ise bu Js sınıfını yazan ona ait. Yoksa HTML'e JavaScript Kodu entegre etmeyi herkes biliyor. Ve internettede her yerde var. Yani ortada bir çalışma yok malesef..
• 12 yıl önce
Güzel bir Çalışma Teşekkürler
teşekkürler güzel bilgi
• 12 yıl önce
resmin Class'ına tanımladığımız "rheight50" yi "rheight100" yaparsak resmin yansıması daha belirgin hal alıyor...
bunu programın içine nasıl yüklüyeceğiz.masaüstnden başka bir yere kopyalıyınca çalışmıyor.
• 11 yıl önce
:D teşekkürler arkadaşım...:-dusun:
• 11 yıl önce
gzl paylaşım
• 11 yıl önce
yüklemek istediğim resmin kodunu bilmiyosam n'apıcam????:agla:

Yukarı Git