02
Mar
2010
Mar
2010
Cara membuat text/tulisan berbayang dengan css3
Posted by: adminCara 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
1 2 3 4 5 6 7 8 | <!-- 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
1 2 3 4 5 6 7 8 | <!-- 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
1 2 3 4 5 6 7 8 | <!-- 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
1 2 3 4 5 6 7 8 | <!-- 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
1 2 3 4 5 6 7 8 | <!-- 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
1 2 3 4 5 6 7 8 | <!-- 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> |
Salin kode HTML
1 2 | <!-- Pasang kode ini pada bagian body/konten blog kamu --> <span class="berbayang6">Demo tulisan berbayang</span> |
Selamat mencoba..!!

memuat halaman
iklan




Postingan yang lain:




makasih ya buwat infonya…berguna bangetttt…
mantap
matur kasih atas infonya, saya masih awam yah belajar buar blog gitu,,trus cari2 info untuk mempercantik blogku giti,,,eh aku punya,,,ketemu deh
jadikan PDF boss biar ku gunakan untuk menggajar KALO SUDAH HUB MAIL AKU TRIM SEMOGA BERMANFAAT BAGI SEMUA
… muanthap tenan..tak kira itu merupakan file gambar,rupanya css sanggup…wah makasih inponya
Hahahahahah ,,,
mantab gan buat pengetahuan ane … dan buat temen2 semuanya