12

My latest Dribbble post, in HTML/CSS

6 years ago from , Designer, Developer, Speaker

Hey everyone, earlier today someone on twitter messaged me a link to a HTML/CSS version of my latest Dribbble post and I was pretty impressed by it, especially since I had no clue who this person was! I knew I could do better in replicating the shot because I still had my layered .sketch version of it, so I took a crack at it and came out with some pretty sweet results! It's amazing what you can do with pure HTML/CSS :)

Original Dribbble post: https://dribbble.com/shots/1581110-Morning-Doodle?list=users&offset=0 Codepen: http://codepen.io/austin-valleskey/full/yHnCk

11 comments

  • Catalin CimpanuCatalin Cimpanu, 6 years ago

    Your post has just reminded me I have to update Chrome :))

    Wasn't seeing anything on CodePen

    2 points
  • Pedro Ivo HudsonPedro Ivo Hudson, 6 years ago

    Looks great! You should animate it. I did something similar a while back: http://podrivo.com/summer-sunset/

    1 point
    • Austin Valleskey, 6 years ago

      Thanks! That looks sweet! I'm definitely going to animate it today once I get some free time. I'm constantly reminded of how powerful HTML/CSS can truly be... amazing stuff!

      0 points
  • Claude AyiteyClaude Ayitey, 6 years ago

    Looks great. For a moment, I thought it was pure CSS. Great job, anyway.

    0 points
    • Shrihari SankaranShrihari Sankaran, 6 years ago

      Isn't it? I don't see any images being used.

      3 points
      • Ohad RonOhad Ron, 6 years ago

        I think it depends how you define pure. Real pure means I can just do <div class="mona-lisa"></div> and that's all the markup I will need.

        0 points
        • Austin Valleskey, 6 years ago

          It is I'm fact completely made with HTML/CSS. No images used whatsoever. You can check the codepen source to confirm that!

          0 points
          • Ohad RonOhad Ron, 6 years ago

            It is! and it is great looking and super cool, don't get me wrong :)

            But for development purposes it is usually nice not to have to create additional HTML elements which are there just for styling purposes.

            0 points
      • Claude AyiteyClaude Ayitey, 6 years ago

        I just checked the source on CodePen. This is absolutely gorgeous!!! SVG is awesome!

        0 points
    • Alex CasonAlex Cason, 6 years ago

      It is pure CSS. As mentioned in the source:

      "No images used, completely created in HTML/CSS"

      2 points