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

  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • 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.

Kiriman terbaru