Membuat Garis Batas 1 Pixel dengan CSS

Seorang Web Designer pastinya akan berusaha membuat tampilan web yang dia kerjakan sesempurna mungkin. Maka dibutuhkan kejelian mengenai hal-hal yang detail dalam proses pembuatan desain suatu web, termasuk garis 1 pixel. Banyak para Web Designer menggunakan trik garis 1 pixel ini untuk:

  1. Mempejelas batas antar konten/layout.
  2. Mempertajam bidang.
  3. Memberikan detail efek visual.

Saat ini banyak sekali website-website yang mengaplikasikan penggunaan garis 1 pixel ini, salah satunya Woothemes.

WoothemesPada bagian footer Woothemes, terlihat garis batas yang memisahkan antara copyright dengan konten yang berada di atasnya. Jika kita perbesar, garis tersebut ternyata tersusun dari 2 warna yang berbeda yang disusun secara berdempetan.

Detail 1 Pixel

Dengan menggunakan software grafis (Photoshop, Illustrator, CorelDraw, dll) tentunya tidak merasa kesulitan dalam pembuatan garis batas 1 pixel ini. Namun, pada artikel ini saya akan mencoba membuat garis batas 1 pixel dengan menggunakan trik CSS yang sederhana. Teknik yang digunakan masih sama yaitu dengan tag html <hr>.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis Batas 1 Pixel dengan CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

<hr class="onepixel">

</body>
</html>

CSS

body {
	background: #d0d9e0;
	padding: 50px; 
}

hr.onepixel {
	border-top: 1px solid #afbcc6;
	border-bottom: 1px solid #eff2f6;
	height: 0px;
	margin-bottom: 20px;
}

Demo

Download

One thought on “Membuat Garis Batas 1 Pixel 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