Membuat Border Pelangi Sederhana Dengan CSS Di Blog

Membuat Border Pelangi Sederhana Dengan CSS Di Blog

Jika sebelumnya ada beberapa template yang menggunakan border warna-warni ini di blog dengan gambar sesuai dengan ukuran border yang akan digunakan, pada tutorial kali ini saya tidak menggunakan gambar untuk membuat border tersebut, kali ini saya akan Membuat Border Pelangi dengan menggunakan CSS.

Border ini terdiri dari 7 warna dan bisa ada di tempatkan di mana saja, di atas header, di bawah header, dibawah navigasi menu, maupun di atas footer atau sebaliknya. Contohnya bisa anda lihat pada gambar berikut:

Contoh border warna-warni dengan CSS

Jika anda tertarik membuatnya tambahkan CSS berikut di tempat yang semestinya:

/* Border Pelangi By trikricky.com */
.tr-border{display:table;width:100%;table-layout:fixed}
.tr-border span{float:left;width:14.28%;height:5px;background:#CC0000}
.tr-border span:nth-child(2){background:#FF7E00}
.tr-border span:nth-child(3){background:#F7C602}
.tr-border span:nth-child(4){background:#4D9902}
.tr-border span:nth-child(5){background:#3B94D9}
.tr-border span:nth-child(6){background:#B60783}
.tr-border span:nth-child(7){background:#550175}

Untuk menampilkan bordernya didalam template tambahkan html berikut ditempat yang anda mau.

<div class='tr-border'>
<span/><span/><span/><span/><span/><span/><span/>
</div>

Simpan dan lihat reviewnya. Demikian moga bermanfaat untuk mempercantik tampilan blog anda.
Advertisement
Advertisement

Artikel Terkait

Jangan menunggu kemampuan sebelum anda bersedia Bertindak. Bertindaklah karena itulah yang kelak menjadikan anda mampu