Home » Web Designs » Membuat Tampilan Heading Dengan Pseudo-Element CSS

Membuat Tampilan Heading Dengan Pseudo-Element CSS

Sekilas

Sebuah heading dengan overlay sebuah garis membuat sebuah website nampak lebih oke. Teknik ini banyak dijumpai pada website dengan tampilan jenis vintage atau retro. Meski ini hanya hal yang kecil, tapi tampilan website yang bagus juga disusun dari hal-hal yang kecil dan simpel.

Membuat tampilan heading dengan overlay sebuah garis sebenarnya banyak tekniknya. Pada tulisan ini saya akan membagikan salah satu triknya menggunakan pseudo-element CSS. Trik ini tanpa background-image dan Javascript. Trik ini juga sudah bersifat Fluid.

Spesifikasi Tutorial

  • Level : Dasar
  • Durasi : 15 Menit
  • Materi : Membuat Tampilan Heading dengan Pseudo-Element CSS.
  • Programming : HTML, CSS.

Langkah Pembuatan

Konsep dasarnya berada pada kode CSS yang menggunakan pseudo-element berikut. Garis hitam yang dibuat dengan border-top lebarnya didefinisikan dengan ukuran persen (%). Kemudian posisinya dari atas diturunkan 50% sehingga berada di tengah teks dan dikunci dengan nilai absolute.

h1.judul:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}

Kemudian kita buat sebuah span yang posisinya di atas garis hitam, tambahkan warna background putih sehingga seolah meng-overlay. Tambahkan juga atribut z-index untuk memastikan posisi span berada di atas garis.

h1.judul span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}

Bagaimana kalau kode CSS tersebut diimplementasikan dalam tampilan HTML? Cekidot contohnya di bawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Membuat Tampilan Heading Dengan Overlay Garis</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header, article, footer, hgroup,
menu, figure, aside, nav, section { display: block; }
body { font-family: Bitter, sans-serif; text-align: center; background: transparent; padding: 10px 40px; }
p {
text-align: left;
margin-bottom: 30px;
line-height: 22px;
}
h1 {
position: relative;
margin-top: 20px;
}
h1.judul {
margin-top: 0;
}
h1.judul:before {
content: "";
display: block;
border-top: solid 1px black;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
h1.judul span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 class="judul"><span>Judul Ber-overlay Garis</span></h1>
<p>Tampilan judul yang dibikin dengan CSS seperti contoh di atas adalah salah satu dari sekian banyak teknik yang bisa dipakai untuk membuat overlay garis yang menyertai judul. Biasanya tampilan semacam ini banyak digunakan dalam website dengan desain vintage/retro. Namun tidak menutup kemungkinan untuk dicoba dalam berbagai jenis tampilan website agar lebih keren.</p>
</body>
</html>

Mudah kan? Selamat mencoba tutorial ini. Semoga bermanfaat.

Tes Tampilan di Beberapa Browser

Teknik di atas telah sukses dicoba di browser Firefox 10, Chrome 17, Safari 5.1.2, dan Internet Explorer 9.

2 Comments

  1. manteb gan, langsung dipakai buat next project :p

  2. wah, mantab nih share artikelnya,.
    makasih banyak gan,.

Leave a Reply

Scroll To Top