Tutorial cara nak buat folding menggunakan CSS

Posted: May 29, 2011 in CSS

Kali nak nak razex nak ajarkan bagaimana nak buat folding pada layout yang kita buat.. maksudnya nak bagi heading kita jadi macam pembalut ke pada layout di belakangnya.. Contoh seperti gambar ini :

Langkah2 dia sperti ini :

software yang digunakan

  • Dreamweaver atau perisian lain-lain pun boleh di mana ianya digunakan untuk membina website.

Hardware

  • Dah tentu lah kena ada komputer, takkan nak guna mesin basuh pulak ye x?..hehe

Bahasa Programming

  • HTML,CSS

ok sekarang ni senang je.. aku bagi korang kod CSS dan HTML yang dh siap..n then pastekan je pada perisian web design .. buat satu fail index.html dan pastekan html ini :


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>

<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>

<div id=”kandungan”>

<h1> Halaman RazerxBlog<span></span></h1>
</div>

</body>
</html>


Lepas tu korang bukak satu fail css pulak dan pastekan kod ini di dalam fail css itu dengan nama style.css. Ini kod CSS dia..


@charset “utf-8”;
/* CSS Document */

#kandungan
{
background:#666;
margin:auto;
width:700px;
height:700px;
padding-top:30px;
font-family:Helvetica;
}

h1 {
background: #e3e3e3;
padding :10px 20px;
margin-left: -20px;
margin-top: 0;
position:relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;

}

.penunjuk
{
width:0px;
height: 0px;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #cBc8c8;
top: 57px;
left: 1px;
position:absolute;
}


lepastu… korang uji dengan bukak fail index.html tadi pada mozilla firefox korang… dan… tadaaa.. dh siap dah folding css korang… so… apa lagi.. ubah mengikut citarasa korang…letak garam secukup rasa….. …sekian

Advertisements
Comments
  1. Megat Nz says:

    Wah… macam ni rupanya nak wat layout folding.. baru ku tahu.. lepas ni leh laahh aku bagi design header aku guna folding ni…. thanskk rzxBlog. bagi lah lagi tutorial best2 kay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s