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

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Pulpo animado con solo CSS

Pulpo animado con solo CSS

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015

¿Cómo crear un checkbox personalizado en CSS?

¿Cómo crear un checkbox personalizado en CSS?

En esta entrada veremos cómo crear un checkbox custom o personalizados con solo CSS, con esto se quiere decir que no se emplea la renderización realizada por defecto por los navegadores.

Andrés Cruz 09-07-2015

Creando una sencilla barra de progreso con solo CSS

Creando una sencilla barra de progreso con solo CSS

Se explica cómo crear una sencilla barra de progreso con solo CSS.

Andrés Cruz 27-07-2016