Membuat halaman web dengan latar background bintang dengan css

Background unik bentuk bintang

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 **

Artikel Lainnya

  • 6 Cara penulisan warna dalam css
    Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru