Mendesain <hr> dengan CSS

Setelah berpusing ria dengan ujian di Kampus, akhirnya bisa meluangkan waktu untuk menulis di blog ini😀. Kali ini kita akan mendesain/membuat style Tag HTML <hr>. Fungsi dari tag <hr> adalah untuk membuat garis horizontal di halaman HTML. Adapun cara penulisannya ada 2 jenis:

  1. Pada HTML dituliskan <hr> tanpa menggunakan penutup tag.
  2. Pada XHTML harus dituliskan dengan penutup tag <hr />

Selain itu, bisa juga kita langsung menuliskan atribut-atribut standar ke dalam tag <hr> tersebut. Seperti; <hr id=""> atau <hr class="">. Untuk lebih lengkapnya bisa langsung dicek di sini.

Berikut salah satu contoh screenshot dari website yang menggunakan tag <hr> untuk mempercantik tampilan webdesign-nya.

<hr> Style
Dari gambar di atas terlihat penggunaan tag <hr> pada bagian bawah artikel. Dan berikut teknik pembuatan tag <hr> seperti pada gambar di atas dengan menggunakan CSS.

Markup HTML

<!DOCTYPE html>
<html>
<head>
<title>Mendesain <hr> dengan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Gradient transparent - color - transparent -->
<hr class="style1">

<!-- Gradient color1 - color2 - color1 -->
<hr class="style2">
<a class="btn" href="#">Demo</a>
</body>
</html>

CSS

body {
	padding: 50px;
}

hr {
	margin: 50px 0;
}

hr.style1 {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

hr.style2 {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #dadada, #333, #dadada);
	background-image:    -moz-linear-gradient(left, #dadada, #333, #dadada);
	background-image:     -ms-linear-gradient(left, #dadada, #333, #dadada);
	background-image:      -o-linear-gradient(left, #dadada, #333, #dadada);
}

Demo

Download

2 thoughts on “Mendesain <hr> dengan CSS

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s