Fotogerçekçi Post-It Pop-Up Nasıl Oluşturulur

Şu post-it pop-up’larından birini gördünüz mü? Harika gölge efekti ile çok gerçekçi görünen. Neden bahsettiğimi bilmiyorsanız, aşağıdaki web sitesini açmayı deneyin:

http://myhobbybooks.com/wowpop

Harika görünüyorlar değil mi?

Ve bunun gibi bir şey, web pazarlama kampanyanız için her zaman iyidir. Bunun bir nedeni, pop-up engelleyicileri tarafından asla engellenmemesidir. Ve bir diğeri, gerçekten web ziyaretçilerinizin dikkatini çekiyor.

Bu, ezine’nize abonelik oranını artırmak veya bir ortaklık programını tanıtmak veya hatta satışları artırmak istediğinizde iyidir.

Ama merak ediyorsun, bunu nasıl yapıyorlar? Benzer bir sonuç elde edebileceğinizi düşündünüz ve deniyorsunuz, deniyorsunuz ve deniyorsunuz … GIF resmi, JPG resmi denediniz, bunların hiçbiri işi bitiremez.

Ama bilmediğin bir şey var. Birçok profesyonel web programcısı bunu bilir, ancak normal web tasarımcıları bilmez … belki çoğu web tasarımcısı bile bunu nasıl yapacağını bilmiyordur.

İşin sırrı PNG görüntü biçimindedir.

PNG resim formatı, web’de kullanabileceğiniz az bilinen resim formatıdır. PNG görüntü formatı benzersizdir çünkü onunla Alfa efektini yapabilirsiniz. Alfa efekti, PNG görüntüsündeki belirli alanlarda şeffaflık faktörünü ayarladığınız yerdir. Gölgenin bu kadar gerçekçi görünmesini sağlayan şey budur.

Alfa efekti ile şeffaflık faktörünü% 0 ile% 100 arasında ayarlayabilirsiniz. Yani% 30 şeffaf,% 50 ve hatta% 79 olabilir. Açılır pencereye tekrar bakın ve gölgeye yakından bakın – Artık nasıl yapıldığını biliyorsunuz.

Ancak tek bir sorun var – Internet Explorer, PNG resim formatını gerçekten desteklemiyor. IMG etiketini kullanarak hala PNG görüntü formatını çağırabilseniz de, Internet Explorer Alfa faktörünü yok sayar. Internet Explorer’da PNG görüntüsü düzgün görünmüyor.

Peki bunu nasıl çözeceğiz …

Neyse ki yine de PNG görüntüsünü Internet Explorer’da çağırabilir ve Alfa’nın özel bir CSS komutu kullanarak yansıtılmasını sağlayabilirsiniz. AlphaImageLoader ().

Ancak bu başka bir soruna yol açacaktır. PNG görüntüsünü aramadan önce, web ziyaretçinizin kullandığı tarayıcıyı tanımlamanız gerekir. Ziyaretçi Firefox, Opera, Netscape veya başka birini kullanıyorsa, IMG etiketini kullanarak PNG’yi arayabilirsiniz. Ancak Internet Explorer ise, AlphaImageLoader () kullanmanız gerekir.

Ve elbette, bu her zaman biraz Javascript ile çözülebilir. Ve biraz daha fazla Javascript ve CSS ile, PNG görüntüsünün web içeriğiniz üzerinde yüzmesini sağlayabilirsiniz. Hatta OnClick olay tetikleyicisini kullanarak açılır pencerenin kaybolmasını bile sağlayabilirsiniz.

Kendi fotogerçekçi post-it pop-up’ınız için eksiksiz bir kod ve PNG görüntüsü istiyorsanız, WOW Pop-Up’ı ziyaret etmeyi deneyin. Aşağıda, ücretsiz bir kod seti ve PNG grafiği alabileceğiniz WOW Pop-Up’ın URL adresi bulunmaktadır.