Kustomisasi Ordered List dengan CSS

Kustomisasi Ordered List dengan CSS - Pada element ordered list kita bisa bebas mengubah list default dengan menggunakan style CSS, tentu list order tidak hanya dengan angka tetapi juga bisa dengan objek gambar, warna dan yang lainnya. Nah, buat kalian yang ingin mencoba mengubah element list order tapi masih bingung caranya, berikut akan saya kasih tutorial bagaimana Kustomisasi Ordered List dengan CSS. Caranya sangat mudah sekali, langsung saja kita praktekan bagaimana mengubah list ordernya.

Langkah 1: Kustomisasi Ordered List dengan CSS

Baik, kita mulai dengan langkah pertama, yakni kita akan membuat list order (berurutan) dengan sintak HTML. Kalian bisa sesuaikan untuk membuat list dan isi sesuai dengan keinginan.

<body>
    <ol>
        <li>Web Master</li>
        <li>Graphic Design</li>
        <li>Web Design</li>
        <li>Digital Marketing</li>
        <li>Web Programming</li>
        <li>SEO</li>
        <li>Komputer</li>
    </ol>
</body>

Langkah 2: Kustomisasi Ordered List dengan CSS

Langkah selanjutnya kita akan mengubah style list ordernya dalam kasus ini lstyle list nya berupa bentuk kotak dan bulatan yang akan di custom dengan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Muli');
body {
    font-family: 'Muli', sans-serif;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

ol {
    list-style-type: none;
    max-width: 500px;
}

li {
    counter-increment: list +1;
    position: relative;
    padding: 1em;
    text-transform: uppercase;
    color: #7f8c8d;
    font-size: 1.25em;
}

li:before {
    box-sizing: border-box;
    content: counter(list);
    position: absolute;
    bottom: .25em;
    left: -2.5em;
    background: black;
    color: white;
    width: 2.5em; height: 2.5em;
    text-align: center;
    padding-top: .7em;
}

li:nth-child(1):before {
    background: #EA3556;
}

li:nth-child(2):before {
    background: #61D2D6;
    border-radius: 50%;
}

li:nth-child(3):before {
    background: #ED146F;
}

li:nth-child(4):before {
    background: #EDDE45;
    border-radius: 50%;
}

li:nth-child(6):before {
    background: #D2A951;
    border-radius: 50%;
}

li:nth-child(7):before {
    background: #857B5D;
}

Setelah semua sintak telah diketikan, simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka akan terlihat seperti pada gambar berikut.

Kustomisasi Ordered List dengan CSS

Bagaimana, cukup mudah bukan untuk membuatnya ? Cukup sekian tutorial mengenai Kustomisasi Ordered List dengan CSS, semoga bermanfaat dan selamat mencoba :)

21 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat