12 impresionantes efectos de neón retro en diseño web

Evolucionado del tubo de Geissler, el letrero de neón fue un rasgo característico de Estados Unidos desde la década de 1920 hasta la de 1960. Ha marcado varias décadas y ha creado su propia era distintiva: una era de noches brillantes y coloridas con carteles de neón en cada esquina.

Sin duda, el letrero de neón es cosa del pasado. Es sinónimo de estilo retro. Pero no es tan aburrido como las cosas arcaicas de los viejos tiempos. Tiene un entusiasmo; tiene una vibra. Su naturaleza colorida y personalidad brillante lo mantienen vivo.

Y aunque la tendencia de usar letreros de neón está muriendo en la vida real, dando paso a soluciones “verdes” más sofisticadas y elegantes, todavía hay lugares para verlo en las extensiones en línea. Aquí es donde puede poner en juego su carisma. Y dado el hecho de que una ola de nostalgia se ha extendido por el mundo, un letrero de neón puede convertirse en un candidato ideal para crear diseños que cumplan con la corriente principal de hoy.

Hay varias formas de introducir un toque retro fluorescente en tu interfaz. La más obvia y sencilla es usarla como una opción estilística para mostrar placas de identificación, eslóganes o simplemente los detalles basados ​​en texto de un sitio web. Hoy, le mostraremos algunos fragmentos de código excelentes que dan vida a este efecto.

Letrero de neón Hot Ones de Aaron Minnamon

El proyecto de Aaron Minnamon tiene un sentido distintivo del estilo urbano estadounidense de los años 50. Es brillante, audaz y atrevido. Parece auténtico, gracias al comportamiento hábilmente reproducido de los letreros de neón que son famosos por su parpadeo constante. Esta pequeña pero impresionante animación cobró vida con la ayuda de HTML, SCSS y JavaScript.

Letrero de neón animado CSS por Nodws / Neon from Las Vegas por Riccardo Tartaglia

Tanto Nodws, con su fantástico proyecto dedicado a Dribble, como Riccardo Tartaglia, con su destacado Neon from Las Vegas, han tomado un camino tradicional. Han ideado conceptos que imitan a la perfección las señales de tráfico de neón convencionales.

Las demostraciones se parecen. Cada uno cuenta con letreros de neón colocados contra una pared de ladrillos. Ambos están enriquecidos con diminutas dinámicas para que la escena parezca viva; y cada uno tiene una apariencia brillante. Los artistas se las arreglaron con solo varias líneas de código HTML y CSS, lo que hizo que las soluciones no solo fueran agradables a la vista, sino también livianas.

Letrero de neón vintage de Kyle Lavery

Si necesita una sensación vintage inconfundible en su sitio web, debe probar Vintage Neon Sign de Kyle Lavery. Exuda los años 60 en todos los frentes. La tipografía delineada, aderezada con colores de neón y respaldada por un hermoso fondo estilo tubo se ve fantástica. A pesar de que las letras no están configuradas en tipo decorativo, sin duda agregarán un toque elegante a cualquier proyecto.

Proyecto de Prima Utama Apriansyah

El proyecto de Prima Utama Apriansyah presenta un efecto de neón que se revela al pasar el mouse. Hay tres opciones de color: rojo, azul y amarillo. Cada uno se ve genial. Todo está hecho con HTML puro y CSS, no se necesita JavaScript. La ventaja de esta solución es que el efecto neón queda oculto e impresiona a los visitantes cuando se revela.

Cargadores de rejilla de neón de Mai El-Awini

Bien, eso es suficiente de los efectos de texto. Consideremos otras formas de agregar algo de magia fluorescente a la interfaz. Una de las alternativas es aplicar un estilo neón a las animaciones de carga, como ha hecho Mai El-Awini con Neon Grid Loaders.

Aquí encontrarás cuatro cargadores diferentes que están vinculados con un tema y color. Aunque son primitivos, el efecto neón ciertamente los lleva al siguiente nivel. Contra un fondo oscuro, se ven simplemente fabulosos. Entretendrán a los visitantes mientras esperan que su sitio web termine todos sus preparativos.

Botón de Simone / Botón de neón de Elwin van den Hazel

Otros detalles de la interfaz también pueden beneficiarse del estilo neón. Por ejemplo, considere los botones. Dado que las llamadas a la acción "fantasma" siguen siendo populares, el efecto de neón no podría encajar mejor.

Hay dos fragmentos de código excelentes para probar: uno está hecho por Simone y otro por Elwin van den Hazel. Ambos incluyen un botón de neón simple, pero elegante y sutil. Mientras que el primero es un poco sombrío debido a la coloración apagada, el segundo llama la atención de inmediato con su tono azul vibrante y su efecto brillante. Todo está hecho con HTML puro y CSS.

Cuadros de diálogo de neón de Hugo DarbyBrown

También puede aplicar el estilo neón a los cuadros de diálogo. Basta con echar un vistazo a los cuadros de diálogo de neón de Hugo DarbyBrown. El autor ha incluido cuatro paneles de diálogo convencionales. Se ven audaces y atractivos, pero sin gritar en todos los frentes. El efecto neón le ha dado un giro agradable a los elementos banales de la interfaz de usuario.

neon hexagrid de Matei Copot / Neon Hex Particles – Recreación de Brett / por un rato de Gerard Ferrandez

Si bien consideramos los estilos de neón como un efecto que se puede aplicar a los detalles independientes de un sitio web (como botones, tipografía o un cargador), también puede crear fácilmente un fondo espectacular. Considere neon hexagrid de Matei Copot, Neon Hex Particles – Recreation de Brett y por un tiempo de Gerard Ferrandez.

Matei Copot ofrece a los visitantes en línea un fantástico fondo estilo panal inspirado en neón donde cada celda tiene su propia vida útil. El color cambia de púrpura a turquesa y se ve inspirador.

El concepto de Brett tiene una nota de misterio. También se basa en una forma hexagonal, pero esta vez también puedes ver una animación de revelación. El patrón aparece en el centro y crece hacia los lados. Hay un panel de control donde puedes jugar con la configuración.

A diferencia de los dos ejemplos anteriores, el proyecto de Gerard Ferrandez presenta una versión moderna del estilo neón. Aquí encontrarás miles de pequeñas partículas que forman un rectángulo. Use el cursor del mouse para perturbar la superficie plana y levantar una ola que está marcada por un tono dorado similar al neón.

Ejemplos brillantes

Si bien el efecto de neón no hace nada inusual, sigue siendo una de esas cosas que llama la atención al instante. Es una gran herramienta para resaltar los detalles de un sitio web.

Se puede usar para establecer puntos focales o simplemente condimentar un poco las cosas con el carisma brillante de la naturaleza fluorescente. Va perfectamente bien con tipografía, botones e incluso fondos.

Sí, tiene un gran inconveniente: revela su belleza y potencial solo en un entorno oscuro. Entonces, si está utilizando una interfaz de usuario más ligera, entonces no es la mejor opción. Pero si tienes en mente algunos diseños oscuros, entonces el efecto neón puede convertirse en un instrumento perfecto para impresionar a tus visitantes.