Mendesain List dengan CSS

Bagaimana cara mendesain list dengan CSS…? List adalah daftar item, baik berurutan maupun tidak berurutan. Dalam CSS anda dapat mendesain list dengan tipe yang lebih banyak lagi, dibanding dengan tipe – tipe list yang disediakan oleh HTML. Bahkan menu yang dibuat dalam halaman website dibuat dari list, yakni dengan menghilangkan simbolnya kemudian menampilkannya secara inline.

CSS juga menyediakan ragam property guna mendesain list, yakni :

List Style

Properti list-style ini merupakan shorthand atau property yang menjadi jalan – pintas untuk mempersingkat pembuatan style pada list / daftar item, karena semua nilai property yang bersangkutan dengan list ini, ada dalam property ini. Dalam hal penyetingan . . .

  • List-style-type
  • List-style-position
  • List-style-image

Jadi, tidak perlu mendeklarasikannya satu per satu. Karena sekali lagi, nilai ketiga property di atas, ada dalam property list-style. Sekarang mari kita lakukan tes pengujiannya. Pertama – tama silahkan download contoh gambar di bawah ini, karena akan kita jadikan salah satu simbol dalam daftar item.

Mendesain List dengan CSS

Di bawah ini adalah contoh kode sumbernya :

Maka hasil output dari kode sumber di atas adalah seperti gambar di bawah ini :

Mendesain List dengan CSS

List Style Image

Dengan menggunakan properti list-style-image anda dapat membuat symbol list item dengan gambar yang anda inginkan sendiri. Nilai properti yang digunakan adalah url(namaGambar.png). Silahkan gunakan contoh gambar anak panah di atas sebagai sample.

Kode Sumber…

Output dari kode sumber di atas :

list style image pada css

List Style Position

Properti ini digunakan untuk menentukan posisi list item apakah sedikit menjorok ke dalam (inside) atau tidak.

Kode Sumber…

Dan di bawah ini adalah hasil dari kode sumber di atas :

cara mendesain list pada css

List Style Type

List-style-type, digunakan untuk menentukan tipe dari symbol list yang akan digunakan.

Kode Sumber…

Dan di bawah ini adalah hasil dari kode sumber di atas :

list style type pada css

Sebenarnya masih banyak lagi ragam cara mendesain list dengan css, silahkan ber eksplore.


Demikian tutorial cara mendesain list dengan CSS, silakan kunjungi tutorial lainnya seperti dimensi elemen pada CSS, positioning elemen, dan pengenalan CSS3.

Leave a comment

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

× Contact Us