Membuat website yang full color in background

Diposting pada

Membuat website yang full color in background

Teknik mendesain website sangat beragam, salah satu yang digemari para desainer yaitu membuat sebuah gambar menjadi background yang full satu halaman. Gambar full background akan menciptakan efek elegan pada website, tentunya harus didukung dengan pemilihan gambar yang bagus, jenis dan warna font yang dipakai juga menentukan.

Bagaimana cara membuat halaman website full background tersebut,  tidak terlalu sulit, pada tulisan ini wakaka design akan memberikan potongan kode yang berguna untuk membuat sebuah gambar menjadi full background.

Kita akan memanfaatkan fungsi css bernama Background-size.

Inti dari membuat website full background adalah menggunakan potongan kode seperti ini, bisa diterapkan di tag html, atau body.

Kita akan memanfaatkan fungsi css bernama Background-size.

Inti dari membuat website full background adalah menggunakan potongan kode seperti ini, bisa diterapkan di tag html, atau body.

html{
background: url(img/bromo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Sekarang waktunya anda memilih gambar

Membuat Struktur HTML
Pada tulisan ini kita akan menggunakan 2 buah Font yang akan kita embed dari Google Web Fonts, yaitu

Rancangan struktur yang akan kita buat terdiri dari
header, untuk menempatkan judul website.
content, untuk menuliskan isi dari website.
footer, untuk menuliskan hak cipta dan sumber.

berikut ini kode selengkapnya
<div class=”container”>

<div class=”header”>
<h1 class=”brand”>Mount Bromo</h1>
<span class=”red”>East Java,</span> <span class=”white”>Indonesia</span>
</div>

<div class=”content”>
</div>

<div class=”footer”>
<div class=”footer-left”>Designed by <a href=”http://tutorial-webdesign.com”>Wakaka Design</a> | back to <a href=”#”>tutorial</a></div>
<div class=”footer-right”>Image By <a href=”http://www.flickr.com/photos/daniele_parisi/2825831148/sizes/o/in/photostream/”>Daniele Parisi</a></div>
</div>

Baca Juga  Pengertian Metode Numerik Dan Prinsip Metode Numerik

</div>
Code CSS
*{padding:0;margin:0}
html{
background: url(img/bromo.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
font-family: ‘Open Sans’, sans-serif;
font-size:13px;
text-shadow: 0px 1px 2px #000;
}
a{color:#999;text-decoration:none}
a:hover{border-bottom:1px solid #999}
.header{
padding:8% 2%;
font-size:24px;
text-shadow: 0px 1px 0px #333;
}
h1.brand{
font-size:50px;
font-family: ‘Oleo Script’, cursive;
text-shadow: 0px 2px 3px #f4f4f4;
}
.header span.red{color:#f20000;}
.header span.white{color:#fff;}

.content{padding:2%;color:#f4f4f4;}
.content p{margin:10px 0}
.footer{
padding:5% 2%;
width:95%;
position:absolute;
overflow:hidden;
color:#f4f4f4;
}
.footer-left{
position:relative;
width:45%;
float:left;
}
.footer-right{
text-align:right;
position:relative;
width:45%;
float:right;
}
Sekian tutorial kali ini, silahkan tuliskan jika ada masukan atau pertanyaan. Tentang Membuat website full color in background

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *