Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA KOTAK MENU |
| November 28, 2010 Posted by: Fauzie |
Kandungan Tutorial
Saya sukakan website yang mempunyai design yang "simple". Website yang berkonsepkan seperti ini dikenali sebagai "minimalist". Untuk mendapatkan website "simple design" ini, satu perkara yang harus dilakukan ialah membina dan merekacipta sendiri sesuatu website itu dan yang penting banyak membuat "experiment".
Satu perkara yang saya suka membuat experiment ialah membina kotak-kotak menu yang diselikan dengan image serta ringkasan artikel seperti dalam site saya ini. Konsep ini telah ramai yang mempertengahkannya terutama site-site yang dibina menggunakan kod HTML5. Saya juga telah ber"experiment" bagi mendapatkan kotak menu seperti di site ini dimana konsep hover telah digunakan.
Dalam artikel kali ini saya ingin tunjukkan kotak menu yang telah saya buat dengan memperkenalkan feature-feature CSS seperti "CSS box", "box shadow", div, span style dan <li>. Di bawah ini ialah "Live Demo" bagi kotak tersebut.
"Live Demo" kotak menu.
Architect of Transport
TAJUK ARTIKELHello. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel. Read more here →
Kod-kod mark-up dan CSS adalah seperti berikut. Anda perlu mempunyai asas HTML untuk memahaminya. Ini hanyalah contoh dan anda boleh mempelajarinya dengan copy & paste kesemua kod-kod ini ke dalam Notepad.
<html>
<head>
<style type="text/css">
/***Contoh Kotak menu***/
.pos {
position: relative;
cursor: pointer;
height: 178px;
width: 165px;
float: left;
margin: 0 5px 10px 0;
}
.kotakpos {
display: block;
background: url('http://i425.photobucket.com/albums/pp331/fauzi6009/frame.png') #fff;
padding: 15px 20px 12px 20px;
height: 138px;
font-style: italic;
-moz-box-shadow: 5px 0px 10px grey;
-webkit-box-shadow: 5px 0px 10px grey;
}
.fotospan {
width: 149px;
height: 149px;
overflow: hidden;
position: relative;
display: block;
margin: -7px 0 0 -12px;
}
.artikeloverflow {
margin-top:10px;
height: 128px;
width:160px;
display: block;
padding: 10px;
text-align: right;
background-image: none;
font-family: Georgia;
font-size: 10px;
line-height: 16px;
text-decoration: none;
}
/***Kotak besar***/
#kotakbesar {
list-style:none;
background-color: #fff;
margin-left:190px;
margin-top:-160px;
height:300px;
width:230px;
border:1px solid #ccc;
-moz-border-radius: 10px; /* The radius for Mozilla */
-webkit-border-radius: 10px; /* The radius for Webkit */
font-size:10px; /* The font size */
font-family: Arial, Helvetica, sans-serif;
color:#ccc;
text-shadow:0px 1px 1px #fff;
padding:10px;
text-align:center;
display:block;
}
#kotakbesar li{
background:#fff;
}
#kotakbesar li hover{
background:#fff;
}
#kotakbesar #buz {
background:#fff;
height:210px;
margin-top:-20px;
}
#kotakbesar h3{
font-weight:bold;
}
#kotakbesar h3 a:hover {
color:#e6290e;
}
#kotakbesar li:hover h3 {
color:#e6290e;
}
.ayat{
font-size:1em; /* The font size */
font-family: Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 1px #fff;
margin:0;
padding:0;
text-align:left;
font-size:13px; /* Font size */
display:block;
}
/***Untuk buat huruf pertama besar***/
#TextWithDropCap:First-Letter {
color: Maroon;
font-size: 400%;
float:left;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="pos">
<div class="kotakpos">
<div class="fotospan"><img alt="" src="http://www.outdoor-photos.com/_photo/3833829.jpg" width="149" border="0" height="149" />
</div>
</div>
</div>
<div class="artikeloverflow">
<a href="#" style="text-decoration: none;">
<span style="color:#000;">April 14, 2010</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Written by, Fauzie</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Posted in Web design, Art</span>
</a>
<br/>
</div>
<ul id="kotakbesar">
<li id="buz">
<h2><i><span style="font-weight:normal;">Architect of Transport</span><br/></i>
<b><a href="#" style="text-decoration: none;color:maroon;">KOTAK SATU</a></b></h2>
<div class="ayat">
<div id="TextWithDropCap">Hello. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel. <a href="#" style="text-decoration: none;"><i><span style="color:red;">Read more here →</span></i></a></div></div></li></ul>
</body>
</html>
<head>
<style type="text/css">
/***Contoh Kotak menu***/
.pos {
position: relative;
cursor: pointer;
height: 178px;
width: 165px;
float: left;
margin: 0 5px 10px 0;
}
.kotakpos {
display: block;
background: url('http://i425.photobucket.com/albums/pp331/fauzi6009/frame.png') #fff;
padding: 15px 20px 12px 20px;
height: 138px;
font-style: italic;
-moz-box-shadow: 5px 0px 10px grey;
-webkit-box-shadow: 5px 0px 10px grey;
}
.fotospan {
width: 149px;
height: 149px;
overflow: hidden;
position: relative;
display: block;
margin: -7px 0 0 -12px;
}
.artikeloverflow {
margin-top:10px;
height: 128px;
width:160px;
display: block;
padding: 10px;
text-align: right;
background-image: none;
font-family: Georgia;
font-size: 10px;
line-height: 16px;
text-decoration: none;
}
/***Kotak besar***/
#kotakbesar {
list-style:none;
background-color: #fff;
margin-left:190px;
margin-top:-160px;
height:300px;
width:230px;
border:1px solid #ccc;
-moz-border-radius: 10px; /* The radius for Mozilla */
-webkit-border-radius: 10px; /* The radius for Webkit */
font-size:10px; /* The font size */
font-family: Arial, Helvetica, sans-serif;
color:#ccc;
text-shadow:0px 1px 1px #fff;
padding:10px;
text-align:center;
display:block;
}
#kotakbesar li{
background:#fff;
}
#kotakbesar li hover{
background:#fff;
}
#kotakbesar #buz {
background:#fff;
height:210px;
margin-top:-20px;
}
#kotakbesar h3{
font-weight:bold;
}
#kotakbesar h3 a:hover {
color:#e6290e;
}
#kotakbesar li:hover h3 {
color:#e6290e;
}
.ayat{
font-size:1em; /* The font size */
font-family: Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 1px #fff;
margin:0;
padding:0;
text-align:left;
font-size:13px; /* Font size */
display:block;
}
/***Untuk buat huruf pertama besar***/
#TextWithDropCap:First-Letter {
color: Maroon;
font-size: 400%;
float:left;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="pos">
<div class="kotakpos">
<div class="fotospan"><img alt="" src="http://www.outdoor-photos.com/_photo/3833829.jpg" width="149" border="0" height="149" />
</div>
</div>
</div>
<div class="artikeloverflow">
<a href="#" style="text-decoration: none;">
<span style="color:#000;">April 14, 2010</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Written by, Fauzie</span>
</a>
<br/>
<a href="#" style="text-decoration: none;">
<span style="color:#000;">Posted in Web design, Art</span>
</a>
<br/>
</div>
<ul id="kotakbesar">
<li id="buz">
<h2><i><span style="font-weight:normal;">Architect of Transport</span><br/></i>
<b><a href="#" style="text-decoration: none;color:maroon;">KOTAK SATU</a></b></h2>
<div class="ayat">
<div id="TextWithDropCap">Hello. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel, nonummy a, ultrices a, justo. Ut pretium viverra neque. Nulla rhoncus tincidunt dui. Aliquam eu massa vitae dui imperdiet aliquet.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac leo vel dolor tempus interdum. In hac habitasse platea dictumst. Quisque ligula sapien, auctor vel. <a href="#" style="text-decoration: none;"><i><span style="color:red;">Read more here →</span></i></a></div></div></li></ul>
</body>
</html>
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
