Weblog of Novia Agustiar Rahmat » CSS http://opik.unitiga.com Selalu rindu akan baris-baris code Tue, 31 May 2011 05:05:49 +0000 en hourly 1 Membuat Tulisan dengan Efek Shadow Menggunakan CSS http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/#comments Mon, 28 Apr 2008 15:58:32 +0000 opik http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ Dengan memanfaatkan kemampuan Cascading Style Sheets (CSS) yang sangat powerfull kita dapat membuat tampilan website menjadi sangat indah. Salah satu kemampuan CSS yang akan dibahas disini adalah kemampuan membuat tulisan dengan efek shadow (tulisan dengan bayangan). Berikut script lengkapnya :

<html>
<head>
<title>Teks Dengan Efek Shadow</title>
<style type="text/css">
#teks_shadow:before { content: 'Teks Dengan Efek Shadow'; }
.teks {
font-size: 3em;
font-family: tahoma, verdana, arial;
color: #d20000;
text-align: left;
font-weight: bold;
}
.shadow {
/* untuk tampilan pada browser internet explorer */
height: 1em;
filter: shadow(color=#666, direction=135, strength=5);
line-height: 2em;
white-space: normal;
}
.shadow:before {
display: block;
margin: 0 0 -2.05em 0.05em;
padding: 0;
color: #666;
}
</style>
</head>
<body>
<div style="height:100px;" class="shadow teks" id="teks_shadow">Teks Dengan Efek Shadow</div>
</body>
</html>

Akan menghasilkan tulisan seperti berikut ini,

Tulisan Dengan Efek Shadow

]]> http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/feed/ 4 Membuat Navigasi Interaktif Menggunakan CSS http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/#comments Sat, 05 Jan 2008 00:53:45 +0000 opik http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ Untuk membuat sebuah navigasi/menu yang interaktif tidak melulu harus dilakukan dengan animasi flash atau dengan menggunakan kombinasi 2 image yang berbeda.
Dengan memanfaatkan kemampuan CSS (Cascading Style Sheets) yang maha dahsyat, kita dapat membuat sebuah navigasi yang cantik.

Berikut contoh sederhana mempercantik navigasi menggunakan CSS.

<html>
<head>
<title>Tes Menu</title>
<style type="text/css">
#menu {
padding: 0px;
background: #000;
float: left;
margin: 0px;
width: 550px;
}
#menu ul {
padding: 0px;
margin: 0px;
}
#menu ul li {
padding: 0px;
display: block;
float: left;
margin: 0px;
font: 11px/30px Tahoma;
list-style-type: none;
text-align: center;
}
#menu li a {
display: block;
width: 110px;
color: #fff;
text-decoration: none;
border-bottom-style: double
}
#menu LI#active {
background: #0033cc;
color: #000;
}
#menu LI#active A {
background: #0033cc;
color: #000;
}
#menu A:hover {
background: #99cc00;
color: #fff;
border-bottom-style: none;
}
</style>
</head>
<body>
<div id=menu>
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
<li><a href="#">Menu Empat</a></li>
<li><a href="#">Menu Lima</a></li>
</ul>
</div>
</body>
</html>

Selamat mencoba!
PS: Banyak sekali situs yang menyediakan tutorial gratis tentang css. Coba googling saja dengan kata kunci “CSS Tutorial”.

]]> http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/feed/ 0