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 |
 BUAT "INSET TYPO" DENGAN CSS3 |
| June 23, 2010 Posted by: Fauzie |
Inset typography atau letterpress typography adalah stail teks yang nampak seolah-olah timbul atau tengelam di atas sesuatu permukaan. Jika ianya dibuat dengan betul dan dengan cara yang kreatif, ia akan memberi impak yang sangat menarik
Dalam tutorial ini kita akan buat typo jenis "inset" dengan hanya menggunakan CSS dan juga CSS3 properties. Biasanya typo jenis ini dibuat dengan menggunakan photoshop.
Markup HTML
Perkara pertama yang kita buat ialah set HTMLnya seperti di bawah ini:<div id="insetBG">
<letter class="insetJenis">Inset Typography</letter>
</div>
<letter class="insetJenis">Inset Typography</letter>
</div>
Latarbelakang atau Background
Lebar untuk contoh dalam tutorial ini ialah 500px dan tingginya 100px. Kemudian kita akan gunakan CSS3 gradient untuk memberi efek "fadding" dari atas ke bawah. Kod warna yang digunakan ialah #003471 dan #448CCB. Kod untuk latarbelakang adalah seperti di bawah ini:#insetBG {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
Font dan Style
Sekarang kita berikan style untuk font serta saiz dan warnanya:letter.insetJenis {
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
font-weight: bold;
color: #0D4383;
}
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
font-weight: bold;
color: #0D4383;
}
Di bawah ini adalah kod-kod CSS and HTML sepenuh.
<html>
<head>
<style type="text/css">
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
letter.insetType {
padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
</style>
</head>
<body>
<div id="insetBgd">
<letter class="insetType">Inset Typography</letter>
</div>
</body>
</html>
<head>
<style type="text/css">
#insetBgd {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
letter.insetType {
padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
</style>
</head>
<body>
<div id="insetBgd">
<letter class="insetType">Inset Typography</letter>
</div>
</body>
</html>
Contoh di atas dibuat menggunakan kod-kod CSS dan HTML di atas.
Jika anda tukar beberapa kod di atas:
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
menjadi seperti ini:
color: #448ccb;
text-shadow: 0px 6px 4px #111;
Huruf atau typo akan menjadi seperti ini.
Contoh di bawah ini pula terjadi apabila kod background anda tukarkan seperti berikut:
background: transparent;
Read More Other Related Articles
About Minimal
Some description about you
1. Nulla ornare, nulla et
2. egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede.
Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo.
Our Mission
Our goal is to be the best
Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
