Jika Anda perlu menambahkan garis horizontal, pemisah-gaya ke situs web Anda, opsi umum Anda termasuk menambahkan file gambar dari garis ke halaman Anda, tapi itu akan mengharuskan browser Anda untuk mengambil dan memuat file-file tersebut, yang bisa berdampak negatif pada situs kinerja. Anda juga bisa menggunakan properti perbatasan CSS untuk menambahkan batas yang berfungsi sebagai garis baik di bagian atas atau di bagian bawah elemen, secara efektif membuat garis pemisah Anda.
Atau - lebih baik lagi - gunakan elemen HTML untuk aturan horizontal.
Elemen Aturan Horisontal
Penampilan default garis aturan horizontal tidak ideal. Agar terlihat lebih bagus, tambahkan CSS untuk menyesuaikan tampilan visual elemen-elemen ini agar sesuai dengan tampilan situs Anda.
Sebuah tag HR dasar ditampilkan seperti yang diinginkan browser untuk menampilkannya. Peramban modern biasanya menampilkan tag SDM tanpa henti dengan lebar 100 persen, tinggi 2 piksel, dan batas 3D hitam untuk membuat garis.
Lebar dan Tinggi Konsisten di Seluruh Browser
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 akan benar-benar ditulis dalam lembar gaya eksternal untuk memudahkan manajemen di seluruh halaman Anda):
style = "width: 50%;">
Dan dalam contoh ini, tingginya adalah 2em: style = "height: 2em;"> Di browser modern, browser membangun garis dengan menyesuaikan perbatasan. Jadi jika Anda menghapus perbatasan dengan properti gaya, garis akan hilang di halaman. Seperti yang Anda lihat (baik, Anda tidak akan melihat apa pun, karena garis-garisnya tidak terlihat) dalam contoh ini: style = "border: none;">
Menyesuaikan ukuran batas, warna, dan gaya akan membuat garis tampak berbeda dan memiliki efek yang sama di semua browser modern. Misalnya, dalam demonstrasi ini batasnya merah, putus-putus, dan lebar 1 piksel: style = "border: 1px putus # 000;">
Tetapi jika Anda mengubah batas dan tinggi, gaya tampak sedikit berbeda di peramban yang sangat usang daripada yang ada di peramban modern. Seperti yang Anda lihat dalam contoh ini, jika Anda melihatnya di IE7 dan di bawah (browser yang sangat usang dan tidak lagi didukung oleh Microsoft) ada garis dalam yang tidak ditampilkan di peramban lain (termasuk IE8 dan lebih tinggi) : style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
Browser-browser antiqued itu benar-benar tidak terlalu menjadi perhatian dalam desain web saat ini, karena sebagian besar telah diganti dengan opsi yang lebih modern. Alih-alih warna, Anda dapat menentukan gambar latar untuk aturan horizontal Anda sehingga terlihat persis seperti yang Anda inginkan, tetapi masih menampilkan semantik di markup Anda. Dalam contoh ini kami menggunakan gambar yang terdiri dari tiga garis bergelombang. Dengan menetapkannya sebagai gambar latar belakang tanpa pengulangan, itu menciptakan jeda dalam konten yang terlihat hampir seperti yang Anda lihat di buku: style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;"> Dengan CSS3, Anda juga dapat membuat garis Anda lebih menarik. Unsur SDM secara tradisional adalah a horisontal baris, tetapi dengan properti transformasi CSS, Anda dapat mengubah tampilannya. Transformasi favorit pada elemen SDM adalah mengubah rotasi. Anda dapat memutar elemen SDM Anda sehingga hanya sedikit diagonal: jam {-moz-transform: rotate (10deg);-webkit-transform: rotate (10deg);-o-transform: rotate (10deg);-ms-transform: rotate (10deg);transform: rotate (10deg);}
Atau Anda dapat memutarnya sehingga benar-benar vertikal: jam {-moz-transform: rotate (90deg);-webkit-transform: rotate (90deg);-o-transform: rotate (90deg);-ms-transform: rotate (90deg);transform: rotate (90deg);}
Ingat bahwa teknik ini merotasi SDM berdasarkan lokasi saat ini dalam dokumen, jadi Anda mungkin perlu menyesuaikan pemosisian untuk mendapatkan di mana Anda menginginkannya. Tidak disarankan untuk menggunakan ini untuk menambahkan garis vertikal ke desain, tetapi ini adalah cara untuk mendapatkan efek yang menarik. Satu hal yang dilakukan sebagian orang daripada menggunakan elemen SDM adalah mengandalkan batasan elemen lain. Tetapi kadang-kadang, sebuah HR jauh lebih mudah dan lebih mudah digunakan daripada mencoba mengatur batas. Masalah model kotak dari beberapa browser dapat membuat pengaturan perbatasan bahkan lebih rumit. Mengubah Perbatasan Bisa Menantang
Buat Garis Hias dengan Gambar Latar Belakang
Transformasi Elemen SDM
Cara Lain untuk Mendapatkan Baris di Halaman Anda
