CSS3 Text Shadow Teks Bergaya Neon

Satu lagi kreasi dari CSS3, yaitu Teks Bergaya Neon dengan CSS3 Text Shadow. Teks berbayang dalam arti berbahasa Indonesia adalah membuat teks biasa menjadi berbayang dengan trick CSS3 tentu saja. Dan apakah itu sulit dilakukan, ehm, jawaban itu tergantung dari diri kalian sendiri selaku blogger yang mengerjakan trick tersebut. Apakah kalian menganggapnya gampang, atau malah sebaliknya. Sedikit aku uraikan sedikit disini, dengan membuat bayangan teks yang dikreasikan dari CSS3, seolah-olah teks itu bersinar, padahal tidak. Nah itulah salah satu magic yang dapat kita lakukan dengan trick yang sangat mumpuni di dunia web design sekarang ini.

Secara umum text shadow itu hanya seperti ini ::

text-shadow:0px 0px 5px #00ffff;

Itu yang sering kita temui dalam trick CSS3 Text Shadow di beberapa web. Tapi dengan kreasi sedikit, setidaknya kita udah menunjukkan kreativitas dengan mengotak-atik CSS3 menjadi Text Shadow dengan bentuk yang laen -- Neon --. Gimana, langsung aja tutorialnya aku kasih ke kalian neh ::

Pertama kalian harus tentukan mana aja yang akan kalian beri efek neon -- Kemungkinan dari saranku neh, seperti ini aja : tag h1, h2, h3 dan h4. Dan yang aku ambil disini adalah h1 untuk Header dan h3 untuk Post Title. Yuk cekibrot --

Masup ke Edit HTML
Cari kode seperti ini
Ingat Centang dulu Expand Widget Template

#header h1 {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
font-size: 100%;
font-weight:bold;
line-height: 1.5em;
letter-spacing:.1em;
font-style:italic;
color:#FFFFFF;
}

Terus sisipin aja kode itu dengan CSS3 ini

text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;

Ntar jadi hasil akhirnya -->>

#header h1 {
padding:5px 5px 5px 5px;
margin:5px 5px 5px 5px;
font-size: 100%;
font-weight:bold;
line-height: 1.5em;
letter-spacing:.1em;
font-style:italic;
color:#FFFFFF;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}

Udah jadi yang untuk Header .. sekarang untuk Post Title

Temukan kode

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
font-size:100%;
text-decoration:none;
font-style:italic;
line-height:5.3em;
color:#ff0000;
font-weight:bold;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
}

Terus sisipin CSS3 berikut ini

text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #E9967A,
0 0 70px #E9967A,
0 0 80px #E9967A,
0 0 100px #E9967A,
0 0 150px #E9967A;

Hasil akhirnya akan seperti ini -->

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
font-size:100%;
text-decoration:none;
font-style:italic;
line-height:5.3em;
color:#ff0000;
font-weight:bold;
margin:5px 5px 5px 5px;
padding:5px 5px 5px 5px;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #E9967A,
0 0 70px #E9967A,
0 0 80px #E9967A,
0 0 100px #E9967A,
0 0 150px #E9967A;
}

Sekarang save template kalian dan liat blognya
Pasti dah jadi Selamat Mencoba