DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
08-09-2017
Ver

En esta corta entrada veremos cómo crear un sencillo efecto neón como el publicado en la imagen promocional de esta entrada que lo podemos conseguir con muy poco CSS.

Con nuestro documento HTML listo, creamos el CSS base para darle estilo a nuestro contenido:

body {
	background-color: #000000;
	font-size: 50px;
}

h1 {
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

Un fondo oscuro, un tamaño de letra grande, texto centrado y todo el texto en mayúscula básicamente; ahora para lograr en efecto neón tenemos:

.neon {
	color: #fff;
	margin-top: 30%;
	text-shadow:
		0 0 5px rgba(0,178,255,1),
		0 0 10px rgba(0,178,255,1),
		0 0 20px rgba(0,178,255,1),
		0 0 40px rgba(38,104,127,1),
		0 0 80px rgba(38,104,127,1),
		0 0 90px rgba(38,104,127,1),
		0 0 100px rgba(38,104,127,1),
		0 0 140px rgba(38,104,127,1),
		0 0 180px rgba(38,104,127,1);
}

Como podemos ver, simplemente aplicamos sombras sobre sombras en distintas posiciones y así creamos un bonito patrón como de neón; aplicamos el color más claro en un comienzo, el más luminoso y a posterior un color un poco más oscuro; con eso logramos el efecto neón que cuyo experimento puedes conseguir al inicio y final de esta entrada.

Ver

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Efectos hover con CSS

Efectos hover con CSS

Botón flotante

Botón flotante

Algunos artículos que te pueden interesar

Efectos CSS con Google Font Effects

Efectos CSS con Google Font Effects

Como su nombre indica, la API Google Font permite agregar fuentes; en este artículo explicaremos cómo utilizar las fuente de efecto de Google.

Andrés Cruz 06-02-2014

El elemento symbol para los SVG en HTML

El elemento symbol para los SVG en HTML

En esta entrada veremos un elemento muy útil para trabajar con los SVG que es el elemento symbol; este elemento ahorra mucho trabajo y permite agrupar una serie de figuras básicas y pintarlos empleando el elemento use.

Andrés Cruz 01-06-2015

Carrusel fullscreen con menú lateral con jQuery y CSS

Carrusel fullscreen con menú lateral con jQuery y CSS

Se explica cómo crear una galería fullscreen o pantalla completa con un menú fijo lateral con jQuery y CSS.

Andrés Cruz 18-05-2017