{"id":28105,"date":"2024-06-10T17:02:54","date_gmt":"2024-06-10T15:02:54","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28105"},"modified":"2024-08-06T10:50:35","modified_gmt":"2024-08-06T08:50:35","slug":"creiamo-una-ui-alla-fallout-usando-modern-css","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/","title":{"rendered":"Creiamo una UI alla Fallout usando modern CSS"},"content":{"rendered":"\n<p>Anche a voi capita di prestare pi\u00f9 attenzione ai terminali ed ai display futuristici nei film e nelle serie di fantascienza che alla loro trama? Personalmente ho un&#8217;autentica passione per questa antica arte di immaginare e <strong>disegnare le UX\/UI del futuro<\/strong>. E non credo di essere l&#8217;unico \ud83e\udd13<\/p>\n\n\n\n<p>In questo tutorial, ci ispireremo <strong>alla UI alla Fallout con lo stile retro-futuristica del Pip-Boy 3000<\/strong> per approfondire alcune tecniche moderne e poco diffuse dei fogli di stile CSS che possono trasformare una pagina web in un vera&nbsp;<em>experience<\/em>&nbsp;o in perfetto <em>display sci-fi<\/em> contenuto in una&nbsp;<em>prop<\/em>&nbsp;stampata in 3D&#8230; e senza dimenticare l&#8217;accessibilit\u00e0!<\/p>\n\n\n\n<p>Scopri come trasformare il tuo design in un&#8217;interfaccia utente retro-futuristica ispirata al <strong>Pip-Boy 3000<\/strong> della serie <strong>Fallout <\/strong>esplorando alcune specifiche poco usate di <em>modern CSS<\/em><\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-4c8ef031      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#creare-una-base-html-semantica\" class=\"uagb-toc-link__trigger\">Creare una base HTML semantica<\/a><li class=\"uagb-toc__list\"><a href=\"#mantenere-la-responsivit\u00e0-e-laccessibilit\u00e0\" class=\"uagb-toc-link__trigger\">Mantenere la responsivit\u00e0 e l&#039;accessibilit\u00e0<\/a><li class=\"uagb-toc__list\"><a href=\"#tipografia-e-colori\" class=\"uagb-toc-link__trigger\">Tipografia e colori<\/a><li class=\"uagb-toc__list\"><a href=\"#4-layout-responsive\" class=\"uagb-toc-link__trigger\">4. Layout responsive<\/a><li class=\"uagb-toc__list\"><a href=\"#5-effetti-visivi-e-animazioni\" class=\"uagb-toc-link__trigger\">5. Effetti visivi e animazioni<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#effetto-vecchio-monitor-crt\" class=\"uagb-toc-link__trigger\">Effetto vecchio monitor CRT<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#effetto-scanline\" class=\"uagb-toc-link__trigger\">Effetto &quot;scanline&quot;<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#allarme-rosso\" class=\"uagb-toc-link__trigger\">Allarme Rosso<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#usiamo-lintelligenza-artificiale-generativa-per-create-un-contenuto-sci-fi\" class=\"uagb-toc-link__trigger\">Usiamo l&#039;Intelligenza Artificiale Generativa per create un contenuto sci-fi<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusioni\" class=\"uagb-toc-link__trigger\">Conclusioni<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"creare-una-base-html-semantica\">Creare una base HTML semantica<\/h2>\n\n\n\n<p>Per iniziare, creiamo un contenuto fittizio utilizzando tag HTML semantici. Ecco un esempio di base HTML che useremo per la nostra UI alla Fallout:<\/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\">\"it\"<\/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\">em<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- retro fonts in next step --&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/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\">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                    \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\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\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\">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>Questo codice HTML crea una struttura di base semantica con un&nbsp;<code>header<\/code>, un&nbsp;<code>main<\/code>&nbsp;suddiviso in sezioni e un&nbsp;<code>footer<\/code>. La navigazione tra le sezioni avviene tramite i link nel menu contenuti nella tag&nbsp;<code>nav<\/code>&nbsp;per dichiararne esplicitamente il ruolo (e quindi istruire ad esempio gli&nbsp;<em>screen-reader<\/em>&nbsp;o altre tecnologie assistive).<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"mantenere-la-responsivit%C3%A0-e-laccessibilit%C3%A0\">Mantenere la responsivit\u00e0 e l&#8217;accessibilit\u00e0<\/h2>\n\n\n<div class=\"gb-container gb-container-e6011f09\">\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:33% auto\"><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=\"\" 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 class=\"wp-block-media-text__content\">\n<p class=\"has-text-align-left has-large-font-size\">Dobbiamo ricordare che di default, una pagina HTML senza stili ma ben strutturata \u00e8 gi\u00e0 responsive e accessibile: sono le modifiche che apportiamo con CSS ad introdurre nuovi possibili guai, quindi \u00e8 importante seguire il principio del&nbsp;<strong>less is more<\/strong>&nbsp;e procedere per step.<\/p>\n<\/div><\/div>\n\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Per la nostra interfaccia useremo una struttura responsive con un&#8217;area centrale che funziona da&nbsp;<em>container<\/em>&nbsp;per sezioni con all&#8217;interno degli elementi&nbsp;<code>article<\/code>: anche al loro interno \u00e8 importante implementare semantica e accessibilit\u00e0.<\/p>\n\n\n\n<p>Insomma la nostra base senza CSS dovr\u00e0 essere (come sempre) un esempio di rettitudine e amore per gli standard web, ottenendo idealmente&nbsp;<strong>tutti punteggi massimi<\/strong>&nbsp;quando usiamo Google Lighthouse ad esempio per valutarne accessibilit\u00e0 e best practice. \ud83e\udef6<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tipografia-e-colori\">Tipografia e colori<\/h2>\n\n\n\n<p>Quando abbiamo il nostro contenuto di base possiamo divertirci a trovare una prima&nbsp;<strong>base estetica<\/strong>!<\/p>\n\n\n\n<p>Scegliamo quindi un font stile&nbsp;<em>terminale<\/em>&nbsp;ed aggiungiamolo alla nostra pagina html:<\/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\"><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<\/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>Per creare l&#8217;atmosfera retro-futuristica in stile Fallout, utilizzeremo un font monospace e una palette di colori specifica. Iniziamo con la definizione delle variabili CSS per i colori e il font:<\/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}\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>L&#8217;uso di variabili \u00e8 importante per effetturare cambi di stile o varianti in seguito!<\/p>\n\n\n\n<p>Applichiamo questi stili di base al nostro documento:<\/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\">block-size<\/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>) <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>, auto;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span> {\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n    <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n    <span class=\"hljs-attribute\">cursor<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">\"assets\/mouse.svg\"<\/span>) <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>, pointer;\n}\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=\"\" 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>Abbiamo anche aggiunto un cursore pi\u00f9 in stile in formato SVG facendo attenzione a non superare i 32px (oltre il quale potrebbe non essere considerato dal browser).<\/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\/it\/frontend-it\/e-possibile-innamorarsi-di-css\/\" class=\"ek-link\"><strong><em>Articolo consigliato: \u00c8 possibile innamorarsi di CSS?<\/em><\/strong><\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong><em>Spoiler: guarda i risultati nel video!<\/em><\/strong><\/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 (with tutorial)\" 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<h2 class=\"wp-block-heading\" id=\"4-layout-responsive\">4. Layout responsive<\/h2>\n\n\n\n<p>Creiamo un layout responsive con&nbsp;<code>header<\/code>,&nbsp;<code>main<\/code>&nbsp;e&nbsp;<code>footer<\/code>&nbsp;all&#8217;interno di un&nbsp;<em>container<\/em>&nbsp;che occupi l&#8217;intero display e sia centrato.<\/p>\n\n\n\n<p><code>header<\/code>&nbsp;e&nbsp;<code>footer<\/code>&nbsp;saranno sempre presenti, mentre il contenuto del&nbsp;<code>main<\/code>&nbsp;sar\u00e0 organizzato in sezioni controllate dal menu di navigazione.<\/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\">inline-size<\/span>: <span class=\"hljs-number\">90vw<\/span>;\n    <span class=\"hljs-attribute\">block-size<\/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\">block-size<\/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>Le&nbsp;<code>section<\/code>&nbsp;saranno quindi le nostre schermate e non sar\u00e0 possibile passare da una sezione all&#8217;altra se non dal men\u00f9 di navigazione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/hub-1024x801.png\" alt=\"\" class=\"wp-image-28109\" srcset=\"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-300x235.png 300w, 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: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Possiamo anche aggiungere uno script alla fine della pagina per portare sempre all&#8217;inizio del contenuto di ogni sezione al cliccare sui link del men\u00f9:<\/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});<\/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<h2 class=\"wp-block-heading\" id=\"5-effetti-visivi-e-animazioni\">5. Effetti visivi e animazioni<\/h2>\n\n\n\n<p>Per ottenere un look retro-futuristico, aggiungiamo alcuni effetti visivi e animazioni.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"effetto-vecchio-monitor-crt\">Effetto vecchio monitor CRT<\/h3>\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=\"\" class=\"wp-image-28112 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Creiamo un effetto CRT con un&#8217;animazione per rendere quella &#8220;banda orizzontale&#8221; tipica dei tubi catodici (dovuta alla bassa frequenza di aggiornamento) sfruttando un&nbsp;<code>linear-gradient<\/code>&nbsp;animato dalla&nbsp;<code>background-position<\/code>: possiamo giocare con la velocit\u00e0 o l&#8217;angolo e perfino sul gradiente per ottenere il nostro effetto di flickering preferito!<\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Aggiungiamo una sfumatura simile ad una retro illuminazione sui bordi utilizzando un&nbsp;<code>box-shadow<\/code>&nbsp;con il valore&nbsp;<code>inset<\/code>: da notare che non specificando i colori in istruzioni come questa andr\u00e0 a pescare la propriet\u00e0&nbsp;<code>color<\/code>&nbsp;dell&#8217;elemento che lo contiene (o dal primo&nbsp;<em>elemento antenato<\/em>&nbsp;che lo specifica).<\/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<h3 class=\"wp-block-heading\" id=\"effetto-scanline\">Effetto &#8220;scanline&#8221;<\/h3>\n\n\n\n<p>Per riprodurre quelle righine dei terminali lo-fi possiamo creare un&nbsp;<em>effetto scanline<\/em>&nbsp;al container principale usando&nbsp;<code>mask-image<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" 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\">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}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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>Il gradiente che genera&nbsp;<code>mask-image<\/code>&nbsp;viene ripetuto ogni&nbsp;<code>2px<\/code>&nbsp;e quindi fa una riga di un pixel leggermente trasparente e una riga completamente inalterata: giocando con questi parametri si possono ottenere pattern molto interessanti!<\/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>La cosa che forse vi soprender\u00e0 positivamente \u00e8 che la&nbsp;<strong>maschera si applica perfino alla barra di scorrimento<\/strong>&nbsp;garantendo cos\u00ec un&#8217;esperienza pi\u00f9 coerente senza il minimo sforzo!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"allarme-rosso\">Allarme Rosso<\/h3>\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=\"\" class=\"wp-image-28110 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Non c&#8217;\u00e8 display sci-fi che si rispetti che non abbia una voce che lampeggia per attirare la nostra attenzione sull&#8217;imminente svolta di trama catastrofica.<\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Creiamo quindi un&#8217;animazione per gli elementi di avviso:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.alert<\/span> {\n    <span class=\"hljs-attribute\">animation<\/span>: blink-bg <span class=\"hljs-number\">1s<\/span> ease-out infinite;\n}\n\n<span class=\"hljs-keyword\">@keyframes<\/span> blink-bg {\n    0%, 60% {\n        <span class=\"hljs-attribute\">text-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10.5rem<\/span>;\n        <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n    }\n    70%, 100% {\n        <span class=\"hljs-attribute\">text-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20.5rem<\/span>;\n        <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--tertiary-color);\n    }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><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<h2 class=\"wp-block-heading\" id=\"h-usiamo-l-intelligenza-artificiale-generativa-per-create-un-contenuto-sci-fi\">Usiamo l&#8217;Intelligenza Artificiale Generativa per create un contenuto sci-fi<\/h2>\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=\"1024\" height=\"1024\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/ikea_alien.jpeg\" alt=\"\" class=\"wp-image-28138 size-full\" 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><div class=\"wp-block-media-text__content\">\n<p>Utilizzare modelli di intelligenza artificiale per generare contenuti fittizzi direttamente in HTML (come ho fatto nella versione finale) pu\u00f2 aiutarci a uscire dalla nostra comfort zone e a esplorare nuove idee di design e fornir\u00e0 un risultato decisamente migliore del classico&nbsp;<em>lorem ipsum<\/em>.<\/p>\n\n\n\n<p>I fantastici disegni tecnici sono stati generati con il divertente modello di&nbsp;<a href=\"https:\/\/huggingface.co\/ostris\/ikea-instructions-lora-sdxl\" class=\"ek-link\"><em>generatore di istruzioni di IKEA<\/em><\/a>&nbsp;(LORA SDXL) allenato da&nbsp;<a href=\"https:\/\/twitter.com\/ostrisai\" class=\"ek-link\">Ostris<\/a><\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Sperimentare con CSS per creare design retro-futuristici alla Fallout \u00e8 divertente e utile. Non dobbiamo sottovalutare il potenziale della creativit\u00e0, ma \u00e8 importante seguire sempre le best practices e le regole di accessibilit\u00e0. Indirettamente, queste linee guida faciliteranno anche il lavoro artistico.<\/p>\n\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"wp-block-uagb-image-gallery uagb-block-4fd7ee8f     \"\n\t\t\t\t\t\tstyle=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery spectra-image-gallery__layout--grid spectra-image-gallery__layout--grid-col-3 spectra-image-gallery__layout--grid-col-tab-3 spectra-image-gallery__layout--grid-col-mob-2\">\n\t\t\t\t\t\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28116' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-1024x576.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-1024x576.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot-300x169.png\" alt=\"Esempio finale con illustrazione tecnica\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tRisultato finale sezione &#8220;crew&#8221;\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28115' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_station_screenshot-1024x576.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_station_screenshot-1024x576.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_station_screenshot-300x169.png\" alt=\"Esempio con marker di allerta\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tRisultato finale sezione &#8220;station&#8221;\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class='spectra-image-gallery__media-wrapper' data-spectra-gallery-image-id='28114' tabindex=\"0\">\n\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media spectra-image-gallery__media--grid\">\n\t\t\t\t<picture>\n\t\t\t\t\t<source media=\"(min-width: 1024px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_data_screenshot-1024x576.png\">\n\t\t\t\t\t<source media=\"(min-width: 768px)\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_data_screenshot-1024x576.png\">\n\t\t\t\t\t<img decoding=\"async\" class=\"spectra-image-gallery__media-thumbnail spectra-image-gallery__media-thumbnail--grid\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_data_screenshot-300x169.png\" alt=\"Esempio finale con scrollbar\" loading=\"lazy\" \/>\n\t\t\t\t<\/picture>\n\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-blurrer\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption-wrapper spectra-image-gallery__media-thumbnail-caption-wrapper--overlay\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"spectra-image-gallery__media-thumbnail-caption spectra-image-gallery__media-thumbnail-caption--overlay\">\n\t\t\t\t\tRisultato finale sezione &#8220;data&#8221;\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class='spectra-image-gallery__control-lightbox' tabindex='0'>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper spectra-image-gallery__control-lightbox--main\" dir=\"\">\n\t\t\t\t\t<div class=\"swiper-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t\t\t\t\t<img class=\"swiper-lazy\" data-src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png\" alt=\"Esempio finale con illustrazione tecnica\"\/>\n\t\t\t\t\t\t\t\t<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t\t\t\t\t<img class=\"swiper-lazy\" data-src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_station_screenshot.png\" alt=\"Esempio con marker di allerta\"\/>\n\t\t\t\t\t\t\t\t<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<div class=\"swiper-slide\">\n\t\t\t\t\t\t\t\t<img class=\"swiper-lazy\" data-src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_data_screenshot.png\" alt=\"Esempio finale con scrollbar\"\/>\n\t\t\t\t\t\t\t\t<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"swiper-button-next\"><\/div>\n\t\t\t\t\t<div class=\"swiper-button-prev\"><\/div>\n\t\t\t\t<\/div>\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<button class='spectra-image-gallery__control-lightbox--close' aria-label=\"Close\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox= \"0 0 320 512\"><path d=\"M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z\"><\/path><\/svg>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Anche a voi capita di prestare pi\u00f9 attenzione ai terminali ed ai display futuristici nei film e nelle serie di fantascienza che alla loro trama? Personalmente ho un&#8217;autentica passione per questa antica arte di immaginare e disegnare le UX\/UI del futuro. E non credo di essere l&#8217;unico \ud83e\udd13 In questo tutorial, ci ispireremo alla UI&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-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":[10265],"tags":[11736,12234,12236],"collections":[12402],"class_list":{"0":"post-28105","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-css-it","9":"tag-fallout","10":"tag-pipboy","11":"collections-codemotion-guides-it","12":"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>Fallout: Come creare il tuo Pip-Boy 3000 con CSS<\/title>\n<meta name=\"description\" content=\"Crea un&#039;interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!\" \/>\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\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creiamo una UI alla Fallout usando modern CSS\" \/>\n<meta property=\"og:description\" content=\"Crea un&#039;interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-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-10T15:02:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T08:50:35+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\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Creiamo una UI alla Fallout usando modern CSS\",\"datePublished\":\"2024-06-10T15:02:54+00:00\",\"dateModified\":\"2024-08-06T08:50:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/\"},\"wordCount\":927,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/final_version_crew_screenshot.png\",\"keywords\":[\"CSS\",\"Fallout\",\"Pipboy\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/\",\"name\":\"Fallout: Come creare il tuo Pip-Boy 3000 con CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/final_version_crew_screenshot.png\",\"datePublished\":\"2024-06-10T15:02:54+00:00\",\"dateModified\":\"2024-08-06T08:50:35+00:00\",\"description\":\"Crea un'interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-modern-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-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\\\/it\\\/frontend-it\\\/creiamo-una-ui-alla-fallout-usando-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\\\/it\\\/frontend-it\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creiamo una UI alla Fallout usando 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":"Fallout: Come creare il tuo Pip-Boy 3000 con CSS","description":"Crea un'interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!","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\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/","og_locale":"en_US","og_type":"article","og_title":"Creiamo una UI alla Fallout usando modern CSS","og_description":"Crea un'interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-06-10T15:02:54+00:00","article_modified_time":"2024-08-06T08:50:35+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\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Creiamo una UI alla Fallout usando modern CSS","datePublished":"2024-06-10T15:02:54+00:00","dateModified":"2024-08-06T08:50:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/"},"wordCount":927,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","keywords":["CSS","Fallout","Pipboy"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/","name":"Fallout: Come creare il tuo Pip-Boy 3000 con CSS","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/06\/final_version_crew_screenshot.png","datePublished":"2024-06-10T15:02:54+00:00","dateModified":"2024-08-06T08:50:35+00:00","description":"Crea un'interfaccia utente ispirata al Pip-Boy 3000 di Fallout! Scopri usi inesplorati del modern CSS. Non perderti questa guida atomica!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-modern-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-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\/it\/frontend-it\/creiamo-una-ui-alla-fallout-usando-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\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Creiamo una UI alla Fallout usando 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":"Anche a voi capita di prestare pi\u00f9 attenzione ai terminali ed ai display futuristici nei film e nelle serie di fantascienza che alla loro trama? Personalmente ho un&#8217;autentica passione per questa antica arte di immaginare e disegnare le UX\/UI del futuro. E non credo di essere l&#8217;unico \ud83e\udd13 In questo tutorial, ci ispireremo alla UI&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28105","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=28105"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28105\/revisions"}],"predecessor-version":[{"id":28595,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/28105\/revisions\/28595"}],"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=28105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=28105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=28105"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=28105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}