July 17, 2024

Effek Teks Pada Menu Vertikal Menggunakan CSS

1 min read

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.

[sourcecode]</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>

[/sourcecode]

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.

[sourcecode]
*{

padding:0; margin:0 auto;

}

.class_menu{

width: 180px;

margin-left:10px;

margin-top:10px;

}
[/sourcecode]

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, Selamat mencoba.. 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.