Backme80's blog: Membuat Effek Bayangan pada HTML

Mari kita lihat sebuah situs, http://sizzlejs.com/. Dari seolah olah ada kertas melayang diatas layar. Untuk mencoba-nya mari ikuti langkah berikut ini.

Dari Adobe Photoshop, File->New, masukkan ukuran gambar, Width = 900, height = 240
Set warna foreground menjadi warna lain, misalnya Hijau (#2F2D7E) dengan menggunakan "Paint Bucket Tools"
Buat sebuah kotak, Tekan M dan buatlah kotak diatas kanvas tersebut.
Buat layer baru dari tab Layers. Jika anda tidak menemukan tab layers, tekan F7. Klik Create a new Layer dibagian bawah, (samping kiri gambar tong sampah pada tab layer). Layer baru bernama "Layer 1"
Set warna foreground jadi putih,
Tekan G dan penuhi kotak dengan warna putih.
Berikan effek bayangan dari Layer tersebut dengan cara doubleklik "Layer 1" dari tab layer -> Beri tanda centrang pada Drop Shadow.

Dengan menggunakan Slice tool atau tombol K, potong gambar menjadi 3 bagian
Dari menu File -> Save for Web, klik save, beri nama misalnya: border (diasumsikan anda menyimpannya di d:\web\test\images, setelah disimpan maka akan ada 3 file di d:\web\test\images\images.
Pindahkan seluruh file di d:\web\test\images\images\*.* ke d:\web\test\images\ dari Explorer
Buat sebuah file html d:\web\test\index.html
Isikan kode berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test border</title>
</head>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<body>
<div class="divAtas" align="center"></div>
<div class="divTengah">
<div class="kontenInduk">disini dia konten kita</div>
</div>
<div class="divBawah"></div>
</body></html>

Simpan file ini
Buat file di d:\web\test\css\index.css dan isikan dengan :

body {
background-color: #2F2D7E;
font-family: "Trebuchet MS", Verdana, Tahoma, sans-serif;
font-size: 12px;
color: #333333;
background-repeat: repeat-x;
margin: 0px;
}

.divAtas {
padding-top:127px;
background-image: url(../images/border_01.jpg);
background-repeat: no-repeat;
background-position: center 0;
}

.divTengah {
width:900px;
margin:0px auto 0;
background-image: url(../images/border_02.jpg);
background-repeat: repeat-y;
background-position: 0;
}

.divBawah {
padding-top:65px;
background-image: url(../images/border_03.jpg);
background-repeat: no-repeat;
background-position: center 0;
}

.kontenInduk {
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}

Simpan file tersebut.
nah, cobalah buka situs anda dengan men-double click file index.html yang ada di d:\web\test\
untuk pembenahan, perbaiki index.css pada teks miring

Backme80's blog

Selasa, 23 Februari 2010

Membuat Effek Bayangan pada HTML

1 komentar:

Arsip Blog

Pencarian..