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.

Download

Demo

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
    );
}