Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (Cyborg)
  • No Skin
Collapse
Brand Logo

CIRCLE WITH A DOT

  1. Home
  2. Uncategorized
  3. CSS is DOOMed!

CSS is DOOMed!

Scheduled Pinned Locked Moved Uncategorized
34 Posts 22 Posters 0 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • html5test@front-end.socialH html5test@front-end.social

    CSS is DOOMed!

    I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

    Link Preview Image
    cssDOOM

    DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

    favicon

    (cssdoom.wtf)

    Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

    Link Preview Image
    dysfun@social.treehouse.systemsD This user is from outside of this forum
    dysfun@social.treehouse.systemsD This user is from outside of this forum
    dysfun@social.treehouse.systems
    wrote last edited by
    #6

    @html5test nice! i used css transforms to replicate the apple cover flow thing when they were brand new, but this is on another level ๐Ÿ˜‚

    html5test@front-end.socialH 1 Reply Last reply
    0
    • dysfun@social.treehouse.systemsD dysfun@social.treehouse.systems

      @html5test nice! i used css transforms to replicate the apple cover flow thing when they were brand new, but this is on another level ๐Ÿ˜‚

      html5test@front-end.socialH This user is from outside of this forum
      html5test@front-end.socialH This user is from outside of this forum
      html5test@front-end.social
      wrote last edited by
      #7

      @dysfun Same principle. Just a few more divs ๐Ÿ˜

      1 Reply Last reply
      0
      • html5test@front-end.socialH html5test@front-end.social

        CSS is DOOMed!

        I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

        Link Preview Image
        cssDOOM

        DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

        favicon

        (cssdoom.wtf)

        Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

        Link Preview Image
        aumetra@corteximplant.netA This user is from outside of this forum
        aumetra@corteximplant.netA This user is from outside of this forum
        aumetra@corteximplant.net
        wrote last edited by
        #8
        @html5test Vanadium wants me to end its suffering
        html5test@front-end.socialH 1 Reply Last reply
        0
        • aumetra@corteximplant.netA aumetra@corteximplant.net
          @html5test Vanadium wants me to end its suffering
          html5test@front-end.socialH This user is from outside of this forum
          html5test@front-end.socialH This user is from outside of this forum
          html5test@front-end.social
          wrote last edited by
          #9

          @aumetra ๐Ÿ˜ฑ

          1 Reply Last reply
          0
          • html5test@front-end.socialH html5test@front-end.social

            CSS is DOOMed!

            I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

            Link Preview Image
            cssDOOM

            DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

            favicon

            (cssdoom.wtf)

            Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

            Link Preview Image
            boydstephensmithjr@hachyderm.ioB This user is from outside of this forum
            boydstephensmithjr@hachyderm.ioB This user is from outside of this forum
            boydstephensmithjr@hachyderm.io
            wrote last edited by
            #10

            @html5test FF-ESR (on Debian) renders the gun+hand in the top-left instead of in the middle-bottom.

            Also I couldn't figure out how to shoot.

            Very cool. Congratulations.

            html5test@front-end.socialH 1 Reply Last reply
            0
            • html5test@front-end.socialH html5test@front-end.social

              CSS is DOOMed!

              I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

              Link Preview Image
              cssDOOM

              DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

              favicon

              (cssdoom.wtf)

              Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

              Link Preview Image
              anthk@neopaquita.esA This user is from outside of this forum
              anthk@neopaquita.esA This user is from outside of this forum
              anthk@neopaquita.es
              wrote last edited by
              #11

              @html5test CSS it's Turing complete? Another vector to run propietary softwaer? A good thing I use Mothra under 9front and #Dillo under GNU Guix.

              BTW you can provide full levels from FreeDoom (better if you build a daily compilation, as it has really good but recent changes) with Deutex and GNU make: https://freedoom.github.io

              Now you can provide the two full episodes.

              1 Reply Last reply
              0
              • html5test@front-end.socialH This user is from outside of this forum
                html5test@front-end.socialH This user is from outside of this forum
                html5test@front-end.social
                wrote last edited by
                #12

                @ZoidbergForPresident It should work when you go to Full screen mode (left square button in the top right), which uses Pointer Lock to capture the mouse if supported by the browser.

                1 Reply Last reply
                0
                • boydstephensmithjr@hachyderm.ioB boydstephensmithjr@hachyderm.io

                  @html5test FF-ESR (on Debian) renders the gun+hand in the top-left instead of in the middle-bottom.

                  Also I couldn't figure out how to shoot.

                  Very cool. Congratulations.

                  html5test@front-end.socialH This user is from outside of this forum
                  html5test@front-end.socialH This user is from outside of this forum
                  html5test@front-end.social
                  wrote last edited by
                  #13

                  @BoydStephenSmithJr The most likely reason is the ESR probably does not yet support Anchored Positioning, which is used for positioning the gun relative to the status bar.

                  1 Reply Last reply
                  0
                  • html5test@front-end.socialH html5test@front-end.social

                    CSS is DOOMed!

                    I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                    Link Preview Image
                    cssDOOM

                    DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                    favicon

                    (cssdoom.wtf)

                    Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                    Link Preview Image
                    k@layer8.spaceK This user is from outside of this forum
                    k@layer8.spaceK This user is from outside of this forum
                    k@layer8.space
                    wrote last edited by
                    #14

                    @html5test runs perfectly on Firefox!

                    1 Reply Last reply
                    1
                    0
                    • html5test@front-end.socialH html5test@front-end.social

                      CSS is DOOMed!

                      I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                      Link Preview Image
                      cssDOOM

                      DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                      favicon

                      (cssdoom.wtf)

                      Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                      Link Preview Image
                      devnull@mamot.frD This user is from outside of this forum
                      devnull@mamot.frD This user is from outside of this forum
                      devnull@mamot.fr
                      wrote last edited by
                      #15

                      @html5test The gun is appearing in the upper left corner

                      html5test@front-end.socialH 1 Reply Last reply
                      0
                      • devnull@mamot.frD devnull@mamot.fr

                        @html5test The gun is appearing in the upper left corner

                        html5test@front-end.socialH This user is from outside of this forum
                        html5test@front-end.socialH This user is from outside of this forum
                        html5test@front-end.social
                        wrote last edited by
                        #16

                        @devnull this is probably because the browser you are using does not support Anchored Positioning.

                        devnull@mamot.frD 1 Reply Last reply
                        0
                        • html5test@front-end.socialH html5test@front-end.social

                          @devnull this is probably because the browser you are using does not support Anchored Positioning.

                          devnull@mamot.frD This user is from outside of this forum
                          devnull@mamot.frD This user is from outside of this forum
                          devnull@mamot.fr
                          wrote last edited by
                          #17

                          @html5test Web "standards" they call it ๐Ÿคก

                          It is supported only since Firefox 147 according to this. Which doesn't include Firefox ESR yetโ€ฆ

                          Link Preview Image

                          favicon

                          (www.reddit.com)

                          html5test@front-end.socialH 1 Reply Last reply
                          0
                          • devnull@mamot.frD devnull@mamot.fr

                            @html5test Web "standards" they call it ๐Ÿคก

                            It is supported only since Firefox 147 according to this. Which doesn't include Firefox ESR yetโ€ฆ

                            Link Preview Image

                            favicon

                            (www.reddit.com)

                            html5test@front-end.socialH This user is from outside of this forum
                            html5test@front-end.socialH This user is from outside of this forum
                            html5test@front-end.social
                            wrote last edited by
                            #18

                            @devnull The whole idea of this project is to see what is possible with modern web standards and pushing the limits and not to create something that works everywhere ๐Ÿคทโ€โ™‚๏ธ

                            1 Reply Last reply
                            0
                            • html5test@front-end.socialH html5test@front-end.social

                              CSS is DOOMed!

                              I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                              Link Preview Image
                              cssDOOM

                              DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                              favicon

                              (cssdoom.wtf)

                              Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                              Link Preview Image
                              niavy@masto.bikeN This user is from outside of this forum
                              niavy@masto.bikeN This user is from outside of this forum
                              niavy@masto.bike
                              wrote last edited by
                              #19

                              @html5test
                              Wow ๐Ÿ˜ฒ ๐Ÿคฉ

                              1 Reply Last reply
                              0
                              • html5test@front-end.socialH html5test@front-end.social

                                CSS is DOOMed!

                                I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                Link Preview Image
                                cssDOOM

                                DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                favicon

                                (cssdoom.wtf)

                                Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                                Link Preview Image
                                mctwist@social.accum.seM This user is from outside of this forum
                                mctwist@social.accum.seM This user is from outside of this forum
                                mctwist@social.accum.se
                                wrote last edited by
                                #20

                                @html5test Surprisingly, it works in Firefox mobile. However, the "Doom" font color is inverted.

                                1 Reply Last reply
                                0
                                • html5test@front-end.socialH html5test@front-end.social

                                  CSS is DOOMed!

                                  I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                  Link Preview Image
                                  cssDOOM

                                  DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                  favicon

                                  (cssdoom.wtf)

                                  Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                                  Link Preview Image
                                  sgtpepere@ludosphere.frS This user is from outside of this forum
                                  sgtpepere@ludosphere.frS This user is from outside of this forum
                                  sgtpepere@ludosphere.fr
                                  wrote last edited by
                                  #21

                                  @html5test Wow, that's awesome. The only thing not working with my xbox controler was the shooting, no button allowed me to draw fire.

                                  html5test@front-end.socialH 1 Reply Last reply
                                  0
                                  • html5test@front-end.socialH html5test@front-end.social

                                    CSS is DOOMed!

                                    I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                    Link Preview Image
                                    cssDOOM

                                    DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                    favicon

                                    (cssdoom.wtf)

                                    Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                                    Link Preview Image
                                    sjb@mstdn.ioS This user is from outside of this forum
                                    sjb@mstdn.ioS This user is from outside of this forum
                                    sjb@mstdn.io
                                    wrote last edited by
                                    #22

                                    @html5test Works surprisingly smooth in Firefox.

                                    html5test@front-end.socialH 1 Reply Last reply
                                    0
                                    • sjb@mstdn.ioS sjb@mstdn.io

                                      @html5test Works surprisingly smooth in Firefox.

                                      html5test@front-end.socialH This user is from outside of this forum
                                      html5test@front-end.socialH This user is from outside of this forum
                                      html5test@front-end.social
                                      wrote last edited by
                                      #23

                                      @sjb I used Firefox as my main browser during the development of this, as it had the least rendering issues. Their CSS 3D support has been really solid.

                                      1 Reply Last reply
                                      0
                                      • sgtpepere@ludosphere.frS sgtpepere@ludosphere.fr

                                        @html5test Wow, that's awesome. The only thing not working with my xbox controler was the shooting, no button allowed me to draw fire.

                                        html5test@front-end.socialH This user is from outside of this forum
                                        html5test@front-end.socialH This user is from outside of this forum
                                        html5test@front-end.social
                                        wrote last edited by
                                        #24

                                        @sgtpepere on my PS controller it is mapped to one of the top buttons. But to be honest it was little more than hooking it up and testing if it worked. Not much thought went into creating a good control mapping.

                                        1 Reply Last reply
                                        0
                                        • html5test@front-end.socialH html5test@front-end.social

                                          CSS is DOOMed!

                                          I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                          Link Preview Image
                                          cssDOOM

                                          DOOM rendered entirely in CSS. Every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms.

                                          favicon

                                          (cssdoom.wtf)

                                          Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

                                          Link Preview Image
                                          badsamurai@infosec.exchangeB This user is from outside of this forum
                                          badsamurai@infosec.exchangeB This user is from outside of this forum
                                          badsamurai@infosec.exchange
                                          wrote last edited by
                                          #25

                                          @html5test rock-on @Vivaldi itโ€™s perfect on iOS mobile.

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • World
                                          • Users
                                          • Groups