Efecto NEÓN, solo con css3

**Hectorsito20** · 21-dic-2011

Saludos, uno de los efecto que personalmente me gusta y que es muy atractivo, es la posibilidad de poder crear texto con efectos neón, y lo interesante de esto es que solo hay que utilzar la propiedad text-shadow de css3, y ir poniendo diferentes valores, claro todo depende de lo que querramos hacer para obtener el efecto que andamos buscando.. es muy interesante ya que con css2 no era posible.. habia que recurrir a propromas de edición como por ejemplo: Photoshop, FireWorks u otro programa de edicion de texto e imagenes.

Códido html
<body>
<h1 class="efectoNeon">Intercambiosos</h1>
</body>

Código css
<style type="text/css">
body{background: rgba(0,0,0,1);}
.efectoNeon {
background-color: #000;
color: rgba(255,255,255,1);
font-family: Tahoma;
font-size: 50px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF0DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 200px #DD00DE;
}
</style>

Resultado final!

21-dic-2011	#1
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Efecto NEÓN, solo con css3 Saludos, uno de los efecto que personalmente me gusta y que es muy atractivo, es la posibilidad de poder crear texto con efectos neón, y lo interesante de esto es que solo hay que utilzar la propiedad *text-shadow* de css3, y ir poniendo diferentes valores, claro todo depende de lo que querramos hacer para obtener el efecto que andamos buscando.. es muy interesante ya que con css2 no era posible.. habia que recurrir a propromas de edición como por ejemplo: Photoshop, FireWorks u otro programa de edicion de texto e imagenes. Códido html <body> <h1 class="efectoNeon">Intercambiosos</h1> </body> Código css <style type="text/css"> body{background: rgba(0,0,0,1);} .efectoNeon { background-color: #000; color: rgba(255,255,255,1); font-family: Tahoma; font-size: 50px; margin: 0 auto; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF0DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 200px #DD00DE; } </style> Resultado final!

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Cambiar a Modo Lineal Cambiar a Modo Hibrido Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
[App] JLOJCH: Listado Oficial de Juegos Compatibles con HDL,OPL,USB,ESR by Tapia	nokiajavi	Software	17	25-jun-2015 15:59
Las famosas burbujas solo con css3 (novedad css3)	Hectorsito20	Recursos Webmasters & Diseño Web	7	21-dic-2011 08:30
Alguien sabe como se hace esto? PS	dj-blydex	Imagen & Fotografía	11	16-ene-2011 00:03
Horóscopo para 2011	Eloy58	Off-Topic	6	09-ene-2011 05:06

Los siguientes 7 usuarios agradecen a Hectorsito20 por este mensaje:
cramercaba (22-dic-2011), Eloy58 (22-dic-2011), Hunted (21-dic-2011), MartiXFX (04-may-2012), Orpheus96 (21-dic-2011), palmer (21-dic-2011), VJEVans (21-dic-2011)

(0 miembros y 1 visitantes)