<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ben Evans</title>
    <description>The latest articles on DEV Community by Ben Evans (@ivorjetski).</description>
    <link>https://dev.to/ivorjetski</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180665%2F04d68cb0-824b-4b2f-995c-83af37a61fe7.png</url>
      <title>DEV Community: Ben Evans</title>
      <link>https://dev.to/ivorjetski</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ivorjetski"/>
    <language>en</language>
    <item>
      <title>CodePen TV secrets</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Sun, 29 Mar 2026 23:23:50 +0000</pubDate>
      <link>https://dev.to/ivorjetski/codepen-tv-secrets-fib</link>
      <guid>https://dev.to/ivorjetski/codepen-tv-secrets-fib</guid>
      <description>&lt;h2&gt;
  
  
  Those seven deadly things you always wanted to know about creating a CRT TV in CSS.
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;A behind the scenes candid deep dive.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(1) My first vanilla CSS Art project!&lt;/strong&gt; 😮&lt;br&gt;
Can you actually believe it? Yes. But anyway, I got so into SASS that it wasn't until... Well I explained it all in my &lt;a href="https://dev.to/ivorjetski/desassing-unsassing-nog"&gt;last post&lt;/a&gt; but yeah, I guess this is my first actual pure CSS art! I did really want to add white noise and channel clicks, but that would have involved JavaScript, so you shall have to imagine that yourselves. It's also my first use of &lt;code&gt;corner-shape: squircle&lt;/code&gt;. Firefox doesn't support me on this yet, but oh well! I think squircle is necessary usage for a CRT!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(2) Lighting the CodePen logo.&lt;/strong&gt; 🌅&lt;br&gt;
The spinny cube thing has actual three dimensional light coming from the left, which took blumming ages to do, and it's barely even noticeable. So I would just like to point that out here 😅 &lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/qEaRjBw?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;The lighting within the TV image is also the opposite, to the TV, as I thought this might help represent a TV broadcast. But I also think this isn't noticeable :) &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(3) The volume control distorts the scanlines.&lt;/strong&gt; 🔊&lt;br&gt;
I thought this would kind of represent the increase in volume interfering with the tuning, as it would if you didn't have ground loop isolation. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(4) Rotating knobs.&lt;/strong&gt; 🛞&lt;br&gt;
Getting the knobs look like they rotate when the shine stays top right. It was a tricky one. But the dashed border works hard here. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(5) The glass reflections could not be square!&lt;/strong&gt; 😎&lt;br&gt;
To replicate the distortion of a cathode ray tube's shape. The window reflection is made entirely of repeated right dashed borders. These look very different depending on the browser engine. Blink's dash size is almost perfect for the real window panes. But it's a strange way to draw windows.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt; &lt;span class="o"&gt;&amp;amp;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nd"&gt;:before&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nd"&gt;:after&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;31rem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100rem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="m"&gt;7rem&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;border-right&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;dashed&lt;/span&gt; &lt;span class="m"&gt;7rem&lt;/span&gt; &lt;span class="n"&gt;hsla&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="n"&gt;var&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;--wht-hsl&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;&lt;span class="m"&gt;.05&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
     &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
 &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;(6) It's responsive!&lt;/strong&gt; 📱&lt;br&gt;
The TV changes layout depending on your screen size. I used rems and aspect ratios hard!  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;(7) The CodePen 2.0 logo.&lt;/strong&gt; 🖋️&lt;br&gt;
The rotating 2.0 makes no sense in reality. It does &lt;code&gt;transform:scaleX(-1)&lt;/code&gt; exactly at 90 degrees so that 2.0 reads left to right on both the front and back.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Just one more thing...&lt;/strong&gt; 🕵️&lt;br&gt;
The YouTube's video intro is made entirely of CSS! I adapted two of my older projects to introduce it. As well as this one. And the music was written by me and Robert Frogley especially for the video. &lt;/p&gt;

&lt;p&gt;Keep this on the QT 🤫 but I also lost most of the screenshots for creating this video because my laptop died and the drive got wiped when trying to fix it. So annoyingly I had to undo everything I did and screenshot it, and then play it forwards! 😮  &lt;/p&gt;

</description>
      <category>codepen</category>
      <category>css</category>
      <category>cssart</category>
      <category>crt</category>
    </item>
    <item>
      <title>Desassing, unsassing.</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Thu, 13 Nov 2025 23:28:17 +0000</pubDate>
      <link>https://dev.to/ivorjetski/desassing-unsassing-nog</link>
      <guid>https://dev.to/ivorjetski/desassing-unsassing-nog</guid>
      <description>&lt;h1&gt;
  
  
  Unsassifying is very satisfying.
&lt;/h1&gt;

&lt;p&gt;Remember when you could create a website in a few minutes?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A web development folder 10 years ago:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;index.html&lt;/li&gt;
&lt;li&gt;&lt;p&gt;styles.css&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setup time = 3mins.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Server load including a few images: ~100–500 KB&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;A web development folder in 2025:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;index.html&lt;/li&gt;
&lt;li&gt;&lt;p&gt;plus 16,942 files bought in by NPM&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setup time = 1 day.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Server load including a few images: ~150–250 MB&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  So much bloat!
&lt;/h2&gt;

