Berbagi itu indah

» » Effek Teks Pada Menu Vertikal Menggunakan CSS

Effek Teks Pada Menu Vertikal Menggunakan CSS

Pada tutorial ini, kita akan mempelajari tentang bagaimana cara membuat efek teks pada link dengan menggunkan Cascading Style Sheets (CSS). Code CSS bermacam-macam type dan jenisnya, dari beragam variasi style color, font, background, border dan lain-lain yang dikombinasi dengan  type/style efek pada link style. Dengan menggunakan kode CSS sebuah link dapat terlihat lebih menarik.
Ada empat link style atau stylesheet dasar untuk link:
  1. a:link { } link yang normal, belum dikunjungi
  2. a:visited { } link yang telah dikunjungi
  3. a:hover { }  link ketika user mengarahkan mouse di atasnya
  4. a:active { } link yang pada saat diklik

Langkah 1

Desain tampilan menu vertikal dengan menggunakan web editor seperti Notepad atau Dreamweaver, simpan dengan nama : Index.html.
</p>
<html>

<head>

<title>.:: Menu vertikal ::.</title>

<link rel="stylesheet" type="text/css" href="StyleMenu.css" />

</head>

<body>

<div>

<h3>Kategori</h3>

<ul>

<li><a href="#">Artikel</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Jurnal</a></li>

</ul>

<h3 class="head">Link Favorit</h3>

<ul>

<li><a href="#">Palcomtech</a></li>

<li><a href="#">Facebook</a></li>

<li><a href="#">Twitter</a></li>

</ul>

</div>

</body>

</html>

Langkah 2

Buat file untuk memformat tampilan menu vertikal dengan menggunakan css. Pada Web editor Dreamweaver, Klik menu file > new > pilih css.
css1
Klik Create.
Langkah 4
Ketik code css berikut ini untuk memformat tampilan menu vertikal, Simpan File dengan nama : StyleMenu.cs.
*{

padding:0; margin:0 auto;

}

.class_menu{

width: 180px;

margin-left:10px;

margin-top:10px;

}
Coding lengkapnya dapat dilihat (disini)
Setelah selesai membuat file css, jalankan file index.html pada web browser, maka hasil yang didapat adalah seperti berikut :
css2
Langkah 5
Ketika mouse diarahkan pada teks maka akan kelihatan efek dan bayangan pada teks.
css3
Demikian tutorial untuk Effek Teks Pada Menu Vertikal Menggunakan CSS, 
Labels: Design Web

Thanks for reading Effek Teks Pada Menu Vertikal Menggunakan CSS. Please share...!

0 Comment for "Effek Teks Pada Menu Vertikal Menggunakan CSS"

Back To Top