Untuk menambahkan garis horizontal bergaya pemisah ke situs web Anda, satu opsi termasuk menambahkan file gambar dari garis tersebut ke halaman Anda, tetapi itu akan membutuhkan browser Anda untuk mengambil dan memuat file-file itu, yang dapat memiliki efek negatif di kinerja situs. Anda juga bisa menggunakan CSS properti perbatasan untuk ditambahkan perbatasan yang bertindak sebagai garis baik di atas atau di bawah elemen, secara efektif membuat garis pemisah Anda.
Atau—lebih baik lagi—gunakan HTML elemen untuk aturan horizontal.
Elemen Aturan Horizontal
Tampilan default garis aturan horizontal tidak ideal. Agar terlihat lebih bagus, tambahkan CSS untuk menyesuaikan tampilan visual elemen-elemen ini agar sesuai dengan tampilan situs yang Anda inginkan.
Tag HR dasar menampilkan cara browser ingin menampilkannya. Peramban modern biasanya menampilkan tag HR tanpa gaya dengan lebar 100 persen, tinggi 2 piksel, dan batas 3D berwarna hitam untuk membuat garis.
Lebar dan Tinggi Konsisten di Seluruh Peramban
Satu-satunya gaya yang konsisten di seluruh browser web adalah lebar dan gaya. Ini menentukan seberapa besar garisnya. Jika Anda tidak menentukan lebar dan tinggi, lebar default adalah 100 persen dan tinggi default adalah 2 piksel.
Dalam contoh ini lebarnya adalah 50 persen dari elemen induk (perhatikan contoh-contoh di bawah ini semua termasuk gaya sebaris. Dalam pengaturan produksi, gaya ini sebenarnya akan ditulis dalam lembar gaya eksternal untuk kemudahan pengelolaan di seluruh halaman Anda):
style="lebar: 50%;">
Dan dalam contoh ini tingginya adalah 2em:
style="tinggi: 2em;">
Mengubah Perbatasan Bisa Menantang
Di browser modern, browser membuat garis dengan menyesuaikan batas. Jadi jika Anda menghapus batas dengan properti style, garis akan hilang pada halaman. Seperti yang Anda lihat (yah, Anda tidak akan melihat apa pun, karena garisnya tidak akan terlihat) dalam contoh ini:
style="batas: tidak ada;">
Menyesuaikan ukuran batas, warna, dan gaya membuat garis terlihat berbeda dan memiliki efek yang sama di semua browser modern. Misalnya, dalam demonstrasi ini batasnya berwarna merah, putus-putus, dan lebar 1px:
style="border: 1px putus-putus #000;">
Buat Garis Dekoratif dengan Gambar Latar Belakang
Alih-alih warna, tentukan gambar latar belakang untuk aturan horizontal Anda sehingga terlihat persis seperti yang Anda inginkan, tetapi tetap ditampilkan secara semantik di markup Anda. Dalam contoh ini kami menggunakan gambar yang terdiri dari tiga garis bergelombang. Dengan menetapkannya sebagai gambar latar belakang tanpa pengulangan, ini menciptakan jeda dalam konten yang terlihat hampir seperti yang Anda lihat di buku:
gaya = "tinggi: 20 piksel; latar belakang: #fff url (aa010307.gif) pusat gulir tanpa pengulangan; batas: tidak ada;">
Mengubah Elemen SDM
Dengan CSS3, Anda juga dapat membuat baris Anda lebih menarik. Elemen SDM secara tradisional adalah horisontal baris, tetapi dengan properti transformasi CSS, Anda dapat mengubah tampilannya. Transformasi favorit pada elemen HR adalah mengubah rotasi.
Putar elemen HR Anda sehingga hanya sedikit diagonal:
jam {
-moz-transform: putar (10 derajat);
-webkit-transform: memutar (10deg);
-o-transform: memutar (10deg);
-ms-transform: memutar (10deg);
mengubah: memutar (10deg);
}
Atau Anda dapat memutarnya sehingga benar-benar vertikal:
jam {
-moz-transform: putar (90 derajat);
-webkit-transform: putar (90 derajat);
-o-transform: memutar (90deg);
-ms-transform: putar (90 derajat);
mengubah: memutar (90deg);
}
Teknik ini memutar HR berdasarkan lokasinya saat ini di dokumen, jadi Anda mungkin perlu menyesuaikan pemosisian untuk menempatkannya di tempat yang Anda inginkan. Tidak disarankan untuk menggunakan ini untuk menambahkan garis vertikal ke desain, tetapi ini adalah efek yang menarik.
Cara Lain untuk Mendapatkan Garis di Halaman Anda
Satu hal yang dilakukan beberapa orang daripada menggunakan elemen HR adalah mengandalkan batas elemen lain. Tetapi terkadang HR jauh lebih nyaman dan lebih mudah digunakan daripada mencoba mengatur batas. Masalah model kotak dari beberapa browser dapat membuat pengaturan perbatasan menjadi lebih rumit.