Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • 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 (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. The Lounge
  3. L33t CSS skills

L33t CSS skills

Scheduled Pinned Locked Moved The Lounge
csscom
14 Posts 6 Posters 0 Views 1 Watching
  • 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.
  • K Offline
    K Offline
    Kent Sharkey
    wrote on last edited by
    #1

    Some people have way too much skill (and spare time): This Amazing Image Made of Code Looks Different Based on Your Browser - VICE[^] It's certainly also a testament to just what CSS can do, when you're not letting it beat you into submission. and here's the actual CSS: PureCSS Lace[^]

    TTFN - Kent

    Richard DeemingR OriginalGriffO Sander RosselS X 4 Replies Last reply
    0
    • K Kent Sharkey

      Some people have way too much skill (and spare time): This Amazing Image Made of Code Looks Different Based on Your Browser - VICE[^] It's certainly also a testament to just what CSS can do, when you're not letting it beat you into submission. and here's the actual CSS: PureCSS Lace[^]

      TTFN - Kent

      Richard DeemingR Offline
      Richard DeemingR Offline
      Richard Deeming
      wrote on last edited by
      #2

      Am I missing something? There's an article talking about a pure CSS image, and several screenshots of it in different browsers. But where's the link to the actual image? :doh: Edit: Found it after jumping through several hoops. They couldn't make it easy, could they? PureCSS Lace[^]


      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

      K Sander RosselS 2 Replies Last reply
      0
      • Richard DeemingR Richard Deeming

        Am I missing something? There's an article talking about a pure CSS image, and several screenshots of it in different browsers. But where's the link to the actual image? :doh: Edit: Found it after jumping through several hoops. They couldn't make it easy, could they? PureCSS Lace[^]


        "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

        K Offline
        K Offline
        Kent Sharkey
        wrote on last edited by
        #3

        Yeah, sorry about that - I'll add it to the original post.

        TTFN - Kent

        1 Reply Last reply
        0
        • K Kent Sharkey

          Some people have way too much skill (and spare time): This Amazing Image Made of Code Looks Different Based on Your Browser - VICE[^] It's certainly also a testament to just what CSS can do, when you're not letting it beat you into submission. and here's the actual CSS: PureCSS Lace[^]

          TTFN - Kent

          OriginalGriffO Offline
          OriginalGriffO Offline
          OriginalGriff
          wrote on last edited by
          #4

          It would have helped if they had linked to it so you could see the render in your browser rather than just pictures of what it apparently looks like in each, with no evidence that it changes. But ho hum ... it would be interesting to see what it looked like in a Chrome IE tab ... :laugh:

          "I have no idea what I did, but I'm taking full credit for it." - ThisOldTony AntiTwitter: @DalekDave is now a follower!

          "I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
          "Common sense is so rare these days, it should be classified as a super power" - Random T-shirt

          K 1 Reply Last reply
          0
          • Richard DeemingR Richard Deeming

            Am I missing something? There's an article talking about a pure CSS image, and several screenshots of it in different browsers. But where's the link to the actual image? :doh: Edit: Found it after jumping through several hoops. They couldn't make it easy, could they? PureCSS Lace[^]


            "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

            Sander RosselS Offline
            Sander RosselS Offline
            Sander Rossel
            wrote on last edited by
            #5

            Was looking for it too! Apparently, you have to follow the GitHub link: cyanharlow (Diana Smith) ยท GitHub[^] Which has various projects with links to the portraits, like this one: Francine[^]

            Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

            1 Reply Last reply
            0
            • K Kent Sharkey

              Some people have way too much skill (and spare time): This Amazing Image Made of Code Looks Different Based on Your Browser - VICE[^] It's certainly also a testament to just what CSS can do, when you're not letting it beat you into submission. and here's the actual CSS: PureCSS Lace[^]

              TTFN - Kent

              Sander RosselS Offline
              Sander RosselS Offline
              Sander Rossel
              wrote on last edited by
              #6

              It's a real PITA just centering an element in CSS, but this is something entirely different :omg: This is just next level masochism :wtf:

              Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

              R Richard DeemingR 2 Replies Last reply
              0
              • Sander RosselS Sander Rossel

                It's a real PITA just centering an element in CSS, but this is something entirely different :omg: This is just next level masochism :wtf:

                Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                R Offline
                R Offline
                RickZeeland
                wrote on last edited by
                #7

                Didn't you know CSS stands for: Crying Stinking Shame :-\

                Sander RosselS 1 Reply Last reply
                0
                • Sander RosselS Sander Rossel

                  It's a real PITA just centering an element in CSS, but this is something entirely different :omg: This is just next level masochism :wtf:

                  Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                  Richard DeemingR Offline
                  Richard DeemingR Offline
                  Richard Deeming
                  wrote on last edited by
                  #8

                  Sander Rossel wrote:

                  It's a real PITA just centering an element in CSS

                  Not since flexbox[^] and grid[^] are widely supported. Even vertical centering is fairly trivial now. :D


                  "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                  "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

                  Sander RosselS 1 Reply Last reply
                  0
                  • OriginalGriffO OriginalGriff

                    It would have helped if they had linked to it so you could see the render in your browser rather than just pictures of what it apparently looks like in each, with no evidence that it changes. But ho hum ... it would be interesting to see what it looked like in a Chrome IE tab ... :laugh:

                    "I have no idea what I did, but I'm taking full credit for it." - ThisOldTony AntiTwitter: @DalekDave is now a follower!

                    K Offline
                    K Offline
                    Kent Sharkey
                    wrote on last edited by
                    #9

                    Not a Chrome IE tab, but it doesn't look very good in IE 11[^]

                    TTFN - Kent

                    1 Reply Last reply
                    0
                    • K Kent Sharkey

                      Some people have way too much skill (and spare time): This Amazing Image Made of Code Looks Different Based on Your Browser - VICE[^] It's certainly also a testament to just what CSS can do, when you're not letting it beat you into submission. and here's the actual CSS: PureCSS Lace[^]

                      TTFN - Kent

                      X Offline
                      X Offline
                      XTAL256
                      wrote on last edited by
                      #10

                      As amazing as that is, it's basically just vector art. The same thing could be done using svg.

                      [Window Detective] - Windows UI spy utility

                      1 Reply Last reply
                      0
                      • Richard DeemingR Richard Deeming

                        Sander Rossel wrote:

                        It's a real PITA just centering an element in CSS

                        Not since flexbox[^] and grid[^] are widely supported. Even vertical centering is fairly trivial now. :D


                        "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                        Sander RosselS Offline
                        Sander RosselS Offline
                        Sander Rossel
                        wrote on last edited by
                        #11

                        For some reason I'm having a really hard time believing anything is easy in CSS... X| Although I could brush up on my CSS skills a bit.

                        Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                        Richard DeemingR 1 Reply Last reply
                        0
                        • R RickZeeland

                          Didn't you know CSS stands for: Crying Stinking Shame :-\

                          Sander RosselS Offline
                          Sander RosselS Offline
                          Sander Rossel
                          wrote on last edited by
                          #12

                          It means a lot of things: CSS (disambiguation) - Wikipedia[^] The best one to describe the CSS we're talking about is the Content Scramble System, not even a joke :laugh:

                          Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                          1 Reply Last reply
                          0
                          • Sander RosselS Sander Rossel

                            For some reason I'm having a really hard time believing anything is easy in CSS... X| Although I could brush up on my CSS skills a bit.

                            Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

                            Richard DeemingR Offline
                            Richard DeemingR Offline
                            Richard Deeming
                            wrote on last edited by
                            #13

                            .center-me {
                            min-height: 100vh;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            }

                            Edit fiddle - JSFiddle[^]


                            "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                            "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

                            Sander RosselS 1 Reply Last reply
                            0
                            • Richard DeemingR Richard Deeming

                              .center-me {
                              min-height: 100vh;
                              display: flex;
                              flex-direction: column;
                              align-items: center;
                              justify-content: center;
                              }

                              Edit fiddle - JSFiddle[^]


                              "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

                              Sander RosselS Offline
                              Sander RosselS Offline
                              Sander Rossel
                              wrote on last edited by
                              #14

                              I'm amazed, but I'm remaining skeptic. CSS has a lot of trust to rebuild before we can be friends again :^)

                              Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly

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


                              • Login

                              • Don't have an account? Register

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