Manipulasi Warna Border Dashed

Sedikit trik manipulasi warna dengan menggunakan border dashed.

---

• Penjelasan
• Pengembangan di Menu

---

Penjelasan

Ini akan memperlihatkan seperti Bergerigi.

Kode:

border-bottom:2px dashed #222222;

Dengan ukuran kecil dan warna disamakan dengan warna background, sehingga terlihat seperti bergerigi.

Ini adalah contoh berada disisi lain :

border dashed berada diatas.

border-top:2px dashed #222;

hanya dikiri

border-left:2px dashed #222;

hanya dikanan

border-right:2px dashed #222;

Back To Menu

---

Pengembangan di Menu

Contoh Menu Dashed 1

• Tutorial Kode
• Tutorial XHTML
• Tutorial CSS

Kode CSS:

.dashed{
width:250px;
margin:10px 0;
}

.dashed h4{
background:yellow;
color:#222;
padding:10px;
margin:0;
border-bottom:2px dashed #666666;
}

.dashed ul{
list-style-type:none;
margin:0;
padding:0;
}

.dashed ul li{
}

.dashed ul li a:link, .dashed ul li a:visited{
background:#444444;
color:#bbbbbb;
border-left:2px dashed #444;
border-right:2px dashed #222;
padding:10px 5px;
display:block;
}

.dashed ul li a:hover{
background:#666666;
color:#222222;
border-left:2px dashed #222;
border-right:2px dashed #666;
padding:10px 5px;
}

Kode HTML:

<div class="dashed">
<h4>Contoh Menu Dashed 1</h4>
<ul>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html" target="_blank">Tutorial Kode</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html" target="_blank">Tutorial XHTML</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html" target="_blank">Tutorial CSS</a></li>
</ul>
</div>

---

Contoh Menu Dashed 2

• Tutorial Kode
• Tutorial XHTML
• Tutorial CSS

Kode CSS:

.dashed2{
width:100%;
margin:10px 0;
}

.dashed2 h4{
background:yellow;
color:#222;
padding:10px;
margin:0;
border-right:2px dashed #222222;
border-left:2px dashed #222222;
}

.dashed2 ul{
list-style-type:none;
margin:0 0 0 5px;
padding:0;
}

.dashed2 ul li{
display:inline;
}

.dashed2 ul li a:link, .dashed2 ul li a:visited{
background:#444444;
color:#bbbbbb;
border-top:2px dashed yellow;
padding:10px 5px;
display:inline-block;
}

.dashed2 ul li a:hover{
background:#666;
color:#222222;
border-top:2px dashed #999999;
padding:10px 5px;
}

Kode HTML:

<div class="dashed2">
<h4>Contoh Menu Dashed 2</h4>
<ul>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html" target="_blank">Tutorial Kode</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html" target="_blank">Tutorial XHTML</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html" target="_blank">Tutorial CSS</a></li>
</ul>
</div>

---

• Home
• About
• Search

Kode CSS:

.dashed3{
width:100%;
margin:10px 0;
}

.dashed3 ul{
list-style-type:none;
margin:0 0 0 5px;
padding:0;
}

.dashed3 ul li{
display:inline;
}

.dashed3 ul li a:link, .dashed3 ul li a:visited{
background:#444444;
color:#bbbbbb;
border:8px dashed #444;
padding:10px;
display:inline-block;
}

.dashed3 ul li a:hover{
background:#666;
color:#222222;
border:8px dashed #222;
}

Kode HTML:

<div class="dashed3">
<ul>
<li><a href="http://nanoyulianto.blogspot.com/" target="_blank">Home</a></li>
<li><a href="http://nanoyulianto.blogspot.com/1989/07/apa-siapa-bagaimana-dimana-kapan-kenapa.html" target="_blank">About</a></li>
<li><a href="http://nanoyulianto.blogspot.com/2011/04/search-blog-nano-yulianto.html" target="_blank">Search</a></li>
</ul>
</div>

Border dashed dengan ukuran besar, menu terlihat unik.

Back To Menu

---

Referensi untuk pengembangan:

1. CSS Background

2. CSS Border

3. CSS Lists

4. CSS Display

5. CSS Menu Vertikal dan Horizontal