Cara Memberi Efek Shadow Pada Tag HR

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Memberi Efek Shadow Pada Tag HR.

Tag <hr/> adalah tag yang berbentuk garis horizontal yang mendatar dari kiri ke kanan, biasanya tag <hr/> di gunakan untuk pembatas atau pemisah dari satu elemen ke elemen yang lainnya. Tag <hr/> mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Sekarang saya akan mencoba membuat tutorial singkat tentang Cara Memberi Efek Shadow Pada Tag HR:

-Pertama teman-teman ketikan tag html di bawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Horizontal</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
	<h1>Dumetschool</h1>
	<hr/>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</body>
</html>

Apabila kita jalankan di browser maka hasilnya akan menjadi seperti gambar di bawah ini:

â€“ Kedua untuk memberikan efek shadow pada tag <hr/> teman-teman ketikan kode css3 di bawah ini:

body {
  padding: 50px;
}

hr {
  border: none;
  border-top: 3px solid darkblue;
  padding: 0;
  -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
}

setelah selesai teman-teman save dan beri nama style.css, karen pada kode html di atas saya sudah link-an cssnya dengan nama file style.css.

Coba teman-teman refresh browser teman-teman, maka hasilnya akan menjadi seperti gambar di bawah ini:

Nah, teman-teman bisa mengganti warna dari tag <hr/> tersebut sesuai keingan teman-teman.

Bagaimana teman-teman mudahkan Memberi Efek Shadow Pada Tag HR.

Sekian tutorial saya untuk kali ini tentang Cara Memberi Efek Shadow Pada Tag HR. Maaf bila ada kesalahan dalam tutorialnya.

Sehat selalu ya teman-teman, selamat mencoba.

Kategori