Rabu, 09 November 2016

Cara Membuat Menu Navigasi Dengan HTML CSS

Hai para developer pemula.. hehe. Kali ini BGowa akan membagikan artikel bagaimana cara membuat menu navigasi atau navbar dengan html dan css.

Sebelumnya kita bahas dulu apa itu menu navigasi atau navbar. Navigasi  atau navbar merupakan bagian dari sebuah situs yang berfungsi sebagai cara untuk berpindah dari halaman satu ke halaman lainnya, navigasi merupakan elemen yang penting dan harus ada. Navigasi bisa dihadirkan dalam banyak bentuk dan interaksi dalam sebuah situs sesuai kreativitas masing-masing. Menu Navigasi paling umum diletakan pada bagian atas halaman yang diposisikan pada kiri , tengah atau kanan web tersebut biasanya sejajar dengan logo. Namun ada juga yang meletakan menu navigasi ditempat lain misalnya di bawah header, dalam footer dan masih banyak lagi lainya sesuai selera dari pemilik situs.

Tampilan menu navigasi terkadang tidak hanya seperti yang tampil atau apa yang kita lihat saja biasanya juga terdapat menu di dalam menu yang ada seperti dropdown. Dropdown ini umumnya berisi sub-menu dari menu utama yang ada pada navigasi website tersebut. Dalam membuat menu navigasi kita akan menggunakan tag <ul> dan <li> sebagaimana yang perna saya bahas pada artikel



Gambar di atas merupakan tampilan atau contoh dari menu navigasi yang akan kita buat. Seperti yang kita lihat terdapat tiga menu utama yaitu Beranda, Artikel, Gambar dan lain -lain . Kemudian pada menu List terdapat dua sub-menu atau  dropdown menu Tips Sukses dan Cara Memasak Mie. Pada contoh di atas terdapat link atau perintah menuju halaman yang kita inginkan akan tetapi belum befungsi jika diklik karena link pada tujuan belum ada (masih menggunakan #).  Anda cukup mengganti tanda # dengan link halaman yang anda inginkan. Ok saatnya kode meluncur... he.2x.

Terdapat dua file yaitu file menu.html dan file style_menu.css, ketik dan simpan masing-masing  kode tersebut pada folder yang sama.

menu.html


<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="menu">
     <ul>
        <div id="heading">
            <a href="#">Bg Art</a></li>
        </div>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="artikel.html">Artikel</a></li>
        <li><a href="gambar.html">gambar</a></li>
        <li><a href="#">list</a>
            <ul>
                <li> <a href="ul.html">Tips Sukses (ul)</a></li>
                <li> <a href="ol.html">Cara Masak Mie (ol)</a></li>
            </ul>
        </li>
        <li><a href="table.html">Data</a></li>
        <li><a href="form.html">Form</a></li>
        <li><a href="#">Multimedia</a>
            <ul>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
            </ul>
        </li>
    </ul>
</nav>
</html>

style.css


*{
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 14px;
    font-family: verdana;

}
#heading{
    float: left;
    width: 640px;
}
#heading a {
    line-height: 65px;
    text-decoration: none;
    padding-left: 60px;
    color:#FFF;
    font-family: aardvark cafe;
    font-size: 40px;
}
#menu {
    background:#26C4C2;
    width: 100%;
    height: 65px;
    margin: 0px;
    padding: 0px;
    
}
#menu ul {
    list-style: none;

}
#menu ul li {
    float: left;
    line-height: 65px
}
#menu ul li a {
    float:left; 
    width:100px; 
    display:block; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
}
#menu ul ul {
    display:none; 
    list-style:none; 
    position:absolute; 
    background-color:#26C4C2;
    float: none;
    top:65px; 
    width:190px;
}
#menu ul li a:hover {
    background-color:#2E9EA2; 
    display:block;
}
#menu ul li:hover ul {
    display:block;
}
#menu ul ul li a {
    display:block;
    padding-left:30px; 
    text-align:left; 
    width:160px;
    height: 60px;
    line-height: 60px;
}
#menu ul ul li a:hover {
    color:#fff;
}



Lihat hasilnya, semoga berhasil.

Sekian dulu artikel BGowa – cara membuat menu navigasi atau navbar kali ini, semoga bermanfaat.

Selasa, 08 November 2016

Membuat Efek Dispersion Dengan Photoshop

Membuat efek dispersion pada foto sangatlah mudah, karena menggunakan brush tool. brush yang digunakan adalah jenis brush splatter. Dengan bermain efek ini, seolah-olah foto kita akan tercerai-berai seperti air.



Lansung saja, Berikut langkah-langkahnya.
1.  Siapkan foto yang ingin kita edit, Kemudian buka Photoshopnya.


    Usahakan Fotonya sudah dihilangkan backgroundnya.

2. Duplikat layer 1 (gambar sebelumnya saya beri nama layer 1) dengan menekan Ctrl+J pada keyboard, kemudian akan muncul layer copy 1. Perbesar ukuran gambar layer copy 1 dengan menekan Ctrl+T, dan atur besarnya dengan klik kiri.


3.  Buatlah masking pada tiap-tiap layer. Layer 1 beri masking warna putih dan Layer Copy 1 beri masking warna hitam. Untuk membuat masking, pilih terlebih dahulu layer yang ingin di beri masking. Kemudian klik icon add layer mask  pada bagian bawah layer. Untuk membuat masking hitam caranya sama, tapi sebelum klik icon add layer mask  tekan dan tahan tombol alt pada keyboard.

4.  Pilih brush tool dan tentukan jenisnya menjadi splatter. (Berikut tampilan Brush yang saya gunakan )
Yang ingin download silakan download di Devianart

5.  Kemudian atur warna pada layer 1 copy sperti di bawah ini. Jika sudah klik pada area luar foto menggunakan brush tadi.

6.  Sekarang pilih layer 1 dan atur warna seperti dibawah ini.

Klik bagian pinggir dalam gambar menggunakan brush splatter tadi

Kesimpulannya perbedaan Layer 1 dengan masking Putih dan Layer copy 1 dengan masking hitam, Masking putih berfungsi untuk menghapus gambar sedangkan masking hitam untuk memunculkan gambar.

Lakukan serapih mungkin, aturlah jenis dan ukuran brushnya

Nah itulah cara membuat efek dispersion pada photoshop menggunakan brush Splatter. Mudahkan......