Tutorial HTML5 CSS3 - Bagian 4

By Unknown

วันเสาร์ที่ 23 กุมภาพันธ์ พ.ศ. 2556

Ini adalah bagian 4 dari tulisan saya yang berjudul Tutorial HTML5 CSS3, langsung saja ya..


Langsung isi code berikut di dalam tag <footer>


<p>
    Design By Megahnanda Bintang M.<br>
    2013 Megahnanda
</p>

Very-very simple.. dan ini hasilnya:

Lho,,, kok sudah ditaruh di Footer kok malah ada di tengah2 gitu?? diam saja kau,, waktunya CSS :D


footer{
clear: both;
width: 900px;
background-image: url(images/footer-loop.png);
background-position: top left;
background-repeat: repeat-x;
margin: 0 auto;
padding-top: 27px;
padding-bottom: 27px;
}
kita kasih Clear:both, agar pengaruh dari Float left dan right di atasnya menjadi netral. pada Footer ini juga kita kasih efek gambar Not yang diulang-ulang secara horizontal (repeat-x).

footer p{
font-family: arial;
font-size: 11px;
font-style: italic;
background-image: url(images/logo-footer.png);
background-position: center right;
background-repeat: no-repeat;
line-height: 16px;
}
di sini kita hanya memberi efek background image berisi logo yang terletak di sisi kanan.

Dan hasilnya harus seperti pada video di bawah ini:

Nah sampai di sini saja Tutorial HTML5 CSS3 dari saya, silakan dikomentari, semoga bermanfaat, terima kasih, wassalam..

Share :

Facebook Twitter Google+