Membuat halaman web dengan latar background bintang dengan css
Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
Membuat latar belakang unik dengan css
Langkah awal kit akan buat halaman html sederhana seperti berikut :
<!DOCTYPE html> <html> <head> <title>Judul Halaman</title> </head> <body> <h1>Judul Isi Halaman</h1> <p>Isi Halaman</p> </body> </html>
Kemudian kita simpan dalam format html. Anda yang menggunakan php juga bisa menyimpannya dengan ekstensi php.
Kemudian kita akan menambahkan perintah CSS pada bagian kepala dokumen <head>..</head>, seperti perintah css berikut :
<style type="text/css">
body {
color:#fff;
background:
linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;
}
a { color : #fff; }
</style>
Dokumen html secara lengkap bisa dilihat berikut :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style type="text/css">
body {
color:#fff;
background:
linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px,
linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;
}
a { color : #fff; }
</style>
</head>
<body>
<h1>Judul Isi Halaman</h1>
<p>Isi Halaman</p>
</body>
</html>
Sangat mudah kan, sekarang anda bisa membuka dokumennya dengan browser dan akan terlihat sebuah halaman dengan latar belakang bintang.
Demo latar belakang bintang ini bisa dilihat di :
Demo Latar Belakang Website Bintang
Semoga bermanfaat
** Bebas disunting dengan menyebutkan sumber **
