Pengenalan Property Letter-spacing pada CSS

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

Ok tak usang panjang lebar lagi kali ini saya akan memberi lagi property di css yaitu latter-spacing, Bila kalian pernah tau latter spacing di microsoft word pasti kalian pun tau fungsinmya bagi apa hehhehe, yomanss fungsinya ialah bagi 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 bagi mengatur jarak antar karakter atau huruf.   Yupss itu saja heheh semoga bermanfaat .

Hingga bertemu di artikel mengenai property css yang berikutnya.

Terimakasih.

Sumber https://kursuswebsite.org