Efek Blur Dengan CSS3
Demonstrasi ini merupakan sebuah efek yang diciptakan dengan CSS3, menghasilkan efek Blur seperti halnya Flash Light. Efek Blur ini hanya menggunakan text-shadow property untuk menghasilkan Efek.
D E M O
CSS Code
Complete CSS Code
HTML Code
Complete HTML Code
D E M O
♥You
Complete CSS Code
Show HideKode CSS
<style type="text/css">
#blur {
color: transparent;
font-size: 240px;
font-style: normal;
font-weight: bold;
line-height: 1;
text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
text-align:center;
/* una combinaci�³n de filtros para IE ... no, no ser�¡ lo mismo */
filter: progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,Strength=15) progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
}
#blur:hover {
color: #FFF;
}
#blur:span {
color: #AA0000;
font-size: 150px;
vertical-align: super;
}
</style>
color: transparent;
font-size: 240px;
font-style: normal;
font-weight: bold;
line-height: 1;
text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
text-align:center;
/* una combinaci�³n de filtros para IE ... no, no ser�¡ lo mismo */
filter: progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,Strength=15) progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
}
color: #FFF;
}
color: #AA0000;
font-size: 150px;
vertical-align: super;
}
</style>
Complete HTML Code
Show HideKode HTML
<div id="
<span>♥ </span>ABC
</div>
blur"><span>
</div>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon