Cara Merubah Warna Background Pada Saat di Scroll
Halo teman-teman di panduan kali ini saya akan menjelaskan Cara Merubah Warna Background Di Dikala di Scroll, selain membangun laman kita menjadi lebih menarik background scroll pun berfungsi selaku penarik pengunjung asalkan warna yang kita gunakan di laman kita mesti sesuai.
bagi Cara Merubah Warna Background Di Dikala di Scroll langkah pertama-tama yang kita lakukan yaitu silahkan teman-teman buka text editornya dan silahkan teman-teman simpan script dibawah ini dengan nama index.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Cara Merubah Warna Background Di Dikala di Scroll</title>
<link rel=stylesheet href=styles.css>
</head>
<body>
<div class=container>
<div class=over>
<div class=scroll>
<h1>Cara Merubah Warna Background Di Dikala di Scroll</h1>
</div>
<div class='scroll'><h2>Warna 1</h2>
<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 sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class='scroll'><h2>Warna 2</h2>
<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 sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class='scroll'><h2>Warna 3</h2>
<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 sistem aplikasi like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>
</html>
Berikutnya kita akan membangun file cssnya bagi mengatur layout dan style dari background yang akan kita bikin, dan silahkan teman-teman simpan script dibawah ini dengan nama styles.css
*{margin: 0; padding: 0}
.container {
width: 100%;
min-width: 1200px;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url('namagambar.jpg');
}
.container .over {
background: linear-gradient(to bottom, rgba(135,206,250, 0.5) 0%, rgba(176, 203, 31, 0.5) 80%, rgba(239, 127, 26, 0.5) 100%);
}
.container .scroll {
width: 100%;
height: 1000px;
position: relative;
}Berikutnya silahkan teman-teman simpan segala script yang telah kita bikin tersebut, sekiranya kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Bagaimana teman-teman lumayan gampang bukan Cara Merubah Warna Background Di Dikala di Scroll nya, demikian dulu panduan saya kali ini mengenai Cara Merubah Warna Background Di Dikala di Scroll
Semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
