Kerning.js – Her harfe ayrı döndürme değeri

Bazı zamanlarda banner  yada  başlık oluştururken sırf  değişiklik olsun diye kelime içindeki her harfi farklı pozisyonlarda  yani birini sağa birini de  sola doğru çevirerek kullanırız. Genelde banner çalışmaları için kullanılan bir tarzdır  buda. Hatta  birçok web sitesinin resim yamuk yumuk harflerle  yaptıkları bannerleri kullandıkları da malum. Görüntü  olarak hiçte fena değil aslında. Baya  dikkat çekici  bir özellik. Bütün harfler dümdüz  dururken  aradan bir harfe sanki kamyon çarpmış gibi yamuk durması biraz ilgi çekici.

Artık bu tür bannerler hazırlamak için photoshop yada başka bir resim düzenleme aracı kullanmanıza gerek yok. jQuery Kerning.js  uygulaması sayesinde  bir kelime içindeki bütün harflerin her birini ayrı ayrı pozisyonlarda tutabilirsiniz. Biri sağa doğru yamuk dursun diğeri  sola doğru.

Kerning.js eklentisi  ile   kullanabileceğiniz özellikler : Harf aralığı, boyut aralığı, renk, dönüşümler, karakter konumları, eşleştirme, tekrar, karakter boyutları, karakter genişliği.

Demo  sayfasında  bitişik yazılmış olan bir kelime içindeki harflerin  herbiri  Kerning.js  eklentisi  kullanılarak farklı yönlerde  görünüyorlar.

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya  adresleri  :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="kerning.js"></script>

Css ile  kullanımı :

Boyut ayarı

#hello-goodbye {
    -letter-size: _ _ _ _ _ 0.5em;
}

Harf aralığı

#pixel-perfect {
    -letter-kern: 1px 1px 0 0 0
                  1px 0 2px 0 0
                  0 0 0;
}

Renk

#pantone-please {
    -word-color: #f5474b #000000;
}

Geçişler

#little-lean {
    -letter-transform: skew(-5deg) none
                       none none
                       none none
                       skew(-5deg);
}

Karakter koşulları

#helvetica-fallback {
    font-family: 'FakeFont',
                 Helvetica Neue,
                 sans-serif;
    -word-color: if-font(
        'Helvetica Neue': #000 #f5474b
    );
}

Eşleştirme

#mississippi {
    -letter-color: -letter-pairs(
        'ss': #777,
        'pp': #f5474b
    );
}

Tekrar

#double-bubble {
    -letter-transform: -letter-repeats(
        2n+1: translate3d(0,-5px,0),
        even: translate3d(0,5px,0)
    );
}

Vendor prefixes

#red-on-webkit {
    -webkit-word-color: #f5474b;
}

Font boyutu

#oh-goodness {
    /* fallback if JS fails to load */
    font-size: 2.4rem;

    font-size: if-font(
        'Helvetica Neue': 1.5rem
    );
}

Font genişliği

#thick-and-thin {
    /* fallback if JS fails to load */
    font-weight: 700;

    font-weight: if-font(
        'Helvetica Neue': 400
    );
}