Garis Unik Blogspot

Dibawah ini contoh garis yang lain daripada lain menurut pendapat saya, Kenapa begitu karena garis berikut dikemas dengan CSS plus Gradient, jadi ibaratnya bakso ditambah daging sapi sama cakar ayam hehe.

Berikut ini contohnya.

1. Kode Garis Normal.

Cara Pasang.

<hr/>

hr { background: #ddd; clear: both; float: none; width: 100%; height: 1px; margin: 0 0 1.4em; border: none; }

2. Garis Efek Dengan Tepi Pudar.

Demo

Cara Pasang.

<hr class='faded'/>

hr.faded { clear: both; float: none; width: 100%; height: 1px; margin: 1.4em 0; border: none; background: #ddd; background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0, rgb(255,255,255)), color-stop(0.1, rgb(221,221,221)), color-stop(0.9, rgb(221,221,221)), color-stop(1, rgb(255,255,255)) ); background-image: -moz-linear-gradient( left center, rgb(255,255,255) 0%, rgb(221,221,221) 10%, rgb(221,221,221) 90%, rgb(255,255,255) 100% ); }

2. Garis Dengan Efek berukir.

demo

---

Cara Pasang.

<hr class='carved'/>

hr.carved { clear: both; float: none; width: 100%; height: 2px; margin: 1.4em 0; border: none; background: #ddd; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.5, rgb(221,221,221)), color-stop(0.5, rgb(255,255,255)) ); background-image: -moz-linear-gradient( center top, rgb(221,221,221) 50%, rgb(255,255,255) 50% ); }

2. Garis Dengan Efek Dalam.

Demo.

INI GARIS KU

Cara pasang.

<p id='blog'>INI GARIS KU</p>

#blog { border-top: 1px solid midnightblue; box-shadow: inset 0 1px 0 white; }