Anche a voi capita di prestare più attenzione ai terminali ed ai display futuristici nei film e nelle serie di fantascienza che alla loro trama? Personalmente ho un’autentica passione per questa antica arte di immaginare e disegnare le UX/UI del futuro. E non credo di essere l’unico 🤓
In questo tutorial, ci ispireremo alla UI alla Fallout con lo stile retro-futuristica del Pip-Boy 3000 per approfondire alcune tecniche moderne e poco diffuse dei fogli di stile CSS che possono trasformare una pagina web in un vera experience o in perfetto display sci-fi contenuto in una prop stampata in 3D… e senza dimenticare l’accessibilità!
Scopri come trasformare il tuo design in un’interfaccia utente retro-futuristica ispirata al Pip-Boy 3000 della serie Fallout esplorando alcune specifiche poco usate di modern CSS
Creare una base HTML semantica
Per iniziare, creiamo un contenuto fittizio utilizzando tag HTML semantici. Ecco un esempio di base HTML che useremo per la nostra UI alla Fallout:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Retro Futuristic UI</title>
<em><!-- retro fonts in next step --></em>
<link rel="stylesheet" href="style.css">
</head>
<div class="retro-container scanline-effect">
<header>
<h1></h1>
<nav role="navigation">
<ul>
<li><a href="#screen-1">SCREEN 1</a></li>
</ul>
</nav>
</header>
<main>
<section id="screen-1">
<article>
<header>
<h2>SCREEN 1</h2>
</header>
<div class="content">
Lorem ipsum...
</div>
<figure>
<img src="url_illustration" alt="alt text for illustration">
</figure>
</article>
</section>
</main>
<footer>
<p></p>
</footer>
</div>
</html>
Code language: HTML, XML (xml)Questo codice HTML crea una struttura di base semantica con un header, un main suddiviso in sezioni e un footer. La navigazione tra le sezioni avviene tramite i link nel menu contenuti nella tag nav per dichiararne esplicitamente il ruolo (e quindi istruire ad esempio gli screen-reader o altre tecnologie assistive).
Mantenere la responsività e l’accessibilità
Dobbiamo ricordare che di default, una pagina HTML senza stili ma ben strutturata è già responsive e accessibile: sono le modifiche che apportiamo con CSS ad introdurre nuovi possibili guai, quindi è importante seguire il principio del less is more e procedere per step.
Per la nostra interfaccia useremo una struttura responsive con un’area centrale che funziona da container per sezioni con all’interno degli elementi article: anche al loro interno è importante implementare semantica e accessibilità.
Insomma la nostra base senza CSS dovrà essere (come sempre) un esempio di rettitudine e amore per gli standard web, ottenendo idealmente tutti punteggi massimi quando usiamo Google Lighthouse ad esempio per valutarne accessibilità e best practice. 🫶
Tipografia e colori
Quando abbiamo il nostro contenuto di base possiamo divertirci a trovare una prima base estetica!
Scegliamo quindi un font stile terminale ed aggiungiamolo alla nostra pagina 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">
Code language: HTML, XML (xml)Per creare l’atmosfera retro-futuristica in stile Fallout, utilizzeremo un font monospace e una palette di colori specifica. Iniziamo con la definizione delle variabili CSS per i colori e il font:
: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);
}
Code language: CSS (css)L’uso di variabili è importante per effetturare cambi di stile o varianti in seguito!
Applichiamo questi stili di base al nostro documento:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
block-size: 100vh;
background-color: var(--background-color);
cursor: url('./assets/mouse.svg') 0 0, auto;
}
a {
color: var(--primary-color);
text-decoration: none;
cursor: url("assets/mouse.svg") 0 0, pointer;
}
Code language: CSS (css)
Abbiamo anche aggiunto un cursore più in stile in formato SVG facendo attenzione a non superare i 32px (oltre il quale potrebbe non essere considerato dal browser).
Articolo consigliato: È possibile innamorarsi di CSS?
Spoiler: guarda i risultati nel video!
4. Layout responsive
Creiamo un layout responsive con header, main e footer all’interno di un container che occupi l’intero display e sia centrato.
header e footer saranno sempre presenti, mentre il contenuto del main sarà organizzato in sezioni controllate dal menu di navigazione.
div.retro-container {
inline-size: 90vw;
block-size: 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 {
block-size: 100%;
overflow: hidden auto;
margin: 1rem 0;
}
Code language: CSS (css)Le section saranno quindi le nostre schermate e non sarà possibile passare da una sezione all’altra se non dal menù di navigazione.
Possiamo anche aggiungere uno script alla fine della pagina per portare sempre all’inizio del contenuto di ogni sezione al cliccare sui link 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'
});
}
});
});Code language: JavaScript (javascript)5. Effetti visivi e animazioni
Per ottenere un look retro-futuristico, aggiungiamo alcuni effetti visivi e animazioni.
Effetto vecchio monitor CRT
Creiamo un effetto CRT con un’animazione per rendere quella “banda orizzontale” tipica dei tubi catodici (dovuta alla bassa frequenza di aggiornamento) sfruttando un linear-gradient animato dalla background-position: possiamo giocare con la velocità o l’angolo e perfino sul gradiente per ottenere il nostro effetto di flickering preferito!
Aggiungiamo una sfumatura simile ad una retro illuminazione sui bordi utilizzando un box-shadow con il valore inset: da notare che non specificando i colori in istruzioni come questa andrà a pescare la proprietà color dell’elemento che lo contiene (o dal primo elemento antenato che lo specifica).
@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%;
}
Code language: CSS (css)Effetto “scanline”
Per riprodurre quelle righine dei terminali lo-fi possiamo creare un effetto scanline al container principale usando mask-image:
div.retro-container {
mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);
mask-size: 100% 2px;
}
Code language: CSS (css)Il gradiente che genera mask-image viene ripetuto ogni 2px e quindi fa una riga di un pixel leggermente trasparente e una riga completamente inalterata: giocando con questi parametri si possono ottenere pattern molto interessanti!
La cosa che forse vi soprenderà positivamente è che la maschera si applica perfino alla barra di scorrimento garantendo così un’esperienza più coerente senza il minimo sforzo!
Allarme Rosso
Non c’è display sci-fi che si rispetti che non abbia una voce che lampeggia per attirare la nostra attenzione sull’imminente svolta di trama catastrofica.
Creiamo quindi un’animazione per gli elementi di avviso:
.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);
}
}
Code language: CSS (css)Usiamo l’Intelligenza Artificiale Generativa per create un contenuto sci-fi
Utilizzare modelli di intelligenza artificiale per generare contenuti fittizzi direttamente in HTML (come ho fatto nella versione finale) può aiutarci a uscire dalla nostra comfort zone e a esplorare nuove idee di design e fornirà un risultato decisamente migliore del classico lorem ipsum.
I fantastici disegni tecnici sono stati generati con il divertente modello di generatore di istruzioni di IKEA (LORA SDXL) allenato da Ostris
Conclusioni
Sperimentare con CSS per creare design retro-futuristici alla Fallout è divertente e utile. Non dobbiamo sottovalutare il potenziale della creatività, ma è importante seguire sempre le best practices e le regole di accessibilità. Indirettamente, queste linee guida faciliteranno anche il lavoro artistico.
