Cara Mempercantik List Pada Menu Menggunakan List-Style-Image

Pada sebagian orang sangat tidak suka dengan list pada menu yang terkesan sebagai sampai yang bulet seperti benalu yang selalu mengikuti, padahal tidak kita inginkan untuk kehadirannya, kali ini kita akan mempergunakan menu listt pada li yang bulet itu menjadi style yang menarik, menarik untuk di lihat dan menarik untuk kita pelajari, pada website website modern sudah banyak menu menu yang menggunakan menu ini agar terlihat mewah dan modern tentunya

dan sebagai animasi yang pasif dan menarik untuk website kita, walau terkesan norak tapi banyak website website yang sudah menerapkan ini, balik lagi ke kitanya bagaimana kita membuat sebuah hal kecil menjadi bahan yang menarik untuk dilihat oleh user, dan user friendly pastinya, sebelum kita masuk pada pembahasan tentang Bagimana Cara Mempercantik List Pada Menu Menggunakan List-Style-Image teman teman sudah diluar kepala yang dalam penggunaan ul li a untuk membuat sebuah link atau menu, jika semuanya sudah diluar kepala, tetapi jika teman teman yang masih baru tenang saja saya akan pandu dengan baik, oke cukup yah intronya, teman teman tidak usah pusing dan tidak banyak script juga untuk membuatnya, hanya perlu beberapa saja ehehe, oke teman teman bisa salinkan scriptnya dibawah sini yah .

<nav>
		
		  <ul>
		    <li><a href="" class="merah">Lorem ipsum</a></li>
		    <li><a href="" class="kuning">dolor sit amet</a></li>
		    <li><a href="" class="hijau">dolor sit amet lorem</a></li>
		    <li><a href="" class="biru">dolor sit amet lorem tex damy</a></li>
		</ul>
	</nav>

style.css

nav{border:11px dotted blue; width: 400px; margin: auto; padding: 20px}
		ul li {list-style :inside;
		  list-style-image:url(https://www.purplecarrot.com/assets/icons/success-icon-a3b15ad932f9b8fdaf1b2dd88b8a5093.png);}
		.merah {font-size:25px; color: red; text-decoration:none}
		.kuning {font-size:25px; color: yellow; text-decoration:none}
		.hijau {font-size:25px; color: green; text-decoration:none}
		.biru {font-size:25px; color: blue; text-decoration:none}

Jika sudah disave dan jalankan dibrowsernya, cukup mudah bukan? Cukup menarik yah, untuk temanteman yang mempunya kreatifitas yang tinggi teman teman bisa devlopnya dengan baik, saya ajarkan ini hanya untuk sebuah gambaran saja, oke cukup sekian tutorial tentang Bagaimana Cara Mempercantik List Pada Menu Menggunakan List-Style-Image. sampai betemu diartikel selanjutnya dan sampai jumpa.

untuk melihat klik DEMO

#KeepLearn

#IsmetMA

The post Cara Mempercantik List Pada Menu Menggunakan List-Style-Image appeared first on Kursus Website Terbaik.