0
IMAGE SLICE (MEMECAH GAMBAR)
Posted by Unknown
on
08.31
Teknik Image Slice :
• Merupakan teknik memecah/memotong gambar pada
website.
• Teknik ini digunakan untuk membuat gambar/desain
suatu web lebih fleksibel, cepat, dan menarik.
• Pecahan gambar tersebut akan di satukan kembali
menggunakan kode CSS dan HTML.
• Software yang digunakan : Adobe Photoshop, Adobe
Ilustrator, Corel Draw, Gimp.
RANCANGAN INTERFACE
index.html
style.css
body
{
font-family:
Verdana, Arial, Helvetica, sans-serif;
background-color:
#380a62;
font-size:14px;
}
#kotak
{
width:
920px;
margin:auto;
}
#kotak #logo
{
background-image:
url(../images/logo.jpg);
height:
60px;
width:
920px;
}
.search
{
padding-left:680px;
padding-top:33px;
color:#ffffff;
font-size:12px;
}
#kotak #header
{
background-image:
url(../images/header.jpg);
float:
left;
height:
252px;
width:
920px;
margin-bottom:18px;
}
#kotak #content {
background-image:
url(../images/background.jpg);
float:
left;
width:
902px;
padding-right:
10px;
padding-left:
8px;
}
#kotak #content #kiri {
float:
left;
width:
190px;
padding-right:
5px;
padding-left:
5px;
}
#kotak #content #tengah {
float:
left;
width:
502px;
}
#kotak #content #kanan {
float:
left;
width:
190px;
padding-right:
5px;
padding-left:
5px;
}
#kotak #batas
{
clear:
both;
}
#kotak #footer
{
height:
46px;
width:
920px;
margin-top:
5px;
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size:
11px;
color:
#FFFFFF;
text-align:
center;
}
#kotak #content #tengah #pages {
margin-top:
-8px;
text-align:
left;
color:
#000000;
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size:
12px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
border-radius:
0px 0px 7px 7px;
-moz-border-radius:
0px 0px 7px 7px;
-webkit-border-radius:
0px 0px 7px 7px;
border:
1px solid #B6B4B4;
}
#kotak #content #tengah #pages #navteng {
background-color:
#FB9B23;
height:
23px;
width:479px;
text-align:
left;
color:
#FFFFFF;
font-weight:bold;
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size:
12px;
padding-left:20px;
padding-top:10px;
margin-top:-11px;
margin-left:-10px;
border-radius:
0px 0px 0px 0px;
-moz-border-radius:
0px 0px 0px 0px;
-webkit-border-radius:
0px 0px 0px 0px;
border:
1px solid #B6B4B4;
}
#nav {
background-color:
#DEBBFB;
height:
20px;
text-align:
center;
color:
#780ed0;
font-weight:bold;
font-family:
Verdana, Arial, Helvetica, sans-serif;
font-size:
11px;
padding:6px
2px 0px 1px;
border:
1px solid #B6B4B4;
border-radius:
7px 7px 0px 0px;
-moz-border-radius:
7px 7px 0px 0px;
-webkit-border-radius:
7px 7px 0px 0px;
}
#pages{
border:
1px solid #B6B4B4;
margin-bottom:
5px;
padding-left:8px;
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
border-radius:
0px 0px 7px 7px;
-moz-border-radius:
0px 0px 7px 7px;
-webkit-border-radius:
0px 0px 7px 7px;
}
.isi{
font-size:11px;
}
#kotak #headcont {
background-image:
url(../images/headcont.jpg);
float:
left;
height:
9px;
width:
920px;
}
#kotak #footcont {
background-image:
url(../images/footcont.jpg);
float:
left;
height:
7px;
width:
920px;
}
#menu
{
font-family:
Arial, Helvetica, sans-serif;
font-size:
12px;
font-weight:
bold;
height:
30px;
width:
901px;
top:
220px;
position:
relative;
left:
8px;
}
#menu ul {
margin:
0px;
padding:
0px;
list-style-type:
none;
}
#menu ul li a {
text-decoration:
none;
float:
left;
display:
block;
padding:
8px;
color:
#FFFFFF;
}
#menu ul li a:hover {
color:#F9951D;
}
OUTPUT LAYOUT WEB
Anda dapat membuat gambar sesuai yang anda inginkan ^_^
Posting Komentar