Pengenalan Property Letter-spacing pada CSS

Hallo apa kabare ? apik ? masih dengan tema yang sama yaitu mengenai property pada css ya, kenapa saya beberapa hari ini posting artikel mengenai property css terus, ya karena banyak dari kita yang belajar css tetapi tidak banyak tahu tentang property apa saja yang terdapat pada css. Walaupun tidak akan saya bahas semua tetapi setidaknnya ada beberapa property yang mungkin kalian belum ketahui sebelumnya, jika ingin mengikuti artikel saya mengenai property pada css silahkan baca artikel saya di halaman yang kemarin-kemarin ok 🙂

Ok tidak usang panjang lebar lagi kali ini saya akan memberi lagi property pada css yaitu latter-spacing, Jika kalian pernah tau latter spacing pada microsoft word pasti kalian juga tau fungsinmya untuk apa hehhehe, yomanss fungsinya adalah untuk memberi jarak antaqr karakter atau huruf. Gimana cara menggunakannya ? silahkan lihat di bawah ini :

//HTML

<div class="container">
  <p>The spacing between the individual letters is <em>increased</em> by <code>1em</code>. When you hover over the text container, the spacing will transition back to its normal default value. <code>letter-spacing</code> is transitionable so the spacing will change smoothly if you define a <code>transition</code></p>
  <div class="words">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
    </p>
    <h4>Since letter spacing is inherited, the letter spacing on this child element will also change as it does on the parent, unless you specify otherwise (spacing has been reset on this title)</h4>
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
    </div>
  </div>
</div>

//CSS

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 50px auto;
}

.words {
  background-color: #0099cc;
  color: white;
  padding: 1em;
  letter-spacing: .5em;
  -webkit-transition: letter-spacing .6s ease;
  transition: letter-spacing .6s ease;
}

.words:hover {
  letter-spacing: normal;
}

.inner {
  background-color: #eee;
  color: #333;
  padding: 1em;
}

h4 {
  letter-spacing: normal;
}

Hasilnya akan seperti ini :

Property tersebut akan memberikan jarak antar huruf sesuai yang kita bersama tau kalau latter spacing itu memenag untuk mengatur jarak antar karakter atau huruf. Yupss itu saja heheh semoga bermanfaat .

Sampai bertemu pada artikel tentang property css yang selanjutnya.

Terimakasih.

Pengenalan Property Letter-spacing pada CSS

Kategori