Cara Membuat Desain Menu Icon Dengan HTML & CSS Cara Membuat Icon Blog
Hi, berjumpa kembali, pada kali ini akan menjelaskan tentang cara membuat icon blog Cara Membuat Desain Menu Icon dengan HTML & CSS simak selengkapnya
13/06/2019 Risman Hakim 442 Website
Cara Membuat Desain Menu Icon dengan HTML & CSS - Berbagai macam rangka menu kuasa kita jumpai di saban halaman website, ada yang menampilkan rangka berupa teks puas menunya da juga yang dikombinasikan dengan sebentuk icon puas saban menunya. Itu semua dibuat agar rangka website colok lebih menarik dan mempunyai ciri khas puas website. Nah, Kali ini saya hadapan bagikan tutorial simpel tentang bagiamana Cara Membuat Desain Menu Icon dengan HTML & CSS.
Untuk membuat menu icon kali ini tentu ada seluruh langkah yang harus diperhatikan, mulai dari membuat tulangbelulang menu dengan HTML sampai membuat rangka menu dengan CSS. Baik langsung saja kita mulai praktekan cara mmebuatnya.
Kode HTML
Langkah baru tentu kita buat tulangbelulang menu terlebih dahulu dengan kode HTML. Silahkan kalian buat satu file index.html kemudian ketikan kode selanjutnya untuk tulangbelulang menunya.
<body>
<nav>
<div class="menu">
<ul class="clear">
<li>
<a href="#" title="Home">
<i class="fa fa-home" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" title="Features">
<i class="far fa-lightbulb" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" title="Portfolio">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" title="Blog">
<i class="far fa-comment" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" title="Contact">
<i class="far fa-envelope" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
</body>
Kode CSS
Setelah membuat tulangbelulang menu serupa diatas, langkah lebih jauh untuk membuat menu icon colok lebih menarik kita hadapan rangka menunya dengan kode CSS berikut.
body
background: #ccae62;
a
text-decoration: none;
.clear:after
content: " ";
display: block;
clear: both;
.menu
margin-top: 50px;
text-align: center;
.menu ul
list-style-type: none;
display: inline-block;
.menu ul li
float: left;
width: 124px;
height: 140px;
border-color: #e3e3e3;
background-color: #fff;
transition: background-color 0.2s linear 0s;
.menu ul li:first-child border-radius: 25px 0 0 25px;
.menu ul li:last-child border-radius: 0 25px 25px 0;
.menu ul li a
display: table;
width: 100%;
height: 100%;
position: relative;
text-align: center;
.menu a i
display: table-cell;
vertical-align: middle;
color: #ffa801;
font-size: 23px;
transition: all 0.2s linear 0s;
.menu a i:before
border: 2px solid;
border-color: #006266;
border-radius: 500px;
width: 41px;
display: inline-block;
height: 41px;
line-height: 37px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0.2s,
height 0.2s linear 0s,
width 0.2s linear 0s,
line-height 0.2s linear 0s;
.menu a .link-text
position: absolute;
bottom: 13px;
right: 10px;
color: #ffa801;
font-size: 14px;
text-transform: uppercase;
transition: all 0.2s linear 0s;
.menu ul li:hover
background-color: #006266;
.menu ul li:hover .link-text
opacity: 0;
.menu ul li:hover i
color: #ffa801;
font-size: 43px;
.menu ul li:hover i:before
border-color: transparent;
border-radius: 500px;
width: 66px;
height: 66px;
line-height: 60px;
transition: color 0.2s linear 0s,
font-size 0.2s linear 0s,
border-color 0.2s linear 0s,
height 0.2s linear 0s,
width 0.2s linear 0s,
line-height 0.2s linear 0s;
Library icon
Setelah semua sintak HTML dan CSS menebak diketikan, jangan lupa untuk menyelatkan library icon agar icon puas menu bisa tampil.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
Kemudian simpan kembali file nya, silahkan kalian bisa membuka hasil belakangan puas browser masing - masing. Maka hasilnya hadapan colok serupa gambar berikut.
Bagaiaman, cukup menarik bukan menu yang ditampilkan ? Baik, cukup sekian tutorial tentang bagaimana Cara Membuat Desain Menu Icon dengan HTML & CSS, semoga bisa menjadi bibliografi dalam membuat menu puas website. Selamat mencoba dan sampai jumpa di poin lebih jauh :)
Sekian penjelasan mengenai Cara Membuat Desain Menu Icon dengan HTML & CSS semoga artikel ini menambah wawasan salam
tulisan ini diposting pada label cara membuat icon blog, cara membuat icon download di blog, cara membuat icon sosial media di blog, , tanggal 27-08-2019, di kutip dari https://www.dumetschool.com/blog/cara-membuat-desain-menu-icon-dengan-html-css
Komentar
Posting Komentar