¿También eres de prestar más atención a las terminales y pantallas futuristas en películas y series de ciencia ficción que a sus tramas? Personalmente, tengo una verdadera pasión por este antiguo arte de imaginar y diseñar la UX/UI del futuro. Y no creo ser el único 🤓
En este tutorial, nos inspiraremos en la UI de Fallout con el estilo retro-futurista del Pip-Boy 3000 para adentrarnos en algunas técnicas modernas y poco conocidas de CSS que pueden transformar una página web en una verdadera experiencia o en una pantalla de ciencia ficción contenida en un accesorio impreso en 3D… ¡y sin olvidar la accesibilidad!
Creando una base HTML semántica
Para empezar, crearemos contenido básico usando etiquetas HTML semánticas. Aquí tienes un ejemplo básico de HTML que usaremos para nuestra UI de Fallout:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Interfaz Retro Futurista</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="retro-container scanline-effect">
<header>
<h1></h1>
<nav role="navigation">
<ul>
<li><a href="#screen-1">PANTALLA 1</a></li>
</ul>
</nav>
</header>
<main>
<section id="screen-1">
<article>
<header>
<h2>PANTALLA 1</h2>
</header>
<div class="content">
Lorem ipsum...
</div>
<figure>
<img src="url_illustration" alt="texto alternativo para la ilustración">
</figure>
</article>
</section>
</main>
<footer>
<p></p>
</footer>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Este código HTML crea una estructura básica semántica con un encabezado, un contenido principal dividido en secciones y un pie de página. La navegación entre secciones se realiza a través de los enlaces en el menú contenidos en la etiqueta nav para declarar explícitamente su rol (y así instruir, por ejemplo, a los lectores de pantalla u otras tecnologías asistivas).
Manteniendo la responsividad y accesibilidad
Debemos recordar que, por defecto, una página HTML sin estilos pero bien estructurada ya es responsive y accesible: son las modificaciones que hacemos con CSS las que pueden introducir nuevos posibles problemas, por lo que es importante seguir el principio de menos es más y proceder paso a paso.
Para nuestra interfaz, utilizaremos una estructura responsiva con una área central que sirve como contenedor para secciones que contienen elementos de artículo: incluso dentro de estos, es importante implementar semántica y accesibilidad.
En resumen, nuestra base sin CSS debe (como siempre) ser un ejemplo de rectitud y amor por los estándares web, idealmente obteniendo todas las puntuaciones máximas al usar herramientas como Google Lighthouse para evaluar accesibilidad y mejores prácticas. 🫶
Tipografía y colores
Cuando tengamos nuestro contenido básico, ¡podemos divertirnos encontrando una base estética inicial!
Elijamos una fuente estilo terminal y añadámosla a nuestra página HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
Lenguaje del código: HTML, XML (xml)Para crear la atmósfera retro-futurista al estilo Fallout, usaremos una fuente monospace y una paleta de colores específica. Comencemos definiendo variables CSS para los colores y la fuente:
:root {
font-family: "VT323", monospace;
font-weight: 400;
--primary-color: #ffd52c;
--secondary-color: #ff5c00;
--tertiary-color: #c72d04;
--background-color: #111;
scrollbar-color: var(--primary-color) var(--secondary-color);
font-size: clamp(18px, 3vw, 30px);
}
Lenguaje del código: CSS (css)
Usar variables es importante para realizar cambios de estilo o variantes más adelante.
Layout responsivo
Creemos un layout responsivo con un encabezado, contenido principal y pie de página dentro de un contenedor que ocupe toda la pantalla y esté centrado.
div.retro-container {
width: 90vw;
height: 90vh;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
padding: 0.5rem;
border: 2px solid var(--primary-color);
color: var(--primary-color);
mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);
mask-size: 100% 2px;
text-shadow: 0 0 0.5rem;
}
header,
footer {
display: flex;
gap: 2rem;
align-items: center;
}
main {
overflow: hidden;
}
section {
height: 100%;
overflow: hidden auto;
margin: 1rem 0;
}Lenguaje del código: CSS (css)Las secciones serán nuestras pantallas, y solo se podrá mover de una sección a otra a través del menú de navegación.
También podemos añadir un script al final de la página para siempre desplazarse al inicio del contenido de cada sección al hacer clic en los enlaces del menú:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
const main = document.querySelector('main');
if (targetElement) {
main.scrollTo({
top: targetElement.offsetTop - main.offsetTop,
behavior: 'smooth'
});
}
});
});
Lenguaje del código: JavaScript (javascript)Efectos visuales y animaciones
Efecto de Monitor CRT Antiguo
Creamos un efecto CRT con una animación para simular esa «banda horizontal» típica de los tubos catódicos (debida a la baja frecuencia de actualización) utilizando un gradiente lineal animado con la propiedad background-position: podemos jugar con la velocidad, el ángulo e incluso con el gradiente para obtener nuestro efecto de parpadeo preferido.
Añadimos un sombreado similar a una retroiluminación en los bordes utilizando un box-shadow con el valor inset: cabe destacar que, al no especificar los colores en instrucciones como esta, se tomará la propiedad color del elemento que lo contiene (o del primer elemento ancestro que lo especifica).
@keyframes crtAnimation {
0% {
background-position: 0 0;
}
100% {
background-position: 0 10000%;
}
}
.old-crt-monitor {
box-shadow: inset 0px 0px 2rem;
background-image: linear-gradient(0deg, #0000 10%, #fff1 90%, #0000 100%);
animation: crtAnimation 100s linear infinite;
background-size: 100% 80%;
}
Lenguaje del código: CSS (css)Artículo recomendado: Tendencias frontend para el 2024, el retorno de CSS
Efecto de líneas de escaneo
Para reproducir las líneas de terminal de baja fidelidad, creamos un efecto de scanline en el contenedor principal usando mask-image:
div.retro-container {
mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);
mask-size: 100% 2px;
}Lenguaje del código: CSS (css)El gradiente que genera mask-image se repite cada 2px, creando una línea de un píxel ligeramente transparente y otra línea completamente sin alterar.
Alerta Roja
Ninguna pantalla de ciencia ficción está completa sin un elemento parpadeante que llame nuestra atención sobre un giro catastrófico inminente en la trama. Creamos una animación para los elementos de alerta:
alert {
animation: blink-bg 1s ease-out infinite;
}
@keyframes blink-bg {
0%, 60% {
text-shadow: 0 0 10.5rem;
color: var(--primary-color);
}
70%, 100% {
text-shadow: 0 0 20.5rem;
color: var(--tertiary-color);
}
}
Lenguaje del código: CSS (css)Usando IA Generativa para crear contenido de Ciencia Ficción
Claro, aquí está la traducción:
Utilizar modelos de inteligencia artificial para generar contenidos ficticios directamente en HTML (como hice en la versión final) puede ayudarnos a salir de nuestra zona de confort, explorar nuevas ideas de diseño y proporcionar un resultado mucho mejor que el clásico lorem ipsum.
Los fantásticos diseños técnicos fueron generados con el divertido modelo de generador de instrucciones de IKEA (LORA SDXL) entrenado por Ostris.
Conclusiones
Experimentar con CSS para crear diseños retro-futuristas al estilo de Fallout es divertido y útil. No debemos subestimar el potencial de la creatividad, pero es importante seguir siempre las mejores prácticas y las reglas de accesibilidad. Indirectamente, estas directrices también facilitarán el trabajo artístico.
