{"id":28162,"date":"2024-06-11T12:00:35","date_gmt":"2024-06-11T10:00:35","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28162"},"modified":"2024-06-11T14:31:52","modified_gmt":"2024-06-11T12:31:52","slug":"creating-a-fallout-style-ui-using-modern-css","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/","title":{"rendered":"Creating a Fallout-Style UI Using Modern CSS"},"content":{"rendered":"\n<p>Do you also find yourself paying more attention to futuristic terminals and displays in sci-fi movies and series than to their plots? Personally, I have a genuine passion for this ancient art of imagining and designing the UX\/UI of the future. And I don&#8217;t think I&#8217;m the only one \ud83e\udd13<\/p>\n\n\n\n<p>In this tutorial, we will draw inspiration from the Fallout UI with the retro-futuristic style of the Pip-Boy 3000 to delve into some modern and little-known CSS techniques that can transform a web page into a true experience or a perfect sci-fi display contained in a 3D-printed prop\u2026 and without forgetting accessibility!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-creating-a-semantic-html-base\">Creating a Semantic HTML Base<\/h3>\n\n\n\n<p>To start, let&#8217;s create some dummy content using semantic HTML tags. Here&#8217;s a basic HTML example that we will use for our Fallout UI:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Retro Futuristic UI<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"style.css\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"retro-container scanline-effect\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"navigation\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#screen-1\"<\/span>&gt;<\/span>SCREEN 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"screen-1\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">article<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>SCREEN 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"content\"<\/span>&gt;<\/span>\n                        Lorem ipsum...\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"url_illustration\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"alt text for illustration\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">figure<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">article<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">footer<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This HTML code creates a semantic base structure with a header, a main section divided into sections, and a footer. Navigation between sections is achieved through links in the menu contained in the <code>nav<\/code> tag, explicitly declaring its role (thus instructing screen readers or other assistive technologies).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-maintaining-responsiveness-and-accessibility\">Maintaining Responsiveness and Accessibility<\/h3>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<p>We must remember that by default, a well-structured HTML page without styles is already responsive and accessible: the modifications we make with CSS introduce new potential issues, so it&#8217;s important to follow the principle of less is more and proceed step by step.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"849\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/no_style-e1718019021184-1024x849.png\" alt=\"Retro-Futuristic UI\" class=\"wp-image-28107 size-full\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/no_style-e1718019021184-1024x849.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/no_style-e1718019021184-300x249.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/no_style-e1718019021184-768x637.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/no_style-e1718019021184.png 1187w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>For our interface, we will use a responsive structure with a central area that serves as a container for sections containing article elements: even within these, it&#8217;s important to implement semantics and accessibility.<\/p>\n\n\n\n<p>In short, our base without CSS must (as always) be an example of rectitude and love for web standards, ideally obtaining all maximum scores when using tools like Google Lighthouse to evaluate accessibility and best practices. \ud83e\udef6<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>See the results of creating a Pip-Boy-like UI in the video below!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Retro Futuristic UI using CSS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/WThDCI2gpmA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-typography-and-colors\">Typography and Colors<\/h3>\n\n\n\n<p>When we have our basic content, we can have fun finding an initial aesthetic base!<\/p>\n\n\n\n<p>Let&#8217;s choose a terminal-style font and add it to our HTML page:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">html<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preconnect\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preconnect\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.gstatic.com\"<\/span> <span class=\"hljs-attr\">crossorigin<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=VT323&amp;display=swap\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To create the retro-futuristic Fallout-style atmosphere, we will use a monospace font and a specific color palette. Let&#8217;s start by defining CSS variables for colors and font:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-pseudo\">:root<\/span> {\n    <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"VT323\"<\/span>, monospace;\n    <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">400<\/span>;\n    <span class=\"hljs-attribute\">--primary-color<\/span>: <span class=\"hljs-number\">#ffd52c<\/span>;\n    <span class=\"hljs-attribute\">--secondary-color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">--tertiary-color<\/span>: <span class=\"hljs-number\">#c72d04<\/span>;\n    <span class=\"hljs-attribute\">--background-color<\/span>: <span class=\"hljs-number\">#111<\/span>;\n    <span class=\"hljs-attribute\">scrollbar-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color) <span class=\"hljs-built_in\">var<\/span>(--secondary-color);\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-built_in\">clamp<\/span>(<span class=\"hljs-number\">18px<\/span>, <span class=\"hljs-number\">3vw<\/span>, <span class=\"hljs-number\">30px<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Using variables is important for making style changes or variants later!<\/p>\n\n\n\n<p>Let&#8217;s apply these basic styles to our document:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">* {\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n}\n\n<span class=\"hljs-selector-tag\">body<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">justify-content<\/span>: center;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--background-color);\n    <span class=\"hljs-attribute\">cursor<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'.\/assets\/mouse.svg'<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-1024x504.png\" alt=\"Create your own Pip-Boy 3000 with CSS\" class=\"wp-image-28108\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-1024x504.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-300x148.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-768x378.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-1536x756.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/font_colors_style-2048x1009.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We have also added a more styled cursor in SVG format, ensuring it does not exceed 32px (beyond which it might not be recognized by the browser).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-responsive-layout\">Responsive Layout<\/h3>\n\n\n\n<p>Let&#8217;s create a responsive layout with a header, main, and footer within a container that occupies the entire display and is centered.<\/p>\n\n\n\n<p>Header and footer will always be present, while the main content will be organized into sections controlled by the navigation menu.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-class\">.retro-container<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">90vw<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">90vh<\/span>;\n    <span class=\"hljs-attribute\">display<\/span>: grid;\n    <span class=\"hljs-attribute\">grid-template-rows<\/span>: auto <span class=\"hljs-number\">1<\/span>fr auto;\n    <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n    <span class=\"hljs-attribute\">mask-image<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(to bottom, #<span class=\"hljs-number\">0005<\/span> <span class=\"hljs-number\">50%<\/span>, #<span class=\"hljs-number\">000<\/span> <span class=\"hljs-number\">50%<\/span>);\n    <span class=\"hljs-attribute\">mask-size<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-number\">2px<\/span>;\n    <span class=\"hljs-attribute\">text-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0.5rem<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">header<\/span>,\n<span class=\"hljs-selector-tag\">footer<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n}\n\n<span class=\"hljs-selector-tag\">main<\/span> {\n    <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n}\n\n<span class=\"hljs-selector-tag\">section<\/span> {\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n    <span class=\"hljs-attribute\">overflow<\/span>: hidden auto;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">1rem<\/span> <span class=\"hljs-number\">0<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The sections will be our screens, and it will only be possible to move from one section to another through the navigation menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2926\" height=\"2288\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub.png\" alt=\"\" class=\"wp-image-28109\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub.png 2926w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-300x235.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-1024x801.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-768x601.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-1536x1201.png 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-2048x1601.png 2048w\" sizes=\"auto, (max-width: 2926px) 100vw, 2926px\" \/><\/figure>\n\n\n\n<p>We can also add a script at the end of the page to always scroll to the top of each section&#8217;s content when clicking on menu links:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'a&#91;href^=\"#\"]'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">anchor<\/span> =&gt;<\/span> {\n    anchor.addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">e<\/span>) <\/span>{\n        e.preventDefault();\n        <span class=\"hljs-keyword\">const<\/span> targetId = <span class=\"hljs-keyword\">this<\/span>.getAttribute(<span class=\"hljs-string\">'href'<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> targetElement = <span class=\"hljs-built_in\">document<\/span>.querySelector(targetId);\n        <span class=\"hljs-keyword\">const<\/span> main = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'main'<\/span>);\n\n        <span class=\"hljs-keyword\">if<\/span> (targetElement) {\n            main.scrollTo({\n                <span class=\"hljs-attr\">top<\/span>: targetElement.offsetTop - main.offsetTop,\n                <span class=\"hljs-attr\">behavior<\/span>: <span class=\"hljs-string\">'smooth'<\/span>\n            });\n        }\n    });\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-visual-effects-and-animations\">Visual Effects and Animations<\/h3>\n\n\n\n<p>To achieve a retro-futuristic look, let&#8217;s add some visual effects and animations.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-old-crt-monitor-effect\">Old CRT Monitor Effect<\/h4>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"369\" height=\"364\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/crt.gif\" alt=\"old monitor effect pipboy\" class=\"wp-image-28112 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Let&#8217;s create a CRT effect with an animation to mimic the &#8220;horizontal band&#8221; typical of cathode ray tubes (due to low refresh rates) using an animated linear gradient background-position: we can play with speed, angle, and even the gradient to achieve our preferred flickering effect!<\/p>\n<\/div><\/div>\n\n\n\n<p>Add a backlight-like gradient on the edges using a box-shadow with the inset value: note that not specifying colors in instructions like this will inherit the color property from the containing element (or the first ancestor element that specifies it).<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@keyframes<\/span> crtAnimation {\n    0% {\n        <span class=\"hljs-attribute\">background-position<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n    }\n\n    100% {\n        <span class=\"hljs-attribute\">background-position<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10000%<\/span>;\n    }\n}\n\n<span class=\"hljs-selector-class\">.old-crt-monitor<\/span> {\n    <span class=\"hljs-attribute\">box-shadow<\/span>: inset <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">0px<\/span> <span class=\"hljs-number\">2rem<\/span>;\n    <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">0deg<\/span>, #<span class=\"hljs-number\">0000<\/span> <span class=\"hljs-number\">10%<\/span>, #fff1 <span class=\"hljs-number\">90%<\/span>, #<span class=\"hljs-number\">0000<\/span> <span class=\"hljs-number\">100%<\/span>);\n    <span class=\"hljs-attribute\">animation<\/span>: crtAnimation <span class=\"hljs-number\">100s<\/span> linear infinite;\n    <span class=\"hljs-attribute\">background-size<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-number\">80%<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-scanline-effect\">Scanline Effect<\/h4>\n\n\n\n<p>To reproduce the lo-fi terminal lines, we can create a scanline effect on the main container using <code>mask-image<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div.retro-container {<br>    mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);<br>    mask-size: 100% 2px;<br>}<br><\/pre>\n\n\n\n<p>The gradient that generates <code>mask-image<\/code> is repeated every 2px, creating a slightly transparent one-pixel line and a completely unaltered line: playing with these parameters can produce very interesting patterns!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"460\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_result.png\" alt=\"\" class=\"wp-image-28111\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_result.png 952w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_result-300x145.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_result-768x371.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/figure>\n\n\n\n<p>The surprising thing is that the mask even applies to the scrollbar, ensuring a more consistent experience with minimal effort!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-red-alert\">Red Alert<\/h4>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"331\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/preview_table.gif\" alt=\"red alert pip-boy 3000 with css\" class=\"wp-image-28110 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>No sci-fi display is complete without a flashing element to draw our attention to an imminent catastrophic plot twist.<\/p>\n<\/div><\/div>\n\n\n\n<p>Let&#8217;s create an animation for alert elements:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>alert {\n    animation: blink-bg 1s ease-out infinite;\n}\n\n@keyframes blink-bg {\n    0%, 60% {\n        text-shadow: 0 0 10.5rem;\n        color: var(--primary-color);\n    }\n    70%, 100% {\n        text-shadow: 0 0 20.5rem;\n        color: var(--tertiary-color);\n    }\n}\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-generative-ai-to-create-sci-fi-content\">Using Generative AI to Create Sci-Fi Content<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien.jpeg\" alt=\"AI generated. Create your own Pip-Boy 3000 with CSS\" class=\"wp-image-28138\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien.jpeg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien-300x300.jpeg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien-150x150.jpeg 150w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien-768x768.jpeg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien-100x100.jpeg 100w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien-600x600.jpeg 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Using AI models to generate fictitious content directly in HTML (as I did in the final version) can help us step out of our comfort zone and explore new design ideas, providing a result far better than the classic lorem ipsum.<\/p>\n\n\n\n<p>The fantastic technical drawings were generated with the fun <a href=\"https:\/\/huggingface.co\/ostris\/ikea-instructions-lora-sdxl\" class=\"ek-link\">IKEA instruction generator<\/a> model (LORA SDXL) trained by <a href=\"https:\/\/twitter.com\/ostrisai\" class=\"ek-link\">Ostris<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/frontend-trends-for-2024-css-revival-bff-ruling-languages-and-more\/\" class=\"ek-link\">Recommended article: CSS Revival in 2024 and Other frontend trends<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-your-pip-boy-3000-with-css-conclusions\">Create Your Pip-Boy 3000 With CSS: Conclusions<\/h3>\n\n\n\n<p>Experimenting with CSS to create retro-futuristic Fallout-style designs is fun and useful. We should not underestimate the potential of creativity, but it is important to always follow best practices and accessibility rules. Indirectly, these guidelines will also facilitate artistic work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you also find yourself paying more attention to futuristic terminals and displays in sci-fi movies and series than to their plots? Personally, I have a genuine passion for this ancient art of imagining and designing the UX\/UI of the future. And I don&#8217;t think I&#8217;m the only one \ud83e\udd13 In this tutorial, we will&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/\">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":[6],"tags":[66,12244,10556],"collections":[],"class_list":{"0":"post-28162","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-css","9":"tag-fallout-en","10":"tag-ui","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Your Own Fallout Pip-Boy 3000 With CSS \ud83e\udd2f<\/title>\n<meta name=\"description\" content=\"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don&#039;t miss this atomic guide!\" \/>\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\/frontend\/creating-a-fallout-style-ui-using-modern-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Fallout-Style UI Using Modern CSS\" \/>\n<meta property=\"og:description\" content=\"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don&#039;t miss this atomic guide!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/\" \/>\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:00:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-11T12:31:52+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\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Creating a Fallout-Style UI Using Modern CSS\",\"datePublished\":\"2024-06-11T10:00:35+00:00\",\"dateModified\":\"2024-06-11T12:31:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/\"},\"wordCount\":842,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/final_version_crew_screenshot.png\",\"keywords\":[\"CSS\",\"Fallout\",\"UI\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/\",\"name\":\"Create Your Own Fallout Pip-Boy 3000 With CSS \ud83e\udd2f\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/final_version_crew_screenshot.png\",\"datePublished\":\"2024-06-11T10:00:35+00:00\",\"dateModified\":\"2024-06-11T12:31:52+00:00\",\"description\":\"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don't miss this atomic guide!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#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\\\/frontend\\\/creating-a-fallout-style-ui-using-modern-css\\\/#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\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating a Fallout-Style UI Using Modern CSS\"}]},{\"@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\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/massimo-100x100.jpeg\",\"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":"Create Your Own Fallout Pip-Boy 3000 With CSS \ud83e\udd2f","description":"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don't miss this atomic guide!","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\/frontend\/creating-a-fallout-style-ui-using-modern-css\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Fallout-Style UI Using Modern CSS","og_description":"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don't miss this atomic guide!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-06-11T10:00:35+00:00","article_modified_time":"2024-06-11T12:31:52+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\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Creating a Fallout-Style UI Using Modern CSS","datePublished":"2024-06-11T10:00:35+00:00","dateModified":"2024-06-11T12:31:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/"},"wordCount":842,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","keywords":["CSS","Fallout","UI"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/","name":"Create Your Own Fallout Pip-Boy 3000 With CSS \ud83e\udd2f","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","datePublished":"2024-06-11T10:00:35+00:00","dateModified":"2024-06-11T12:31:52+00:00","description":"Discover how to create Fallout Pip-Boy 3000-inspired UI with unexplored uses of modern CSS. Don't miss this atomic guide!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#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\/frontend\/creating-a-fallout-style-ui-using-modern-css\/#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\/frontend\/"},{"@type":"ListItem","position":3,"name":"Creating a Fallout-Style UI Using Modern CSS"}]},{"@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\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","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":"Do you also find yourself paying more attention to futuristic terminals and displays in sci-fi movies and series than to their plots? Personally, I have a genuine passion for this ancient art of imagining and designing the UX\/UI of the future. And I don&#8217;t think I&#8217;m the only one \ud83e\udd13 In this tutorial, we will&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28162","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=28162"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28162\/revisions"}],"predecessor-version":[{"id":28207,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28162\/revisions\/28207"}],"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=28162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28162"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}