Cufon Nedir ve Niçin Kullanılır ?
Cufon ,benim neredeyse her projemde kullandığım web sayfalarını sıradanlıktan çıkarıp profesyonel bir havaya bürüyen ama bir o kadarda sorunları olan bir tekniktir.Başlamadan önce cufon'un örneğini bizim sitede görebilirsiniz.menü ,soldaki logo ve daha birçok yazı cufon ile yapıldı.
Cufonu Sayfadaki Yazılara Uygulamak
İlk işimiz Bu adresten cufon'un temel js dosyasını indirmek (site açıldığında bütün içeriği kopyalayıp not defterine yapıştırmak yerine Ctrl+S tuş kombinasyonunu kullanarak dosyayı direk .js olarak indirebilirsiniz).Dosyamızı ,sitemizde herhangi bir dizine attıktan sonra (önerim bir js klasörü oluşturup içine koyun ki düzenli olsun) kendimize güzel bir font seçmek.
Ben bu işlemi hızlandırıp ,en güzel fontları sizin için seçtim :) yıllardır cufon kullanan biri olarak denediğim ve görünüşte temizlik açısından (yani karakterlerin birbirine karışmadığı görünüş) en iyi sonuç aldığım 5 fontu sizlerle yazının sonunda paylaşacağım.Şimdi gelelim yapmamız gereken ikinci işe.
Sitemizde ,her sayfada kullanılan (wordpress kullanıyorsanız tavsiyem header.php'dir) bir dosyayı bulup aşağıdaki kodları tagları arasına eklemek.Şöyle ki;
// Burada temel cufon dosyamızı çağırdık
<script></script>
// Burada ise kullanacağımız font dosyasını çağırdık
<script></script>
// Şimdi hangi elemente cufon uygulayacağımızı söylüyoruz
<script>
Cufon.replace('h1');
</script>
Yukarıda açıklamalarıyla verdiğim kodu sayfanıza yapıştırıp (yorumları silmesenizde olur sayfanıza herhangi bir bozulmaya yol açmaz) cufon uygulamak istediğiniz elementi yazıyoruz.
Tek Bildiğim Element , 5.Element
aklınızda "nasıl bulacağım ben bu elementi" diye bir soru varsa hemen uygulamak istediğimiz yazının üzerine gelip (chome ve firefox için) sağ tıkladıktan sonra "öğeyi incele" diyoruz ve gördüğünüz gibi tarayıcı neyi seçtiğinizi anlıyor ve orayı size gösteriyor.ardından seçili olan sözdizimindeki class'ı ya da id'i yani
(
gibi de olabilir moral bozmuyoruz) olan yerdeki tırnaklar içerisinde bulunan ifadeyi alıyoruz ve koşarak ,kod bloğumuzdaki Cufon.replace('h1'); olan yere h1 yerine ,Class ise başına nokta (.) ,id ise başına diez(#) ekleyerek yapıştırıyoruz (yani
Birden Fazla Elemente Cufon Uygulamak
bir değil de birkaç tane elemana cufon uygulamak istiyorsanız ,aşağıdaki gibi her classtan ya da id'den sonra virgül koyarak yapabiliyoruz.
Cufona Efekt Uygulamak ve Hover Olayı
Cufon plain text olmadığı için yani normal yazı gibi algılanmadığı için hover olayında yani yazının üstüne geldiğinizde rengin değişmediğini göreceksiniz.(mesela linkler).ama bunun da bir çözümü var.Alttaki koddan anlayacağınız üzere ,cufon reyize hover olayında da çalışacağınız bildirmemiz gerekiyor.internette incelerseniz zilyonlarca kişi bu olayı çözememiş ,yanlış yazım kullanmışlardır ,cufon çok hassastır true'yi tırnak içerisinde yazıyoruz.
Efekt uygulamaya gelecek olursak ,yukarıda bahsettiğim hover olayı gibi ,normalde yazılarınıza verdiğiniz text shadow özelliği de çalışmayacaktır fakat aaha bunun da çözümü var.yine cufon'a textshadow uygulamasını söylüyoruz
Hem hover'i hem efekti aynı anda nasıl uygulayacağız diyorsanız o da şu şekilde.
Bir bilgi daha vereyim ,hover kullanmak istiyorsanız da yazılarınızda ease efekti varsa (yani mesela üstüne geldiğinde 2 saniyede kırmızı rengine dönüşüyor ise) cufon saçmalar.demedi demeyin.
Cufon'un Zararları Ne ?
Cufon bir kere plain textleri javascripte dönüştürdüğü için eğer çok cufon kullandıysanız siteniz yavaşlar.
Cufon javascript olduğu için yazıyı seçmeye çalıştığınızda seçemezsiniz ,inanmıyorsanız deneyin.Ek Olarak bunun seo açısından zararlı olabileceğini duymuştum ama inanmıyorum pek çünkü sonuçta kaynak'ta kabak gibi duruyor linklerimiz ordan alsın spiderlar.
Sayfada cufon uygulanmış herhangi bir yazıya sonradan efekt uygulamaya çalışıyorsanız (mesela jquery ile 5 saniye sonra kırmızıya çevireyim) boşa kürek çekiyorsunuz cufon bir yüklendi mi daha da kıpırdamaz.
Ama Biz Onu Kıpırdatacağız !
çok şiddetli giriş yaptım ama benim canımı sıkmıştı bu konu ,kendim kurcalayıp buldum sonunda da.diyelim ki jquery ile bir işlem yaptınız ("#yazi1").css('color','red'); ama cufon dönüşmedi.yazıyı kırmızı yapabilmek için bu sintaksın hemen altına Cufon.refresh(); ekleyin yani cufonun yenilenmesi emrini verin ,işe yaradığını göreceksiniz.
son olarak benim verdiğim fontları beğenmiyorsanız ,kendiniz birşeyler üretmek istiyorsanız bu adresten hazır indirebilir ,ya da beğendiğiniz herhangi bir fontu yükleyip cufon olarak geri alabilirsiniz.
Birden Fazla Elemente Cufon Uygulamak
bir değil de birkaç tane elemana cufon uygulamak istiyorsanız ,aşağıdaki gibi her classtan ya da id'den sonra virgül koyarak yapabiliyoruz.
Cufon.replace('.birinci,.ikinci,#ucuncu,#dorduncu');
Cufona Efekt Uygulamak ve Hover Olayı
Cufon plain text olmadığı için yani normal yazı gibi algılanmadığı için hover olayında yani yazının üstüne geldiğinizde rengin değişmediğini göreceksiniz.(mesela linkler).ama bunun da bir çözümü var.Alttaki koddan anlayacağınız üzere ,cufon reyize hover olayında da çalışacağınız bildirmemiz gerekiyor.internette incelerseniz zilyonlarca kişi bu olayı çözememiş ,yanlış yazım kullanmışlardır ,cufon çok hassastır true'yi tırnak içerisinde yazıyoruz.
Cufon.replace('.herhangibirsey', {hover: 'true'});
Efekt uygulamaya gelecek olursak ,yukarıda bahsettiğim hover olayı gibi ,normalde yazılarınıza verdiğiniz text shadow özelliği de çalışmayacaktır fakat aaha bunun da çözümü var.yine cufon'a textshadow uygulamasını söylüyoruz
Cufon.replace('.bisey',{
textShadow : '0px 2px 1px #fff'
});
Hem hover'i hem efekti aynı anda nasıl uygulayacağız diyorsanız o da şu şekilde.
Cufon.replace('.bisey',{
textShadow : '0px 2px 1px #fff',
hover: 'true'
});
Bir bilgi daha vereyim ,hover kullanmak istiyorsanız da yazılarınızda ease efekti varsa (yani mesela üstüne geldiğinde 2 saniyede kırmızı rengine dönüşüyor ise) cufon saçmalar.demedi demeyin.
Cufon'un Zararları Ne ?
Cufon bir kere plain textleri javascripte dönüştürdüğü için eğer çok cufon kullandıysanız siteniz yavaşlar.
Cufon javascript olduğu için yazıyı seçmeye çalıştığınızda seçemezsiniz ,inanmıyorsanız deneyin.Ek Olarak bunun seo açısından zararlı olabileceğini duymuştum ama inanmıyorum pek çünkü sonuçta kaynak'ta kabak gibi duruyor linklerimiz ordan alsın spiderlar.
Sayfada cufon uygulanmış herhangi bir yazıya sonradan efekt uygulamaya çalışıyorsanız (mesela jquery ile 5 saniye sonra kırmızıya çevireyim) boşa kürek çekiyorsunuz cufon bir yüklendi mi daha da kıpırdamaz.
Ama Biz Onu Kıpırdatacağız !
çok şiddetli giriş yaptım ama benim canımı sıkmıştı bu konu ,kendim kurcalayıp buldum sonunda da.diyelim ki jquery ile bir işlem yaptınız ("#yazi1").css('color','red'); ama cufon dönüşmedi.yazıyı kırmızı yapabilmek için bu sintaksın hemen altına Cufon.refresh(); ekleyin yani cufonun yenilenmesi emrini verin ,işe yaradığını göreceksiniz.
son olarak benim verdiğim fontları beğenmiyorsanız ,kendiniz birşeyler üretmek istiyorsanız bu adresten hazır indirebilir ,ya da beğendiğiniz herhangi bir fontu yükleyip cufon olarak geri alabilirsiniz.
