02
Mar
2010

Cara membuat text/tulisan berbayang dengan css3

Posted by: admin

Cara membuat text/tulisan berbayang dengan menggunakan css3.
Tulisan berbayang sangat bagus sekali untuk memperindah tampilan blog kamu,
bisa dipasang untuk nama blog, tampilan menu blog, untuk judul posting dan lain-lain sesuai selera.

(* Beberapa browser mungkin tidak mendukung untuk css tulisan berbayang dibawah ini.)

Silahkan lihat contoh/demo nya dibawah ini:

Demo 1:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang1 {
color: #000;
background: #000;
text-shadow: 1px 1px 4px #fff;
}
</style>

Salin kode HTML

1 2	<!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang1">Demo tulisan berbayang</span>

Demo 2:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang2 {
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px#000;
}
</style>

Salin kode HTML

1 2	<!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang2">Demo tulisan berbayang</span>

Demo 3:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang3 {
color: #fff;
background: #666;
text-shadow: 0px 0px 3px#fff;
}
</style>

Salin kode HTML

1 2	<!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang3">Demo tulisan berbayang</span>

Demo 4:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang4 {
color: #33cc33;
background: #fff;
text-shadow: 2px 2px 2px #ff3300;
}
</style>

Salin kode HTML

1 2	<!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang4">Demo tulisan berbayang</span>

Demo 5:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang5 {
color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;
}
</style>

Salin kode HTML

1 2	<!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang5">Demo tulisan berbayang</span>

Demo 6:

Demo tulisan berbayang

Salin kode CSS

<!-- Pasang kode ini pada bagian header blog kamu -->
<style type="text/css">
.berbayang6 {
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
}
</style>