Beberapa Style Pada Tag HTML hr Untuk Inspirasi

07/11/2015    Faizal Rafik    6310     Website

Hallo teman-teman DUMET School, pada kesempatan kali ini saya akan berbagi untuk kalian semua yaitu beberapa style pada Tag HTML <hr> yang dapat kalian jadikan inspirasi untuk di gunakan pada website kalian. Tag HTML <hr> di dalam sebuah website di gunakan untuk membuat garis perbatasan antara elemen satu dengan yang lainnya, seperti yang kita ketahui desain pada Tag HTML <hr> sangatlah biasa-biasa saja, tetapi disini kita akan coba merubah desain pada Tag HTML <hr> tersebut menjadi menarik. Baik kita akan langsung masuk ke inspirasi yang pertama.

Pada inpirasi yang pertama ini kita akan coba memberikan warna latar belakang gradient pada Tag HTML <hr>, berikut baris program CSS nya.

Maka jika kalian jalankan hasilnya seperti berikut.

Contoh yang kedua yaitu terdapat 2 garis solid, untuk membuat 2 garis ini kita menggunakan type dari property CSS border yaitu double, berikut baris program CSS nya.

Dan hasilnya seperti ini.

Inspirasi selanjutnya yaitu kita akan coba memberikan efek box-shadow pada Tag HTML <hr>, berikut baris program CSS nya.

Untuk hasilnya seperti berikut.

Inspirasi selanjutnya yang menurut saya menarik yaitu terdapat efek rounded pada kedua ujung garis tersebut, berikut baris program CSS nya.

Untuk hasilnya seperti ini.

Nah inspirasi yang terakhir adalah kita akan coba menambahkan icon di tengah-tengah garis, berikut baris program CSS nya.

Untuk hasilnya seperti ini.

Nah itulah beberapa inspirasi style pada Tag HTML <hr> yang dapat kalian jadikan inspiras pada website kalian, sekian dulu artikel dari saya sampai ketemu di artikel selanjutnya ya teman-teman, Terima kasih.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More