Pure CSS – Lace


415 points | by robin_reala 207 days ago


  • thunderbong 207 days ago
  • danso 207 days ago

    Having been inured to loading 100KB-200KB of boilerplate CSS for a web project, I'm just amazed that the raw CSS for this is 43KB, un-minified:


    • robin_reala 207 days ago

      Developers don’t care about performance, and haven’t for multiple years now. Multi-megabyte JS packages for normal websites are visible across most of the web, and no-one tests on the actual problem devices which are low- to mid-range android phones on slow connections.

      • reaperducer 207 days ago

        no-one tests on the actual problem devices which are low- to mid-range android phones on slow connections.

        I do. But I work in healthcare for the rural and poor. Some of my target devices the kind of craptastic phones people on HN would buy as a joke burner, but for millions of people is their entire family's only connection to the internet.

        • microcolonel 207 days ago

          At the other end of the spectrum, I've worked on an ecommerce site where I was instructed to ignore that our JS payload was taking more than six seconds to parse on flagship phones (setting aside the network entirely).

          Worse still, after loading that code up, only then would it request the manifest that described 90% of the above-the-fold content.

          The decadence of web development today, particularly with agencies and large corporate customers, is truly boundless.

          • nkrisc 206 days ago

            Fascinatingly, at a previous ecommerce gig, we had a similar issue. On of the developers ran a test where on one of our main pages, he added performance improvements to get the fastest speed to a reasonable place, and then segmented traffic into buckets that deliberately slowed the server response by various, increasing amounts of time.

            And wouldn't you know, it made almost no difference on our primary conversion metrics. As far as we could tell his methodology was sound, but unfortunately it got buried when it was discovered the findings could be abused to show that performance doesn't matter.

        • chupa-chups 207 days ago

          As this is indisputable true, who disagrees or doesn't see the value of a statement like this?

          Are we so accustomed to having >100mbit bandwidth to not see the problems modern web design is bringing to people in poorer areas of the world?

          I suppose that some of the downvoters of that comment upvote comments stating minorities are being discriminated. Ironically the minority is not being discriminated in this case, since most of the people on the internet are on <100mbit bandwidth worldwide (https://en.wikipedia.org/wiki/Global_Internet_usage#Broadban...).

          • z3t4 207 days ago

            Its the buisness side that doesnt care. For my personal buisness i make sure everythig is fast, lightweight, and accessible, works on browsers that has below 0.1% usage, do not track users, nor store personal info. But I do not make any extra money doing it.

          • swader999 207 days ago

            A lot is cached but agree it's still a valid concern.

          • lucasmullens 207 days ago

            If you open up the raw CSS file and pop open DevTools, the raw CSS is only 9.9KB after gzip. A minifier could probably make that a bit smaller too.

          • haydenkshaw 207 days ago

            The author's absolutely earnt the right to call themselves a CSS expert on their personal site, I had no idea CSS could do something like this!

            • _hardwaregeek 207 days ago

              There's something oddly lovely about making art with such strict constraints. I've started making fun little pieces of my own with React and CSS. It's a great way to harness creativity through restrictions. Also requires some fun math on occasion. A good exercise is to make a Bauhaus or Swiss style poster, then animate it.

              • Semaphor 207 days ago

                For those who want some background, the github repo [0] has more info.

                Money quote: "All elements must be typed out by hand"

                [0]: https://github.com/cyanharlow/purecss-lace

                • Narushia 207 days ago

                    .iris {
                        display: none;
                  • gamman 207 days ago

                    If you do the same with `.eye`, instead of empty eye holes you see closed eyelids.

                    So apparently there's even more work than initially meets the eye.

                  • restlessmedia 207 days ago

                    Even make her perform a very awkward wink.

                    setInterval(() => {var style = document.getElementsByClassName("iris")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)

                    • justusthane 207 days ago

                      Better wink:

                      setInterval(() => {var style = document.getElementsByClassName("eye")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)

                      • frebord 207 days ago

                        This is just awesome, lmao!

                    • hanniabu 207 days ago


                      document.getElementsByClassName("nose")[0].style.display = 'none';

                      • parkersweb 207 days ago

                        .iris { background-color: red !important; }

                        • technotarek 207 days ago

                          My blink 7-8 years ago. Pretty crude, but was fun to learn CSS animation. For smaller mobile, use landscape mode:


                          • ratsimihah 207 days ago

                            You hacker!

                            • greenpizza13 207 days ago

                              What have I done? shiver


                            • hcarvalhoalves 207 days ago

                              Beautiful abuse of CSS. That fine line between mastery and subversion.

                              • lioeters 207 days ago

                                ..also between genius and madness. It's brilliant and deserves a place in art history.

                              • arondeparon 207 days ago

                                Wow, this is amazing.

                                I would love to watch something like this being live-coded. Heck, I assume people would probably even pay for watching it.

                              • newsbinator 207 days ago

                                Not a dig, just found it interesting how this looks in Safari:


                                • blowski 207 days ago

                                  She mentions on the GitHub repo that she only coded for Chrome.

                                  > Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

                                • oneeyedpigeon 207 days ago

                                  It looks better but still not quite right in safari on iPad. Is there a reference image somewhere?

                                  • jacquesl 207 days ago

                                    It looks normal on mobile safari.

                                  • ramigb 207 days ago

                                    Is there any video where the artist talks about the process? I'm really interested in understanding how the artist approached this. Anyways, beautiful work.

                                    • pfdzm 207 days ago

                                      Not exactly what you are asking for, but she does provide more information on the 5 key properties: https://diana-adrianne.com/how/

                                      • notahacker 207 days ago

                                        Each of the images without one of the key properties is oddly satisfying in a semi-abstract kind of way

                                      • necovek 207 days ago

                                        While there is some commit history, it's definitely not low level enough to understand the process fully.

                                        But I am imagining, from a quick "inspect element" looking at a few of the elements, that it is inspired by "brush movements": basically, you do a single brush movement with a single styled/transformed element (probably even more granular since a brush would give you trail-lines by default).

                                      • Pigo 207 days ago

                                        The eyes are extremely impressive. Playing with the properties it makes sense how she did it, but I can't imagine how long I'd have to play with transforms and gradients to recreate that from scratch.

                                        • pcj-github 207 days ago

                                          Knowing my own frustrations with CSS, I cannot imagine any project more maddening than this.

                                          • leadingthenet 207 days ago

                                            Doesn't seem to render correctly on Safari.

                                            • Semaphor 207 days ago

                                              > Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

                                              But it works without a problem in FF

                                              • ekianjo 207 days ago

                                                Did you compare it with the rendering on Chrome? Colors are quite different.

                                                • Semaphor 207 days ago

                                                  Good point. The eyes are wrong in FF, everything else looks almost the same though :)

                                              • saagarjha 207 days ago

                                                An unfortunate side effect of abusing CSS to the boundaries of what it can do :(

                                                • tonetheman 207 days ago

                                                  Safari is the new IE

                                                  • ogre_codes 207 days ago

                                                    People who spout this nonsense don't recall how bad IE was. Comparing the current state of any browser to IE (6-7-8) is utter nonsense.

                                                    There is a really good center of the road set of web browser features which all modern browsers support. This was not the case when IE was big, in order to make nice, functional web pages you needed to either give up supporting one platform or the other or you needed to spend tons of time and energy making 2 (or 3) pathways for extremely basic features.

                                                    If one browser is 1 year or two behind standards generally doesn't matter because as web developers we need to support 3-4+ year old browsers regardless. The truly crappy thing about IE was that Microsoft had zero commitment to web standards at all and many things they did outright contradicted them. Since IE had such massive market presence they undermined the standards process for more than a decade.

                                                    • mtarnovan 207 days ago

                                                      I think you're missing the point. We're not comparing Safari with IE6 -- that would be absurd, we're just saying Safari compares to it's peers (Chrome, Firefox, heck, even Edge) like IE6 used to compare to the other browsers back in the day: stuff would mostly work on everything else but always needed special attention/polyfills/workarounds for IE.

                                                      On the project I currently work on the codebase is _littered_ with workarounds and hacks to get stuff to work on Safari.

                                                      • ogre_codes 207 days ago

                                                        > we're just saying Safari compares to it's peers (Chrome, Firefox, heck, even Edge) like IE6 used to compare to the other browsers back in the day <

                                                        Again, this is nonsense.

                                                        There is a gap, but it's not bending the shape of the web or costing the average developer hundreds of hours to work around bullshit. Safari is behind on some features... no doubt at all. But to compare that to IE 6 is just wrong.

                                                        • pier25 207 days ago

                                                          > it's not bending the shape of the web

                                                          Safari for iOS (and Apple in general) is bending the shape of the web. For example the poor support for PWAs.

                                                          • leadingthenet 206 days ago

                                                            I think that's intentional on Apple's part, though.

                                                    • _ZeD_ 207 days ago

                                                      Safari is the new netscape. Chrome is the new ie

                                                      • robertoandred 207 days ago

                                                        Devs not caring about compatibility and instead focusing only on a particular browser that abuses its market position to impose its own standards on the industry? Chrome is the new IE.

                                                        • JDiculous 207 days ago

                                                          As a frontend developer, IE and Safari have always been awful and give the most trouble. They also pretty much always lag behind Chrome and Firefox when it comes to new standards.

                                                          Rather than targeting your frustration towards developers who don't want to or have the time to bend over backwards to accommodate terrible browsers, how about directing that energy towards encouraging those browsers to catch up and stop holding back the web?

                                                          • pwinnski 207 days ago

                                                            A "standard" seems like an odd word to describe a process in which one company does new things, and all other companies take some time to do the same.

                                                        • osrec 207 days ago

                                                          You do not deserve to be downvoted. As a developer, I wholeheartedly agree with you (anyone remember Safari's super buggy indexed DB implementation?!)

                                                          • robin_reala 207 days ago

                                                            The downvotes are happening because this would have been as possible to achieve in Safari as in Chrome had the author chosen to develop purely in that, and Chrome would have been one of the engines that look broken. At this level you’re relying on engine quirks rather than spec compatibility.

                                                            • Uehreka 207 days ago

                                                              Disagree. As someone who has tried to make web art that works cross-browser, I frequently follow standards and end up with something that works in Chrome, but breaks in Safari. I end up having to write hacks to detect Safari, cut out the parts of the standard they’ve implemented wrong, and find often crappy looking workarounds.

                                                              I’ve had issues with canvases just sort of “flashing” for no reason, and if you try to use SVG filters or other parts of the SVG standard that have been standardized for years... well Safari doesn’t choose to just ignore them. Instead it will sometimes just make the parts of the SVG affected by the filter turn black and then call it a day.

                                                              So I wouldn’t say that it’s as easy to create something that works fine in Safari and breaks in Chrome. Making something that works in Safari is just plain hard.

                                                              • kyle-rb 207 days ago

                                                                This; I've had issues with Safari when trying to create a smooth animation of multiple elements synced up to each other to create the illusion of them being one continuous looping element. Chrome, Firefox, and Edge had no problem keeping the elements synced together, but in Safari, the time-resolution of animation-delay was terrible, and it forced me to overlap the elements by quite a bit, making things a bit worse across all browsers.

                                                                Safari also basically destroyed my animation whenever the window size was changed, which also applies to switching from portrait to landscape on iOS.

                                                                • robin_reala 207 days ago

                                                                  OK, but there’s no use of SVG or canvas here, this is purely CSS.

                                                                  • ArchReaper 207 days ago

                                                                    Correct. Safari is a dumpster fire when it comes to modern CSS support. Hence 'Safari is the new IE'

                                                                • osrec 207 days ago

                                                                  Let's just say, Safari has more "quirks" than it should.

                                                                  • ArchReaper 207 days ago

                                                                    Actually the downvotes are coming from people who don't have experience developing websites to support Safari.

                                                                    >The downvotes are happening because this would have been as possible to achieve in Safari as in Chrome had the author chosen to develop purely in that, and Chrome would have been one of the engines that look broken.

                                                                    This is not true.

                                                                    >At this level you’re relying on engine quirks rather than spec compatibility.

                                                                    I think you're misunderstanding - the art was developed with standards. Safari is the piece that is failing the standards, not the art.

                                                            • aurbano 207 days ago

                                                              Amazing! Now I really wanna code something up that will generate this, it seems like it would be a super fun weekend project :)

                                                            • Touche 207 days ago

                                                              This is great! On my tablet the perf isn't great though (no fault to the author). I'm wondering what CSS properties cause perf to degrade on a use like this? Looking at the CSS myself I'm guessing it's the box-shadow usage. But I could be wrong. Any chance some of this could be put on the GPU?

                                                              • bilekas 207 days ago

                                                                I had the Dark Reader chrome extension on and it looked awful, then realised.. This is crazy impressive.

                                                                • nathell 207 days ago

                                                                  It's very worthwhile to check out her other pure HTML+CSS artwork.


                                                                  • ekianjo 207 days ago

                                                                    > I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

                                                                    Indeed it looks much worse on Firefox than on Chrome.

                                                                  • apexkid 207 days ago

                                                                    It will be great to read a blog or tutorial on how you made this.

                                                                    • ruffrey 207 days ago

                                                                      To get a sense for how this is done, one can use the Inspect Element tool in the browser, Pick an Element from the page, and either highlight it or delete.

                                                                      • alexwolfe 207 days ago

                                                                        One of the most amazing things I have seen in a long time. The patience alone (not to mention the insane skill level) is off the charts.

                                                                        • mftrhu 207 days ago

                                                                          I clicked on that link expecting just another CSS framework, but this is ridiculously impressive. Hats off to the author.

                                                                          • ideepakmathur 207 days ago

                                                                            This is an advance version of CSS. I would like to know you did it.

                                                                          • elwell 207 days ago

                                                                            What are the stab and spurt animations for?

                                                                            • cyanharlow 207 days ago

                                                                              Lol oh shit I forgot id originally been using this file to demo some shit to my team. I was demoing how to do an animated angry stabby emoji. Good catch. I hope I have that original version saved, gonna check

                                                                            • rebolek 207 days ago

                                                                              Image without JS? Oh the blasphemy! /s

                                                                              • dylan604 207 days ago

                                                                                Does this qualify as a new ACID test?

                                                                                • X6S1x6Okd1st 207 days ago

                                                                                  Is it designed for chrome, not to conform to standards.

                                                                                • houssem_fat 207 days ago

                                                                                  Wow, amazing work !!

                                                                                  • casedup 206 days ago

                                                                                    Wow impressive

                                                                                    • ape4 207 days ago

                                                                                      Doesn't scale when the browser window is resized.

                                                                                      • stewartjarod 207 days ago

                                                                                        wow! This is so impressive

                                                                                        • SomethingNew71 207 days ago

                                                                                          Not responsive. Unusable. /s

                                                                                          • tannhaeuser 207 days ago

                                                                                            I know, i know, it's awesome. But, unless it's specifically to make a point regarding the absurdity of today's web (such as eg demonstrating CSS Turing completeness), I can't help finding such hacks sad, because it just blends in to demonstrate how far we've striven from what once was a vision for a rational media architecture with a dedicated vector graphic format.

                                                                                            • toddmorey 207 days ago

                                                                                              I don’t think that’s fair, exactly. The point of this exercise is to show artistic expression by pushing a medium outside of its intended use. There’s also an artist that paints in MS Excel, for example.

                                                                                              SVG is an incredible and underrated format. You can create illustrations in svg with modern graphics tools, yet still hack and animate them with css and js. And CSS Houdini is a really exciting development, too.

                                                                                              Some things about the web platform are frustrating for sure, but this sort of project isn’t any kind of statement on the effort required to build modern web graphics and illustrations because you’d never approach it this way. It’s just a fun puzzle for the artist, and every tech and medium has examples of this sort of thing.

                                                                                            • egypturnash 207 days ago

                                                                                              I think it's just... art. And also a hobby. She likes doing this very fiddly, impractical way of working in her spare time. She could be putting together jigsaw puzzles, she could be gardening, she could be making intricate motorized sculptures out of cardboard, she could be doing all sorts of things. But instead she takes the CSS skills that she uses for her day job and sees how far she can push them.

                                                                                              Hell, at this point I wouldn't be surprised if she's even had people approach her asking for CSS portrait commissions. I'm sure the number she's quoted them is pretty large, if so.

                                                                                              I'm a pro artist who mostly use Illustrator and I am pretty sure I could reproduce any of her pieces in a fraction of the time it took her to type them out by hand. If I did, nobody would care, because I'd be using a tool actually made for art.

                                                                                              • tiborsaas 207 days ago

                                                                                                You are making a claim based on what's being an extreme application of a technology. We can push any technology to its limits but that doesn't mean that average usage should suffer from the edge case problems.

                                                                                                We still have a rational media architecture with vector graphics support.

                                                                                                • tannhaeuser 207 days ago

                                                                                                  Yeah I was hesitant to post because of the negative vibe to it, but still, if all we've achieved in the last decade or so is a replacement syntax for what was already possible 20 years ago on the web (Adobe SVG plugin) and with today's browser out of the box, we ought to search our soul what our goals are with the web platform. Because absurd CSS complexity with some 20 different layout models (or any bikeshedding on syntactial issues really) just serves to dilute any future effort for implementing parts of the web stack for no good reason other than browser lock-in.

                                                                                                  • tiborsaas 207 days ago

                                                                                                    Standards are superior to plugins I count that as a clear win. I don't thing there's a great goal other than being an application platform for the masses. New toys will come, old might go, but more likely stay with the spec (hi: <marquee>).

                                                                                                    CSS layout had indeed evolved quite a bit (for the better), however we have great control now with flexbox and grid. They are much more than syntactic enhancements.

                                                                                                    I wouldn't worry about browser lock-in, if you build stuff for browsers you are already "locked in" by definition.