{"id":28181,"date":"2024-06-11T12:45:18","date_gmt":"2024-06-11T10:45:18","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28181"},"modified":"2024-06-11T12:45:19","modified_gmt":"2024-06-11T10:45:19","slug":"creamos-una-ui-tipo-fallout-usando-css-moderno","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/","title":{"rendered":"Creamos una UI tipo Fallout usando CSS moderno"},"content":{"rendered":"\n

\u00bfTambi\u00e9n eres de prestar m\u00e1s atenci\u00f3n a las terminales y pantallas futuristas en pel\u00edculas y series de ciencia ficci\u00f3n que a sus tramas? Personalmente, tengo una verdadera pasi\u00f3n por este antiguo arte de imaginar y dise\u00f1ar la UX\/UI del futuro<\/strong>. Y no creo ser el \u00fanico \ud83e\udd13<\/p>\n\n\n\n

En este tutorial, nos inspiraremos en la UI de Fallout<\/strong> con el estilo retro-futurista del Pip-Boy 3000 para adentrarnos en algunas t\u00e9cnicas modernas y poco conocidas de CSS<\/strong> que pueden transformar una p\u00e1gina web en una verdadera experiencia o en una pantalla de ciencia ficci\u00f3n contenida en un accesorio impreso en 3D… \u00a1y sin olvidar la accesibilidad!<\/p>\n\n\n\n

Creando una base HTML sem\u00e1ntica<\/h3>\n\n\n\n

Para empezar, crearemos contenido b\u00e1sico usando etiquetas HTML sem\u00e1nticas. Aqu\u00ed tienes un ejemplo b\u00e1sico de HTML que usaremos para nuestra UI de Fallout:<\/p>\n\n\n

<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"es\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"<\/span>><\/span>\n    <title<\/span>><\/span>Interfaz Retro Futurista<\/title<\/span>><\/span>\n    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"style.css\"<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    <div<\/span> class<\/span>=\"retro-container scanline-effect\"<\/span>><\/span>\n        <header<\/span>><\/span>\n            <h1<\/span>><\/span><\/h1<\/span>><\/span>\n            <nav<\/span> role<\/span>=\"navigation\"<\/span>><\/span>\n                <ul<\/span>><\/span>\n                    <li<\/span>><\/span><a<\/span> href<\/span>=\"#screen-1\"<\/span>><\/span>PANTALLA 1<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                <\/ul<\/span>><\/span>\n            <\/nav<\/span>><\/span>\n        <\/header<\/span>><\/span>\n        <main<\/span>><\/span>\n            <section<\/span> id<\/span>=\"screen-1\"<\/span>><\/span>\n                <article<\/span>><\/span>\n                    <header<\/span>><\/span>\n                        <h2<\/span>><\/span>PANTALLA 1<\/h2<\/span>><\/span>\n                    <\/header<\/span>><\/span>\n                    <div<\/span> class<\/span>=\"content\"<\/span>><\/span>\n                        Lorem ipsum...\n                    <\/div<\/span>><\/span>\n                    <figure<\/span>><\/span>\n                        <img<\/span> src<\/span>=\"url_illustration\"<\/span> alt<\/span>=\"texto alternativo para la ilustraci\u00f3n\"<\/span>><\/span>\n                    <\/figure<\/span>><\/span>\n                <\/article<\/span>><\/span>\n            <\/section<\/span>><\/span>\n        <\/main<\/span>><\/span>\n        <footer<\/span>><\/span>\n            <p<\/span>><\/span><\/p<\/span>><\/span>\n        <\/footer<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Este c\u00f3digo HTML crea una estructura b\u00e1sica sem\u00e1ntica con un encabezado, un contenido principal dividido en secciones y un pie de p\u00e1gina. La navegaci\u00f3n entre secciones se realiza a trav\u00e9s de los enlaces en el men\u00fa contenidos en la etiqueta nav para declarar expl\u00edcitamente su rol (y as\u00ed instruir, por ejemplo, a los lectores de pantalla u otras tecnolog\u00edas asistivas).<\/p>\n\n\n\n
Manteniendo la responsividad y accesibilidad<\/h3>\n\n\n\n
\n
Debemos recordar que, por defecto, una p\u00e1gina 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\u00e1s y proceder paso a paso.<\/p>\n<\/div>
\"Retro-Futuristic<\/figure><\/div>\n\n\n\n
\n\n\n\n
Para nuestra interfaz, utilizaremos una estructura responsiva con una \u00e1rea central que sirve como contenedor para secciones que contienen elementos de art\u00edculo: incluso dentro de estos, es importante implementar sem\u00e1ntica y accesibilidad.<\/p>\n\n\n\n
En resumen, nuestra base sin CSS debe (como siempre) ser un ejemplo de rectitud y amor por los est\u00e1ndares web, idealmente obteniendo todas las puntuaciones m\u00e1ximas al usar herramientas como Google Lighthouse para evaluar accesibilidad y mejores pr\u00e1cticas. \ud83e\udef6<\/p>\n\n\n\n
Tipograf\u00eda y colores<\/h3>\n\n\n\n
Cuando tengamos nuestro contenido b\u00e1sico, \u00a1podemos divertirnos encontrando una base est\u00e9tica inicial!<\/p>\n\n\n\n
Elijamos una fuente estilo terminal y a\u00f1ad\u00e1mosla a nuestra p\u00e1gina HTML:<\/p>\n\n\n
<link<\/span> rel<\/span>=\"preconnect\"<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\"<\/span>><\/span>\n<link<\/span> rel<\/span>=\"preconnect\"<\/span> href<\/span>=\"https:\/\/fonts.gstatic.com\"<\/span> crossorigin<\/span>><\/span>\n<link<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css2?family=VT323&display=swap\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Para crear la atm\u00f3sfera retro-futurista al estilo Fallout, usaremos una fuente monospace y una paleta de colores espec\u00edfica. Comencemos definiendo variables CSS para los colores y la fuente:<\/p>\n\n\n
:root<\/span> {\n    font-family<\/span>: \"VT323\"<\/span>, monospace;\n    font-weight<\/span>: 400<\/span>;\n    --primary-color<\/span>: #ffd52c<\/span>;\n    --secondary-color<\/span>: #ff5c00<\/span>;\n    --tertiary-color<\/span>: #c72d04<\/span>;\n    --background-color<\/span>: #111<\/span>;\n    scrollbar-color<\/span>: var<\/span>(--primary-color) var<\/span>(--secondary-color);\n    font-size<\/span>: clamp<\/span>(18px<\/span>, 3vw<\/span>, 30px<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"Create<\/figure>\n\n\n\n
Usar variables es importante para realizar cambios de estilo o variantes m\u00e1s adelante.<\/p>\n\n\n\n
Layout responsivo<\/h3>\n\n\n\n
Creemos un layout responsivo<\/strong> con un encabezado, contenido principal y pie de p\u00e1gina dentro de un contenedor que ocupe toda la pantalla y est\u00e9 centrado.<\/p>\n\n\n
div<\/span>.retro-container<\/span> {\n    width<\/span>: 90vw<\/span>;\n    height<\/span>: 90vh<\/span>;\n    display<\/span>: grid;\n    grid-template-rows<\/span>: auto 1<\/span>fr auto;\n    overflow<\/span>: hidden;\n    padding<\/span>: 0.5rem<\/span>;\n    border<\/span>: 2px<\/span> solid var<\/span>(--primary-color);\n    color<\/span>: var<\/span>(--primary-color);\n    mask-image<\/span>: linear-gradient<\/span>(to bottom, #0005<\/span> 50%<\/span>, #000<\/span> 50%<\/span>);\n    mask-size<\/span>: 100%<\/span> 2px<\/span>;\n    text-shadow<\/span>: 0<\/span> 0<\/span> 0.5rem<\/span>;\n}\n\nheader<\/span>,\nfooter<\/span> {\n    display<\/span>: flex;\n    gap<\/span>: 2rem<\/span>;\n    align-items<\/span>: center;\n}\n\nmain<\/span> {\n    overflow<\/span>: hidden;\n}\n\nsection<\/span> {\n    height<\/span>: 100%<\/span>;\n    overflow<\/span>: hidden auto;\n    margin<\/span>: 1rem<\/span> 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Las secciones ser\u00e1n nuestras pantallas, y solo se podr\u00e1 mover de una secci\u00f3n a otra a trav\u00e9s del men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n
\"Pip-Boy<\/figure>\n\n\n\n
Tambi\u00e9n podemos a\u00f1adir un script al final de la p\u00e1gina para siempre desplazarse al inicio del contenido de cada secci\u00f3n al hacer clic en los enlaces del men\u00fa:<\/p>\n\n\n
document<\/span>.querySelectorAll('a[href^=\"#\"]'<\/span>).forEach(anchor<\/span> =><\/span> {\n    anchor.addEventListener('click'<\/span>, function<\/span> (e<\/span>) <\/span>{\n        e.preventDefault();\n        const<\/span> targetId = this<\/span>.getAttribute('href'<\/span>);\n        const<\/span> targetElement = document<\/span>.querySelector(targetId);\n        const<\/span> main = document<\/span>.querySelector('main'<\/span>);\n\n        if<\/span> (targetElement) {\n            main.scrollTo({\n                top<\/span>: targetElement.offsetTop - main.offsetTop,\n                behavior<\/span>: 'smooth'<\/span>\n            });\n        }\n    });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Efectos visuales y animaciones<\/h3>\n\n\n\n
Efecto de Monitor CRT Antiguo<\/h4>\n\n\n\n
\"old<\/figure>
\n
Creamos un efecto CRT con una animaci\u00f3n para simular esa “banda horizontal” t\u00edpica de los tubos cat\u00f3dicos (debida a la baja frecuencia de actualizaci\u00f3n) utilizando un gradiente lineal animado con la propiedad background-position<\/code>: podemos jugar con la velocidad, el \u00e1ngulo e incluso con el gradiente para obtener nuestro efecto de parpadeo preferido.<\/p>\n<\/div><\/div>\n\n\n\n
\n\n\n\n
A\u00f1adimos un sombreado similar a una retroiluminaci\u00f3n en los bordes utilizando un box-shadow<\/code> con el valor inset<\/code>: cabe destacar que, al no especificar los colores en instrucciones como esta, se tomar\u00e1 la propiedad color<\/code> del elemento que lo contiene (o del primer elemento ancestro que lo especifica).<\/p>\n\n\n
@keyframes<\/span> crtAnimation {\n    0% {\n        background-position<\/span>: 0<\/span> 0<\/span>;\n    }\n\n    100% {\n        background-position<\/span>: 0<\/span> 10000%<\/span>;\n    }\n}\n\n.old-crt-monitor<\/span> {\n    box-shadow<\/span>: inset 0px<\/span> 0px<\/span> 2rem<\/span>;\n    background-image<\/span>: linear-gradient<\/span>(0deg<\/span>, #0000<\/span> 10%<\/span>, #fff1 90%<\/span>, #0000<\/span> 100%<\/span>);\n    animation<\/span>: crtAnimation 100s<\/span> linear infinite;\n    background-size<\/span>: 100%<\/span> 80%<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Art\u00edculo recomendado: Tendencias frontend para el 2024, el retorno de CSS<\/strong><\/em><\/a><\/p>\n\n\n\n
\n\n\n\n
Efecto de l\u00edneas de escaneo<\/h4>\n\n\n\n
Para reproducir las l\u00edneas de terminal de baja fidelidad, creamos un efecto de scanline en el contenedor principal usando mask-image<\/code>:<\/p>\n\n\n
div<\/span>.retro-container<\/span> {\n    mask-image<\/span>: linear-gradient<\/span>(to bottom, #0005<\/span> 50%<\/span>, #000<\/span> 50%<\/span>);\n    mask-size<\/span>: 100%<\/span> 2px<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
El gradiente que genera mask-image<\/code> se repite cada 2px, creando una l\u00ednea de un p\u00edxel ligeramente transparente y otra l\u00ednea completamente sin alterar.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
Alerta Roja<\/h4>\n\n\n\n
\"red<\/figure>
\n
Ninguna pantalla de ciencia ficci\u00f3n est\u00e1 completa sin un elemento parpadeante que llame nuestra atenci\u00f3n sobre un giro catastr\u00f3fico inminente en la trama. Creamos una animaci\u00f3n para los elementos de alerta:<\/p>\n<\/div><\/div>\n\n\n
alert<\/span> {\n    animation<\/span>: blink-bg 1s<\/span> ease-out infinite;\n}\n\n@keyframes<\/span> blink-bg {\n    0%, 60% {\n        text-shadow<\/span>: 0<\/span> 0<\/span> 10.5rem<\/span>;\n        color<\/span>: var<\/span>(--primary-color);\n    }\n    70%, 100% {\n        text-shadow<\/span>: 0<\/span> 0<\/span> 20.5rem<\/span>;\n        color<\/span>: var<\/span>(--tertiary-color);\n    }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Usando IA Generativa para crear contenido de Ciencia Ficci\u00f3n<\/h3>\n\n\n\n
\"AI<\/figure>
\n
Claro, aqu\u00ed est\u00e1 la traducci\u00f3n:<\/p>\n\n\n\n
\n\n\n\n
Utilizar modelos de inteligencia artificial para generar contenidos ficticios directamente en HTML (como hice en la versi\u00f3n final) puede ayudarnos a salir de nuestra zona de confort, explorar nuevas ideas de dise\u00f1o y proporcionar un resultado mucho mejor que el cl\u00e1sico lorem ipsum.<\/p>\n\n\n\n
Los fant\u00e1sticos dise\u00f1os t\u00e9cnicos fueron generados con el divertido modelo de generador de instrucciones de IKEA<\/a> (LORA SDXL) entrenado por Ostris<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n
Conclusiones<\/h3>\n\n\n\n
Experimentar con CSS para crear dise\u00f1os retro-futuristas al estilo de Fallout es divertido y \u00fatil. No debemos subestimar el potencial de la creatividad, pero es importante seguir siempre las mejores pr\u00e1cticas y las reglas de accesibilidad. Indirectamente, estas directrices tambi\u00e9n facilitar\u00e1n el trabajo art\u00edstico.<\/p>\n\n\n\n
\n
\"Esempio
Risultato finale sezione “station”<\/figcaption><\/figure>\n\n\n\n
\"Esempio
Risultato finale sezione “crew”<\/figcaption><\/figure>\n\n\n\n
\"Esempio
Risultato finale sezione “data”<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"
\u00bfTambi\u00e9n eres de prestar m\u00e1s atenci\u00f3n a las terminales y pantallas futuristas en pel\u00edculas y series de ciencia ficci\u00f3n que a sus tramas? Personalmente, tengo una verdadera pasi\u00f3n por este antiguo arte de imaginar y dise\u00f1ar la UX\/UI del futuro. Y no creo ser el \u00fanico \ud83e\udd13 En este tutorial, nos inspiraremos en la UI… Read more<\/a><\/p>\n","protected":false},"author":255,"featured_media":28116,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10632],"tags":[11742],"collections":[],"class_list":{"0":"post-28181","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-es","8":"tag-css-es","9":"entry"},"yoast_head":"\nFallout: crea tu propio Pip-Boy 3000 con CSS - Codemotion<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creamos una UI tipo Fallout usando CSS moderno\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-11T10:45:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-11T10:45:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Massimo Avvisati\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MassimoAvvisati\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Massimo Avvisati\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Creamos una UI tipo Fallout usando CSS moderno\",\"datePublished\":\"2024-06-11T10:45:18+00:00\",\"dateModified\":\"2024-06-11T10:45:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\"},\"wordCount\":870,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\",\"name\":\"Fallout: crea tu propio Pip-Boy 3000 con CSS - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\",\"datePublished\":\"2024-06-11T10:45:18+00:00\",\"dateModified\":\"2024-06-11T10:45:19+00:00\",\"description\":\"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\",\"width\":1920,\"height\":1080,\"caption\":\"Risultato finale sezione \\\"crew\\\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creamos una UI tipo Fallout usando CSS moderno\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\",\"name\":\"Massimo Avvisati\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"caption\":\"Massimo Avvisati\"},\"description\":\"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/\",\"https:\/\/x.com\/MassimoAvvisati\"],\"knowsAbout\":[\"Javascript\",\"Node.js\",\"PHP\",\"AI\",\"Machine Learning\",\"Web Development\",\"Free Software\"],\"knowsLanguage\":[\"English\",\"Spanish\",\"Italian\"],\"jobTitle\":\"Head of EdTech R&D\",\"worksFor\":\"Codemotion spa\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fallout: crea tu propio Pip-Boy 3000 con CSS - Codemotion","description":"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/","og_locale":"en_US","og_type":"article","og_title":"Creamos una UI tipo Fallout usando CSS moderno","og_description":"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-06-11T10:45:18+00:00","article_modified_time":"2024-06-11T10:45:19+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","type":"image\/png"}],"author":"Massimo Avvisati","twitter_card":"summary_large_image","twitter_creator":"@MassimoAvvisati","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Massimo Avvisati","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Creamos una UI tipo Fallout usando CSS moderno","datePublished":"2024-06-11T10:45:18+00:00","dateModified":"2024-06-11T10:45:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/"},"wordCount":870,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","keywords":["CSS"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/","name":"Fallout: crea tu propio Pip-Boy 3000 con CSS - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","datePublished":"2024-06-11T10:45:18+00:00","dateModified":"2024-06-11T10:45:19+00:00","description":"Descubre c\u00f3mo crear una interfaz de usuario inspirada en el Pip-Boy 3000 de Fallout con CSS moderno. \u00a1No te pierdas esta gu\u00eda at\u00f3mica!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","width":1920,"height":1080,"caption":"Risultato finale sezione \"crew\""},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/creamos-una-ui-tipo-fallout-usando-css-moderno\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/es\/frontend-es\/"},{"@type":"ListItem","position":3,"name":"Creamos una UI tipo Fallout usando CSS moderno"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a","name":"Massimo Avvisati","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","caption":"Massimo Avvisati"},"description":"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.","sameAs":["https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/","https:\/\/x.com\/MassimoAvvisati"],"knowsAbout":["Javascript","Node.js","PHP","AI","Machine Learning","Web Development","Free Software"],"knowsLanguage":["English","Spanish","Italian"],"jobTitle":"Head of EdTech R&D","worksFor":"Codemotion spa","url":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-600x600.png","author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_comment_info":0,"uagb_excerpt":"\u00bfTambi\u00e9n eres de prestar m\u00e1s atenci\u00f3n a las terminales y pantallas futuristas en pel\u00edculas y series de ciencia ficci\u00f3n que a sus tramas? Personalmente, tengo una verdadera pasi\u00f3n por este antiguo arte de imaginar y dise\u00f1ar la UX\/UI del futuro. Y no creo ser el \u00fanico \ud83e\udd13 En este tutorial, nos inspiraremos en la UI……","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=28181"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28181\/revisions"}],"predecessor-version":[{"id":28205,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28181\/revisions\/28205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/28116"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=28181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28181"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}