rudypratama.com - Gradasi warna adalah sebuah visual effect yang dihasilkan oleh perubahan dan pergeseran antara dua warna ataupun lebih. saat ini banyak sekali para pengembang web menggunakan efek gradasi warna untuk mempercantik tampilan website ataupun blog yang mereka kelola. seperti pada situs
rudypratama.com, juga sudah menggunakan gradasi warna pada menu header navbar dan bagian footernya. bisa dibilang efek gradasi warna ini lagi musim-musimnya sekarang dan akan terus mengikuti perkembangan jaman.
Pada artikel tutorial hari ini, saya akan membahas bagaimana cara membuat gradasi warna pada menu header navbar html sederhana dengan metode internal. kode css akan dimasukkan ke dalam satu file
HTML. namun dipisahkan dengan cara memberikan tag
Style di dalam element
HEAD atau kepala dari html itu sendiri. Agar tidak bingung, langsung saja kita lihat secara umum struktur/syntax seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Judul </title>
<style>
Kode Css Disini
</style>
</head>
Pada tulisan
Kode Css Disini, kita akan memasukan css yang diperlukan seperti gradasi warna dan kode css lainnya. selanjutnya kita juga akan memasukan tag navbarnya seperti contoh dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Judul </title>
<style>
</style>
Menu Navbar Disini
</head>
Selanjutnya kita akan memasukkan semua kode yang dibutuhkan. seperti kode css dan menu navbarnya. anda bisa mulai belajar membuat gradasi warna seperti contoh kode yang sudah saya buat dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Rudypratama.com </title>
<style>
* {margin:0; padding:0;}
nav {
margin:auto;
text-align: center;
width: 100%;
font-family: arial;
}
nav ul { background: #1ad713; /* Old browsers */
background: -moz-linear-gradient(left, #1ad713 0%, #a6d94d 19%, #ceb408 37%, #5033df 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #1ad713 0%,#a6d94d 19%,#ceb408 37%,#5033df 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #1ad713 0%,#a6d94d 19%,#ceb408 37%,#5033df 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad713', endColorstr='#5033df',GradientType=1 );
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
width: 100%;
}
nav ul li{
float:left;
}
nav ul li:hover{
background:#ceb408;
}
nav ul li:hover a{
color:#000;
}
nav ul li a{
display: block;
padding: 25px;
color: #fff;
text-decoration: none;
</style>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</head>
|
DOWNLOAD KODENah itulah cara membuat gradasi warna diagonal pada menu navbar website HTML. jika anda ingin mendownload kode lengkapnya, silahkan klik tombol download kode. akhir kata terima kasih semoga bermanfaat.
(Selasa, 22/05/2018)
Komentar
Posting Komentar