&lt;h1&gt;
  
  
  So much waste!
&lt;/h1&gt;

&lt;p&gt;I pretended to myself that none of this was happening outside of work. When I say Sass - I actually mean SCSS - did anyone actually use Sass? And in terms of desassing, I’m probably including LESS in the general theme of it all. Anyway, CSS was growing, websites were doing more, and Sass came along to make things easier. For personal projects I skipped NPM for speed and used Koala.exe to compile, and even though Koala.exe stopped being supported about 5 years ago, I carried on. That was until I reluctantly started to use &lt;a class="mentioned-user" href="https://dev.to/use"&gt;@use&lt;/a&gt;. So Sass became a pain. I would like very much to make code as short and as fast as possible, selfishly I would not like to reference everything with the partial it came from. I would not like to be told off about how I should code my stylesheets via Prettier. This was becoming unfun. I think it might be time to unsass!&lt;/p&gt;

&lt;h1&gt;
  
  
  Sass is now faff.
&lt;/h1&gt;

&lt;p&gt;It’s a revelation! It feels strange not to have to wait for anything to compile. How did I become so conditioned by Sass!? From where I was with Sass, it was pretty easy to make the leap back to native CSS. And probably obvious to most, but here is the lowdown:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Instead of Sass variables, use root variables or ‘Custom Properties’. (not the most catchy name)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Instead of my most favourite simple but probably bad: rgba(#000,.5); for transparencies, use (and I agree this is slightly more convoluted but you get used to it) hsla(var(--hslcolor),.5), so yeah, you do need to convert your faithful HEX to a HSL and store it as a ‘custom property’, but that’s fine, we can do that, it’s 2025, there are websites out there that convert. Maybe even AI could tell you 🫢&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If you do use proper full fat Visual Studio, like me, and not VS Code, then you do have to update to Visual Studio 2026, because Microsoft. I’m not sure why their full featured paid for product model is massively lagging behind their free lighter version, and I’m not here to judge, but yeah native CSS support in Visual Studio 2022 is abominably terrible, so don’t even try!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In native CSS, &lt;a class="mentioned-user" href="https://dev.to/import"&gt;@import&lt;/a&gt; feels slightly old fashioned. Not sure why, but it’s like &lt;a class="mentioned-user" href="https://dev.to/import"&gt;@import&lt;/a&gt; url('css.css'); so an index CSS file is cool. The cool weird part is: If you still live in Dickensian times and FTP things up, like me, then you were probably used to FTPing the whole style folder, because it needed the compiled CSS version. But with native CSS you can just upload the single file! Lol, am I writing this as the last person to catch up? Let me know in the comments.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So desassing is cool, it’s super fast, it’s easy, there is no compilation, all the colours are better and dynamic, and this makes creating a dark-mode option super easy. I’m now going to work my way through all my websites, desassing them, but this is my first:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi3qjotonpyx3rlbic4h0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi3qjotonpyx3rlbic4h0.jpg" alt="Image of musician Salimer's website" width="800" height="492"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://tinydesign.co.uk/salimer" rel="noopener noreferrer"&gt;SAlimer Dark sci-fi electro pop&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One thing I did note that native CSS needs is @mixins, and I think that’s in the pipeline, so yeah, so long Sass and thanks for all the pish!&lt;/p&gt;

</description>
      <category>sass</category>
      <category>nativecss</category>
      <category>css</category>
      <category>unsass</category>
    </item>
    <item>
      <title>😮 It's me and other cool people!</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Tue, 08 Jul 2025 08:38:51 +0000</pubDate>
      <link>https://dev.to/ivorjetski/its-me-and-other-cool-people-1ko1</link>
      <guid>https://dev.to/ivorjetski/its-me-and-other-cool-people-1ko1</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/alvaromontoro/10-cool-codepen-demos-june-2025-dme" class="crayons-story__hidden-navigation-link"&gt;10 Cool CodePen Demos (June 2025) + A talk with Ben Evans&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/alvaromontoro" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/alvaromontoro" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Alvaro Montoro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Alvaro Montoro
                &lt;a href="/++"&gt;&lt;img alt="Subscriber" class="subscription-icon" src="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png"&gt;&lt;/a&gt;
              
              &lt;div id="story-author-preview-content-2666964" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/alvaromontoro" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Alvaro Montoro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/alvaromontoro/10-cool-codepen-demos-june-2025-dme" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jul 8 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/alvaromontoro/10-cool-codepen-demos-june-2025-dme" id="article-link-2666964"&gt;
          10 Cool CodePen Demos (June 2025) + A talk with Ben Evans
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag crayons-tag--filled  " href="/t/showdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;showdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/html"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;html&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/css"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;css&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/alvaromontoro/10-cool-codepen-demos-june-2025-dme" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;11&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/alvaromontoro/10-cool-codepen-demos-june-2025-dme#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              3&lt;span class="hidden s:inline"&gt; comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            10 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>html</category>
      <category>css</category>
      <category>showdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>CSS Backrooms</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Sun, 29 Jun 2025 21:20:22 +0000</pubDate>
      <link>https://dev.to/ivorjetski/front-end-backrooms-css-1fkf</link>
      <guid>https://dev.to/ivorjetski/front-end-backrooms-css-1fkf</guid>
      <description>&lt;h2&gt;
  
  
  No Images - No JavaScript - Only HTML and too much CSS!
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/xiEZ54lGFt8"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;In January, I watched the very cool YouTube documentary about how The Backrooms came to exist: &lt;a href="https://www.youtube.com/watch?v=o3cTIn2Z_Ck" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=o3cTIn2Z_Ck&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3smowtfu7y7bgepd4s9w.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3smowtfu7y7bgepd4s9w.jpg" alt="Original 4Chan post"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The original 4Chan post that started the sensation 👆&lt;/p&gt;

&lt;p&gt;Because of this, I fell in love with The Backrooms' origin story and had the idea of building on my previous 3D maze, mapping out the rooms to fit the photograph, and, this time, with the determination to make it work on Safari!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/ivorjetski/pen/poQpveN" rel="noopener noreferrer"&gt;Original 3D maze&lt;/a&gt;&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/Z0VHM4KcMFQ"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;So I set to work.&lt;/p&gt;

&lt;p&gt;As a proof of concept, I expanded the maze from a 7x7 grid to a 12x12, made everything beige, adding a ceiling and some wallpaper to the walls. Then I lined up the camera angle with the original 4Chan post's image. All looked good; it was probably possible! But knowing full well that I'd made it even less likely to work on Safari, the next step was to try and solve that issue.&lt;/p&gt;

&lt;p&gt;From trying to fix the original, I knew that Safari didn't like the sheer size in pixels of the old maze. If I made the rooms tiny and if not too much went out of view, then it almost worked. So this time I scaled everything down. I made each 'room', or square of the grid, only 3x3rem; this helped, but it still crashed. Only when I narrowed down the path from a 12x12 grid to a 4x12 grid did things start to work.&lt;/p&gt;

&lt;p&gt;I then spent the next three months working on a formula (I'm not very good at maths) to work out the position of the camera on the grid and remove cells that were not in view.&lt;/p&gt;

&lt;p&gt;This is the formula to mark the position, not actually required for the final thing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    %test {
        background: rgba( magenta,.9);
    }

    @for $x from 1 through $grid {
        &amp;amp;:has(#x-#{$x}:checked) {
            @for $y from 1 through $grid {
                &amp;amp;:has(#z-#{$y}:checked) {
                    $yn1: ($y - 1);
                    $sum: ($yn1 * $grid + $x);

                    floor:nth-of-type(1) tile:nth-of-type(#{$sum}) {
                        @extend %test;
                    }
                }
            }
        }
    }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And it worked on Safari! 🥳&lt;/p&gt;

&lt;p&gt;I then tidied everything up, and in doing so, learned a few useful things. Because of the size of these grids, I needed to make everything more efficient. When it came to mapping out the levels, I got this down to a fine art. I created &lt;code&gt;@each&lt;/code&gt; loops, so I could easily just add a batch of coordinates from the map.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$east: ( 16: 4 2, 20: 8 2, 28: 4 3, 31: 7 3, 33: 9 3, 40: 4 4, 43: 7 4, 46: 10 4, 47: 11 4, 49: 1 5, 59: 11 5, 61: 1 6, 64: 4 6, 67: 7 6, 73: 1 7, 76: 4 7, 79: 7 7, 82: 10 7, 83: 11 7, 88: 4 8, 94: 10 8, 95: 11 8, 106: 10 9, 107: 11 9, 109: 1 10, 112: 4 10, 118: 10 10, 119: 11 10, 121: 1 11, 124: 4 11, 129: 9 11, 131: 11 11 );

@each $key, $values in $east {
    $first-value: nth($values, 1);
    $second-value: nth($values, 2);

    body:has(#level-1:checked):has(#x-#{$first-value}:checked):has(#z-#{$second-value}:checked):has(.x-rotation:checked) {
        .downb {
            @extend %d-none-i;
        }

        .downb[for="x-0"] {
            @extend %d-block-i;
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Getting the first and second values was super handy and simpler than I had imagined.&lt;/p&gt;

&lt;p&gt;I also had to pay attention to how the SASS compiled the output and discovered the beautiful benefit of &lt;code&gt;@extend&lt;/code&gt;. I probably should have already known this, but now I really understand.&lt;/p&gt;

&lt;p&gt;And if, like me, you don't already know:&lt;/p&gt;

&lt;p&gt;A loop would normally compile to each loop listing one after the other, for example, this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;z floor tile{
    $short-wood-right: 1, 2, 3;

    @each $i in $short-wood-right {
        &amp;amp;:nth-of-type(#{$i}) span:before {
            transform: translate3d(2.97rem, .5rem, 5.5rem);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Would output like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;z floor tile:nth-of-type(1) span:before {
    transform: translate3d(2.97rem, .5rem, 5.5rem);
}
z floor tile:nth-of-type(2) span:before {
    transform: translate3d(2.97rem, .5rem, 5.5rem);
}
z floor tile:nth-of-type(3) span:before {
    transform: translate3d(2.97rem, .5rem, 5.5rem);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Whereas by using &lt;code&gt;@extend&lt;/code&gt;, this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;%wood {transform: translate3d(2.97rem, .5rem, 5.5rem);}
z floor tile{
    $short-wood-right: 1, 2, 3;
    @each $i in $short-wood-right {
        &amp;amp;:nth-of-type(#{$i}) span:before {
            @extend %wood;
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Would output like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;z floor tile:nth-of-type(1) span:before, z floor tile:nth-of-type(2) span:before, z floor tile:nth-of-type(3) span:before {
    transform: translate3d(2.97rem, .5rem, 5.5rem);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Which is much lighter to load, especially with as many loops as I am using.&lt;/p&gt;

&lt;p&gt;So I tidied everything up, improved the wallpaper, added two floors, put some wall furnishings in, created some kind of storyline with a beginning and end, and added some scary elements. It didn't seem quite complete without any sound, so I threw together some atmospheric loops and, much as it goes against the whole CSS only thing, I had to use a tiny bit to play the sounds 😬 but I made this the absolute bare minimum:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;t = i =&amp;gt; document.querySelectorAll('audio').forEach(a =&amp;gt; { a.id == i ? (a.paused &amp;amp;&amp;amp; a.play()) : (a.pause(), a.currentTime = 0) })&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If anyone can get that to be any smaller, then please let me know.&lt;/p&gt;

&lt;p&gt;In the end, the CSS was so big that I couldn't fit the uncompiled SASS version into CodePen, so it's just the outputted CSS. And I think I added back in so much detail that it probably doesn't work on iPhones anymore. But, anyway, here it is; please let me know what you think I could do to improve the gameplay or the code, and the first person to share a screenshot of the end wins! Good luck in there 😱&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/NPqLLoz?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>css</category>
      <category>cssonly</category>
      <category>frontend</category>
      <category>codepen</category>
    </item>
    <item>
      <title>CSS Music Video - No Images - Pure Code.</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Fri, 27 Sep 2024 11:36:53 +0000</pubDate>
      <link>https://dev.to/ivorjetski/css-music-video-no-images-pure-code-42e1</link>
      <guid>https://dev.to/ivorjetski/css-music-video-no-images-pure-code-42e1</guid>
      <description>&lt;p&gt;&lt;strong&gt;Yep. Still third person.&lt;/strong&gt; 🤦‍♂️&lt;/p&gt;

&lt;p&gt;About this time last year, Ben Evans set to work on a full music video built using only CSS. This attempt was quite optimistic, to say the least. &lt;/p&gt;

&lt;p&gt;Ben wanted to see how far he could take CSS in this direction. The song was written by the fantastic &lt;a href="https://salimer.bandcamp.com/track/rule-the-world" rel="noopener noreferrer"&gt;SAlimer&lt;/a&gt; about the Earth's moon. Ben decided it would be fun if his 'video' started by travelling around the solar system, to eventually land on the earth's surface and take the story from there. So, first step, create a planet in CSS...&lt;/p&gt;

&lt;p&gt;Three-dimensional spheres have always been a goal of Ben's to create in CSS, as they are so very difficult to achieve. &lt;a href="https://codepen.io/thebabydino" rel="noopener noreferrer"&gt;Ana Tudor&lt;/a&gt; has managed to achieve this with her amazing mathematical brain. But Ivorjetski tries his hardest to avoid thinking too much and constructs things in a more structural way. &lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/thebabydino/embed/gOjGyby?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Ana has also done more planetary creations but they are heavy on the browser, so we kept this example lite :)&lt;/p&gt;

&lt;p&gt;But anyway... You can see Ben's first attempts on &lt;a href="https://codepen.io/ivorjetski" rel="noopener noreferrer"&gt;CodePen&lt;/a&gt; if you are interested and there is also a video which shows how he created his attempt. If nothing else it definitely works as the best intro to any of his videos:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/BYOcvxCyG5I"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;It became clear to Ben that his computer will never cope with this approach and the only way he could figure out how to do the animation timing would be painful with this length of track. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;And so to the present day!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Ivorjetski and his friend Froggy, wrote a short song, and with the lessons learnt, Ben thought this would be ideal to make a much shorter and simpler video in CSS to go alongside it. It features the same character that appeared in an earlier &lt;a href="https://codepen.io/ivorjetski/pen/mdzrLbW" rel="noopener noreferrer"&gt;Table Tennis&lt;/a&gt; CSS game of Ben's. Mainly due to Ben's laziness and his awesome ability to copy and paste.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/jOgEyPO?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Could it be the first responsive music video?&lt;/p&gt;

&lt;p&gt;It made Ben very sad but he had to use the teeny-tiniest amount of JavaScript required to initiate the sound 😭 Please don't judge him too harshly 🙃  &lt;/p&gt;

&lt;p&gt;Video and track by &lt;a href="https://www.youtube.com/@ivorjetski" rel="noopener noreferrer"&gt;Ben Evans&lt;/a&gt;. Lyrics and vocals by Rob Frogley.&lt;/p&gt;

&lt;p&gt;A like to the &lt;a href="https://youtu.be/V0nsD2bEqkg" rel="noopener noreferrer"&gt;video of the video&lt;/a&gt; would be very much appreciated. And I'm sure &lt;a href="https://salimer.bandcamp.com/track/rule-the-world" rel="noopener noreferrer"&gt;SAlimer&lt;/a&gt;, the inspiration for this, would appreciate one too. If you would be so kind. Because let's be honest, it's utterly brilliant! :) &lt;/p&gt;

&lt;p&gt;Happy MusiCSS-ing 👋&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>webdev</category>
      <category>css</category>
      <category>html</category>
    </item>
    <item>
      <title>Creating a CV in 2024</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Wed, 10 Jul 2024 20:05:56 +0000</pubDate>
      <link>https://dev.to/ivorjetski/creating-a-cv-in-2024-21be</link>
      <guid>https://dev.to/ivorjetski/creating-a-cv-in-2024-21be</guid>
      <description>&lt;h2&gt;
  
  
  A third person blog.
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Back by unpopular demand!
&lt;/h2&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Ben was thinking he should probably update his CV. He hadn't done this for... Ben, how long has it been? He doesn't know 🙄 but he says the format has not really changed since 2010 😬😮 &lt;/p&gt;

&lt;p&gt;So it's about time for a change!&lt;/p&gt;

&lt;p&gt;Ben had been putting off updating his CV (for 15 years), but when thinking about how to put it off even longer, he came up with two solutions:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Writing this blog about it and not actually do it.&lt;/li&gt;
&lt;li&gt;Make it a fun thing to do! &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;He wasn't going to ask his chatty mate; Gary Pon-Tovi (ChatGPT), this time! &lt;br&gt;
To make it fun and less of a chore, he thought he would start from scratch in the only way that Ben loves the most to start from scratch... A nice, empty, HTML document! 🤩&lt;/p&gt;

&lt;p&gt;This was quite interesting as he thought he would have to make it the most accessible, most perfectly semantic web page he had ever produced. To be easily found and also demonstrate his skill level to future employers. A daunting prospect! But Ben loves nothing more than a seemingly impossible challenge, so he set to work, full of vim and vigor*.&lt;/p&gt;

&lt;p&gt;*Wow! Vim &amp;amp; vigor broke my spellcheck! Ben's going off down a vim &amp;amp; vigor word-origin rabbit hole now. Gosh does anyone still use Vim? The most user-unfriendly text editor ever used! &lt;/p&gt;

&lt;p&gt;That aside... Ben's ultimate CV would of course be only HTML and CSS, and have a link through to his reasonably up-to-date (CSS only) portfolio:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/xxzpeoO?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
 &lt;/p&gt;

&lt;p&gt;(This is an older version. The real version is &lt;a href="https://tinydesign.co.uk/" rel="noopener noreferrer"&gt;here&lt;/a&gt; )&lt;/p&gt;

&lt;p&gt;So... Ben has built a basic semantic layout of the page and designed the left side of the header. Everything is pretty dull so far. It needs a link to Ben's portfolio in the header. He doesn't really want to add a profile picture. 🤔 So what about his logo? The CSS version of his painting signature? And when you hover over it... It could rotate!? As a hint to his portfolio!!? Great ideas!!! &lt;br&gt;
But a card is now boring to Ben, and a cube is so basic! 🤔 What about a three-sided shape? A three-sided shape that has proper lighting? Like the Moka pot he did?! Yes!! These are all great ideas! Ben thought. Much more fun than writing a CV!  &lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/yLGQYJo?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;After the moka pot, Ben made a room with a ceiling fan, which had realistic lighting. The lighting from the window is barely noticeable, but Ben thinks it makes it look so much more three-dimensional.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/vYbPgdE?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;The lighting effect is actually quite simple to do. Unlike background colours, CSS filters blend from one state to another. So it's just a case of timing when to add brightness or shade along with the rotation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  @keyframes light {
    50% {
      filter: brightness(0.5);
    }
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And after all this procrastination... Ben didn't do any of that! He instead put in a profile pic, like he didn't want to do 🙃 And then spent far too long styling the link underlines and YouTube hover effects.&lt;/p&gt;

&lt;p&gt;So anyway, here it is, let him know what you think:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.tinydesign.co.uk/cv/" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1gx23vy1e1nmbsk3otj.png" alt="Ben Evans CV 2024" width="800" height="773"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.tinydesign.co.uk/cv/" rel="noopener noreferrer"&gt;BEN EVANS - WEB DESIGNER - LONDON&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cssart</category>
      <category>cv</category>
      <category>frontend</category>
      <category>css</category>
    </item>
    <item>
      <title>animation-timeline: WIN!</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Thu, 13 Jun 2024 13:28:35 +0000</pubDate>
      <link>https://dev.to/ivorjetski/animation-timeline-win-2h6l</link>
      <guid>https://dev.to/ivorjetski/animation-timeline-win-2h6l</guid>
      <description>&lt;h2&gt;
  
  
  Scroll Buckets
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Third persona style!
&lt;/h3&gt;

&lt;p&gt;Ivorjetski (aka Ben Evans) was becoming increasingly aware that a lot of new CSS capabilities we being released and he had mainly been ignoring them 😬&lt;/p&gt;

&lt;p&gt;He'd seen a lot of cool new demos using the new scroll features and thought it was about bloody time he tried something himself.    &lt;/p&gt;

&lt;p&gt;Talking of cool new CSS scroll demos, you can't much better than this one, by Adam Kuhn 😍&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/cobra_winfrey/embed/oNOMRav?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Anyway... Ben ain't go no time for doing something quite that amazing! He was far too busy procrastinating over how to put off making a game of Snake with CSS. &lt;br&gt;
So instead, he came up with the idea of seeing if he could retro-fit a scroll based animation into an older CSS art piece: &lt;a href="https://codepen.io/ivorjetski/pen/ExaKmjw"&gt;Pure CSS Playing Card - King of Hearts&lt;/a&gt; - This used to animate on hover, but he was never happy with it, it was a bit jittery. So Ben thought he could fix it with a bit scroll based magic! Hogwarts style!📜🧙‍♂️&lt;/p&gt;

&lt;p&gt;And... Oh my god! Animation-timeline is so simple and so powerful!! It was an absolute breeze! Actually a little disappointing, in a way... How can Ben have fun trying to create impossible things with CSS, if CSS is now this powerful and easy! This should be banned from Hogwarts! Banned and thrown straight into the scroll bucket! 🗑️&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/VwOraXv?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;All the animations were already in place. Ben simply needed to remove the trigger by hover and replace the trigger with: &lt;code&gt;animation-timeline: scroll();&lt;/code&gt; And that was pretty much that! - Apart from giving the page a bit of extra height and fixing the card in place, so it didn't move on scroll. Ben thought: "Where is the fun in that!" But he has to admit, it is quite fun and it works so well. He thinks he will be using this feature a lot more in future... Perhaps to make a &lt;a href="https://play.date/"&gt;PlayDate&lt;/a&gt; style game, but using scroll, instead of the fun little crank.  &lt;/p&gt;

&lt;p&gt;Oh and by-the-way, everything is CSS, including the card face, there is a video of Ben creating it: &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/mUfsozWywwM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;There was also a little writeup on how it was made in &lt;a href="https://frontend.horse/articles/realistic-art-with-css/"&gt;frontend.horse&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Would be cool to know what you think? &lt;/p&gt;

&lt;p&gt;See ya x&lt;/p&gt;

</description>
      <category>css</category>
      <category>cssart</category>
      <category>animationtimeline</category>
      <category>codepen</category>
    </item>
    <item>
      <title>guYs I cANt deCide – a Or B?</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Tue, 11 Jun 2024 15:45:11 +0000</pubDate>
      <link>https://dev.to/ivorjetski/guys-i-cant-decide-a-or-b-12bp</link>
      <guid>https://dev.to/ivorjetski/guys-i-cant-decide-a-or-b-12bp</guid>
      <description>&lt;h3&gt;
  
  
  Still rocking the third person vibe 🤷‍
&lt;/h3&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Ben was doom scrolling, as he does most mornings, when he stumbled across this post from Tyler Nickerson:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsyktl03nuc11p0ns5ew1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsyktl03nuc11p0ns5ew1.png" alt="Twitter conversation between Tyler and Jhey" width="800" height="762"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhdn7nl1pjix9flu2k9a6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhdn7nl1pjix9flu2k9a6.png" alt="Twitter conversation continues" width="800" height="255"&gt;&lt;/a&gt;&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;Ben simply couldn't resist this challenge! He took a day off from doing nothing and set to work...&lt;/p&gt;

&lt;p&gt;Four hours later... Here is the result:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/wvbqqRd?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;So, how was this done?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    box-shadow: 1em 0 0 $g, //
    45em .6em 0 $g, //
    46em .6em 0 $g, //
    47em .7em 0 $g, //
    48em .8em 0 $g, //
    49em .9em 0 $g, //
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Ben set the image from Twitter as a background, and traced it by coding one box-shadow at a time. A few years ago he found a technique of putting // comment marks after every comma to make it easier to code. It was pretty essential at the time for attempting to draw the thousands of lines for this:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/xxKBWBN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;But this time he basically added a tiny round shadow every 1rem, tracing along the lines of 'text'. His best idea of the morning was to ask his chatty mate, Gary Pon-Tovi (ChatGPT) to "Add an extra step between each value, please." Ben always likes to be polite to Gary... But he forgot this morning, probably because it was before his coffee...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x9fgdwoye2z3epgbfsh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2x9fgdwoye2z3epgbfsh.png" alt="A screenshot of ChatGPT" width="800" height="503"&gt;&lt;/a&gt;&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;Ben had also previously traced the words of Magritte, in a similar method, to recreate his work 'The Treachery of Images' in only CSS. Ben thought this famous work was quite apt because CSS art is all about not being an image. Ben also added a touch of 3D magic to the recreation of the pipe, when the user hovers.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/gOGPWXN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;Ben finds it funny to use the word 'user'. Isn't this the term for a drug addict? He might write a separate blog about this.&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;P.s. This 3rd person thing is driving him nuts!&lt;/p&gt;

</description>
      <category>css</category>
      <category>cssart</category>
      <category>boxshadows</category>
      <category>frontend</category>
    </item>
    <item>
      <title>CSS animation and interaction delay.</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Tue, 11 Jun 2024 13:55:30 +0000</pubDate>
      <link>https://dev.to/ivorjetski/css-animation-and-interaction-delay-577</link>
      <guid>https://dev.to/ivorjetski/css-animation-and-interaction-delay-577</guid>
      <description>&lt;h1&gt;
  
  
  Tap tap tapping.
&lt;/h1&gt;

&lt;h3&gt;
  
  
  A blog written in 3rd person. For no reason.
&lt;/h3&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;For this game Ben Evans wanted some very simple controls. Basically a single tap anywhere to control it. And you can't get much simpler than that! &lt;/p&gt;

&lt;p&gt;From a coding perspective, this will involve putting a stack of labels as invisible layers on top of everything. The label will be linked to a checkbox or radio button, which will control what is displayed.&lt;/p&gt;

&lt;p&gt;So: Display a label &amp;gt; user taps label &amp;gt; label's 'for' attribute is connected with ID of input &amp;gt; if input is checked then animate the snake the appropriate way.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;label for="right-start"&amp;gt;&amp;lt;/label&amp;gt;
&amp;lt;input id="right-start" name="start" type="radio" /&amp;gt;

#right-start:checked ~ .start-right {
  display: block;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt; &lt;/p&gt;

&lt;p&gt;So that's all good. The next problem Ben needed to solve is how to bring these labels in fast. He wanted them to animate in sequence; up, right, down, left. On a timer. So that when the user taps the screen, it could go in the direction currently displaying, as it cycles through the loop.&lt;/p&gt;

&lt;p&gt;The trouble is, it seems, is that there is a delay in when something is shown and when it is clickable.&lt;/p&gt;

&lt;p&gt;Ben had previously built a table tennis game, using a similar timing device and this seemed to work fine. But he didn't notice the lag. Possible because it wasn't super fast.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/mdzrLbW?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;But this time Ben requires it to happen faster, and the lag seems very noticeable. Sad Face ☹&lt;/p&gt;

&lt;p&gt;He has built a simple example of it on CodePen for you to see for yourself. If you tap 'Edit on CodePen' then you can adjust the timings:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/pombeJj?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;It actually seems very usable on a two second repeat. If you change $t to one then it only responds on double taps. But this is based on Ben's laptop. It probably depends on the GPU and CPU speed. And probably also on how complex the future CSS will be.&lt;/p&gt;

&lt;p&gt;Ben would be interested to find out how it behaves for you. Please leave a comment on whether the appropriate radio is checked when you tap the screen. He would be very much appreciative 🙏  &lt;/p&gt;

</description>
      <category>css</category>
      <category>cssart</category>
      <category>frontend</category>
    </item>
    <item>
      <title>CSS Snake.</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Mon, 10 Jun 2024 22:03:12 +0000</pubDate>
      <link>https://dev.to/ivorjetski/css-snake-8ob</link>
      <guid>https://dev.to/ivorjetski/css-snake-8ob</guid>
      <description>&lt;h2&gt;
  
  
  A blog written in 3rd person. Well, why not...
&lt;/h2&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;London based CSS Artist, Ben Evans, has had some lofty ideas in the past and this one follows that trend... His current aim is to make, or even remake, some form of the Nokia classic: Snake. Using only CSS. He's not currently sure if this is possible but he would love you to join him on his journey to finding out...&lt;br&gt;
 &lt;/p&gt;

&lt;p&gt;Ben has previously built CSS concepts with movement grids, the peak of this in-devour being a 3D maze game (which unfortunately doesn't like Safari, or any iOS browser, because they are all Safari really):&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/poQpveN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Like most of Ben's CodePen's, there is also a video detailing the creation process on his YouTube Channel. This one can be found here:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Z0VHM4KcMFQ"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Ben, also known as ivorjetski, has already set to work on Snake. So far he's spent far too long drawing the background entirely with CSS:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3qgmk0i6imb1mkrzqz2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn3qgmk0i6imb1mkrzqz2.png" alt="Windows 10 default lockscreen image recreated in CSS"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;He thought it would be fun to recreate the old Windows 10 default lockscreen in CSS. He was probably wrong about this.&lt;/p&gt;

&lt;p&gt;He tried to keep the background down to a fewer lines of CSS as possible. It's about 1000. Which isn't bad considering the crazy amount of texture that he needed to do for the rocks.&lt;/p&gt;

&lt;p&gt;Ben realised he could create the texture using text! 😮 Surely this is where the word TEXTure comes from, he thought to himself, not silly enough to write it in a blog. Little did he know his thoughts could be heard by the alter-ego journalist. &lt;/p&gt;

&lt;p&gt;Ben exclaimed: "It's pseudo classes, with the content declaration filled with random ascii shapes. Like this:"&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

   &amp;amp;:after, &amp;amp;:before {
            content: '●◖●  ●◖●  .● ●  ◖●◖●  ●  ◖-●  ●◖◖● ●◖ ●.●  ●◖●◖● ●●  ●.●◖●●';
            }


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;He has also designed a super simple movement grid for it. And then, for some reason, converted it into this pointless chess like thing. Perhaps so it would make sense when sharing it on CodePen:&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/LYawGQZ?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;This does everything Ben requires for a good basis to build from, and he has managed to get the code down to about 100 lines (not including his CSS drawn initials). He is pretty pleased with how this works. The directional buttons are actually all the same, but rotate themselves, putting themselves in the required position for left, right, up and down. Depending on what ID is shown in relation to what grid square the user is in. There is also a basic boundary detection in place, that Ben would need for the Snake game to work.&lt;/p&gt;

&lt;p&gt; &lt;/p&gt;

&lt;p&gt;Stay tuned for more...&lt;/p&gt;

</description>
      <category>cssart</category>
      <category>cssgame</category>
      <category>css</category>
    </item>
    <item>
      <title>A Pure CSS 3D Maze! - Chrome only</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Thu, 13 Jul 2023 12:55:17 +0000</pubDate>
      <link>https://dev.to/ivorjetski/a-pure-css-3d-maze-chrome-only-5c80</link>
      <guid>https://dev.to/ivorjetski/a-pure-css-3d-maze-chrome-only-5c80</guid>
      <description>&lt;p&gt;🌎 100% Natural ingredients!&lt;br&gt;
🚳 No images &lt;br&gt;
📵 No JavaScript &lt;br&gt;
👨‍💻 Just CSS - And a sprinkling of HTML&lt;/p&gt;

&lt;p&gt;Like most CSS projects of mine, I had no idea whether this was possible before I started, and learnt some things along the way. I tried to keep the graphics a simple as possible to help with the animations and to fit with the retro vibe of the original 3D mazes from the 1990's. If you watch the YouTube about making it you can see the style to begin with was very different. I was thinking more like the style of Legend of Grimrock.&lt;br&gt;
I'm happy with the familiar controls, the elevators (to make it more interesting), and the subtle depth shading... I'm not sure I've seen this done in 3D CSS Art before. &lt;/p&gt;

&lt;p&gt;Anyway I hope you like it :) &lt;/p&gt;

&lt;p&gt;💥 CHROME ONLY!! &lt;/p&gt;

&lt;p&gt;Firefox is okay but very slow.&lt;/p&gt;

&lt;p&gt;Sorry Safari people 🥺&lt;br&gt;
💀 I've tried but it's just not going to happen :(&lt;/p&gt;

&lt;p&gt;The making of: &lt;br&gt;
📺 &lt;a href="https://youtu.be/Z0VHM4KcMFQ"&gt;youtu.be/Z0VHM4KcMFQ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First person to send me a screen shot of the end screen wins...&lt;br&gt;
Your time starts now!!! 🏁&lt;/p&gt;

&lt;p&gt;P.S. If you have any ideas how to help with Safari then please let me know x&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://linktr.ee/ivorjetski"&gt;linktr.ee/ivorjetski&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ivorjetski/embed/poQpveN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>css</category>
      <category>html</category>
      <category>frontend</category>
    </item>
    <item>
      <title>CTRL ALT ELITE --- A homage to 1984 Elite (Pure CSS Game)</title>
      <dc:creator>Ben Evans</dc:creator>
      <pubDate>Mon, 12 Aug 2019 16:04:10 +0000</pubDate>
      <link>https://dev.to/ivorjetski/ctrl-alt-elite-a-homage-to-1984-elite-pure-css-game-ifm</link>
      <guid>https://dev.to/ivorjetski/ctrl-alt-elite-a-homage-to-1984-elite-pure-css-game-ifm</guid>
      <description>&lt;p&gt;Hello. &lt;/p&gt;

&lt;p&gt;For no reason other than a CSS addiction, I am creating a Pure CSS version of a 1984 BBC Micro computer game Elite which inspired a number of subsequent games, like GTA, No Man's Sky, etc.&lt;/p&gt;

&lt;p&gt;The original game squeezed into the 32k memory of a BBC. My Compiled CSS is about 12k so far so I don't have much left to recreate the entire universe like the original (not that I am going to).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/ivorjetski/pen/MNPqex"&gt;https://codepen.io/ivorjetski/pen/MNPqex&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I have used the checkbox accesskey attribute to make some of the original keys work but you need to hold down Alt, hence the name.&lt;/p&gt;

&lt;p&gt;If anyone has any ideas of how I can make it better, please let me know...&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Should I stick to authentically recreating the original graphics where possible or bring it a bit more up-to-date in a stylish retro way? &lt;/li&gt;
&lt;li&gt;I'm probably going to put the keyboard controls instructions in the page rather than in the javascript box comments.&lt;/li&gt;
&lt;li&gt;Is the actual 3D laser a step too far? As in it uses to much GPU.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Oh yeah and it only works on Chrome at the moment.&lt;/p&gt;

&lt;p&gt;Please let me know what you think.&lt;/p&gt;

&lt;p&gt;Many thanks,&lt;/p&gt;

&lt;p&gt;Ben.&lt;/p&gt;

</description>
      <category>css</category>
      <category>nojavascript</category>
      <category>cssgame</category>
      <category>purecss</category>
    </item>
  </channel>
</rss>
