Membuat garis mencari menarik pada halaman web dengan tag HR
Jika Anda perlu menambahkan garis horizontal, pemisah-gaya ke situs web Anda, Anda memiliki beberapa opsi. Anda dapat menambahkan file gambar sebenarnya dari garis-garis ke halaman Anda, tetapi itu akan mengharuskan browser Anda untuk mengambil dan memuat file-file tersebut, yang bisa berdampak negatif pada kinerja situs.
Anda bisa menggunakan properti perbatasan CSS untuk menambahkan batas yang bertindak sebagai garis baik di bagian atas atau di bagian bawah elemen, secara efektif membuat garis pemisah Anda.
Akhirnya, Anda dapat menggunakan elemen HTML untuk aturan horizontal -
Elemen Aturan Horisontal
Jika Anda pernah meletakkan elemen pada halaman web, Anda mungkin menemukan bahwa cara default bahwa garis-garis ini ditampilkan tidak ideal. Ini berarti bahwa Anda perlu beralih ke CSS untuk menyesuaikan tampilan visual dari elemen-elemen ini agar sejalan dengan bagaimana Anda ingin situs Anda terlihat.
Sebuah tag HR dasar ditampilkan seperti yang diinginkan browser untuk menampilkannya. Peramban modern biasanya menampilkan tag SDM tanpa henti dengan lebar 100%, tinggi 2px, dan batas 3D hitam untuk membuat garis.
Berikut ini contoh elemen HR standar atau Anda dapat melihat dalam gambar ini bagaimana tampilan SDM yang tidak ditata dalam browser modern.
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% dan tinggi default adalah 2px.
Dalam contoh ini, lebarnya 50% 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;">
Mengubah Perbatasan Bisa Menantang
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.
Buat Garis Hias dengan Gambar Latar Belakang
Alih-alih warna, Anda dapat menentukan gambar latar belakang untuk HR 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;">
Transformasi Elemen SDM
Dengan CSS3, Anda juga dapat membuat garis Anda lebih menarik. Elemen HR secara tradisional adalah garis horizontal , 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 ini merotasi SDM berdasarkan lokasi saat ini di 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.
Cara Lain untuk Mendapatkan Baris di Halaman Anda
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.