CSS’de letter-spacing: kodunun kullanımı

CSS kodları ile yeni yeni tanışmaya başlayan kişilerin karşısına mutlaka çıkacak olan bir css elementidir letter-spacing. Peki bu element ne işe yarar. İsterseniz bunu kullanarak öğrenelim…

İlk olarak elimize bir güzel söz alıyoruz.

Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..

Gayet normal ve güzel söz. Şimdi bu yazıyı h6 yapalım.

<h6>Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..</h6>

Yazımız h6 içine girince şu şekli aldı:

Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..

Şimdi h6 kodumuza CSS ile letter-spacing özelliğini katalım ve ne olacağını görelim.

<style>
h6 {
letter-spacing: 4px;
}
</style>

Yukarıdaki stil kodumuzda letter-spacing kullanarak yazımızdaki harfler arasında 2 pixellik boşluk bıraktık. Kodları bir araya topladığımızda şöyle:

<style>
h6 {
letter-spacing: 2px;
}
</style>

<h6>Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..</h6>

Ön izlemelerini görmek istediğimizde ise şöyle:

Hayat bir tiyatro dediler, bana bir rol verdiler. En acısı benimki idi, önce sev sonra unut dediler..

bir sonuç elde ettik. Yani kısaca özetlemek gerekir ise; letter-spacing kodu ile harfler arasına boşluk koymaya gerek kalmaksızın aralarını açabiliyor.

Ayrıca letter: harf, spacing ise aralık demek. Böylece 1 yazıda 2 ingilizce kelime öğrenmiş oldunuz. Kod hakkında ayrıntılı bilgi 2. sayfadadır. Güle güle kullanın.

2 Yorum

  1. Cevap yaz

    Blogum’da logo kullanmıyorum. H etiketiyle ve yazı tipiyle logo yerine kullanıyorum. Letter-spacing kodu sayesinde logo kıvamında duruyor. Güzel kod teşekkürler Murat Abi.

  2. Cevap yaz

    CSS kodlarının detaylı anlatımı için teşekkürler. Müşterilerin istediği bazı yazı fontlarında yine müşterinin istediği etkiyi bırakabilmek için sıklıkla başvurduğum bir uygulama. Her ne kadar bilişim dili İngilizce olsa da kendi dilimizde bilgi kaynağı olacak siteler oldukça az. Girişiminizi destekliyorum. CSS web sayfalarının makyajıdır. CSS bilmeyen bir tasarımcı kendisine web tasarımcıyım demesin.

Bir Cevap Bırakın

Your email address will not be published. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>