Property List-Style-Image Pada CSS

Hai teman-teman, masih dengan pembahasan sebelumnya kali ini saya akan kembali mengangkat tutorial mengenai css property, css proprti yang akan saya bahas kali ini adalah List-Style-Image . Apa fungsi dari properi tersebut ? masi kita cari tau dengan mencobanya 🙂

Properti ini memiliki fungsi untuk memberikan gambar pada unordered list atau tag <ul> pada html yang biasanya berbentuk bulat-bulat menjadi gambar sesui dengan apa yang kita inginkan.

Ini adalah code HTML nya :

<div class="container">
  <p>The image used as a list style in the following example is the following: <img src="http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image.png" alt="image used as marker"></p>
  <ul class="first-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
  </ul>
  <p>The image used as a list style in the following example is the following: <img src="http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/list-style-image/list-style-image-2.png" alt="image used as marker"></p>
  <ul class="second-list">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
  </ul>
</div>

Ini adalah code CSS nya :

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

.container {
  margin: 40px auto;
  max-width: 700px;
}

.first-list {
  list-style-image: url(list-style-image.png);
}

.second-list {
  list-style-image: url(list-style-image-2.png);
}

li {
  vertical-align: top;
}

Untuk url nya samakan dengan letak gambar yang berada di folder kalian.

Hasilnya akan seperti ini :

List yang harusnya bentuknya bulat-bulat hitam sekarang menjadi lebih menarik dengan gambar 🙂

Oke itu saja sampai bertemu pada artikelo tentang css selanjutnya .

Terimakasih.

Kategori