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

  • 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.
  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.

Kiriman terbaru