CSS3 | Efek Text Menyala

Cara Membuat Text Efek Menyala. Perhatikan text di bawah. Terlihat seperti menyalakan? Jika tidak mungkin faktor browser anda, karena efek ini hanya terlihat di browser tertentu saja seperti Firefox, Google Chrome, dan Safari Terbaru.

LINK MENYALA

Secara teknis sebenarnya efek ini menggunakan efek text shadow dengan CSS3. Dan dengan sedikit modifikasi RGBA jadilah efek text menyala ini. Langsung saja ke cara pembuatan texk menyala ini.

Kode yang saya gunakan untuk membuat text menyala di atas adalah seperti ini
text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;

yang artinya kurang lebih seperti ini :

  • text-shadow = buatlah bayangan pada text
  • rgba(255, 150, 220, 1) = Warna dengan komposisi RGB dan Alpha (R, G, B, Alpha). Ganti sesuai warna cahaya yang anda inginkan --untuk mencari komposisi warna RGB, kamu bisa menggunakan photoshop--
  • 0 0 8px = 0(ofset x) 0(ofset y) 8px(lebar/blur bayangan)

Sekarang untuk penerapan di Blog.

1. Login ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode yang anda inginkan untuk di buat menyala. Contoh Link menyala maka yang di cari adalah kode a:link {. Maka tambahkan kode Text menyala di dalamnya. Contoh :
a:link {
text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;
color : #3778cd;
text-decoration : none;
}
4. Save Templates dan lihat apa yang terjadi pada link anda? Menyalakan? Bagus. Jika tidak berarti Seperti yang saya bilang tadi. Faktor Browser.

Text lain yang bisa di beri efek menyala. h1{ , h2 { , h3 { , .post { , dll

Sekian posting dari saya, semoga bermanfaat saya akhiri Wassalam

19 komentar:

Kukuh Cakra D, 17 November 2010 at 03:11 | [Reply]

nice info gan... keep blogging

Dimas Abi Galoga, 17 November 2010 at 03:25 | [Reply]

@Kukuh Cakra Darma makasih gan. btw anda pertamax

Muhammad Chandra, 17 November 2010 at 03:32 | [Reply]

boleh di coba nih ilmu nya bos :D

Dimas Abi Galoga, 17 November 2010 at 03:35 | [Reply]

@Muhammad Chandra silahkan gan

raharjo, 17 November 2010 at 04:53 | [Reply]

info menarik nih mas, thanks

Dimas Abi Galoga, 17 November 2010 at 04:59 | [Reply]

@raharjo sama-sama gan. thanks commentnya

DenBaGas, 17 November 2010 at 06:04 | [Reply]

Salam
Berkunjung dan silaturahmi sekalian menambah ilmu dan pertemanan kawan...
Wah, thanks for share kawan. Nice!

Salam kawan

MungNonton, 17 November 2010 at 06:05 | [Reply]

info menarik dan berguna ni bro salam kenal n' met berkunjung balek

Dimas Abi Galoga, 17 November 2010 at 06:53 | [Reply]

@DenBaGas salam kenal juga, sama2 kawan
@Mahfudz salam kenal juga kawan

Jana Virananda, 17 November 2010 at 11:31 | [Reply]

Mantap banget :D

Dimas Abi Galoga, 18 November 2010 at 01:51 | [Reply]

@Mr.Kelpo makasih gan, langsung praktekan haha

intuisi, 19 November 2010 at 03:38 | [Reply]

info yang bermanfaat

Media Semarang, 23 November 2010 at 17:49 | [Reply]

Info menarik kawan. Perlu dicoba nich buat nambah pengetahuan didunia persilatan. Eh salah maksudku dunia per-Bloggeran

Dimas Abi Galoga, 24 November 2010 at 03:51 | [Reply]

@Media Semarang haha silahkan gan....

arga7, 27 November 2010 at 20:32 | [Reply]

komentar dpt klik ads

PT Bintang Wangi Indotrans, 6 December 2010 at 12:32 | [Reply]

uih... siip euy...

MTS ASSAMANI DOPLANG BLORA, 18 January 2011 at 10:54 | [Reply]

oke bgt,artikel lainnya mana ?

Unknown, 21 May 2011 at 00:54 | [Reply]

admin kok kode " a:link { " di HTML ku gak ada ya?

Deby Irawan, 23 February 2013 at 02:11 | [Reply]

Mau tanya kang,, kebanyakan pake kode CSS bisa membuat loading time blog kita lama juga gak??

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home