Pure CSS – Lace • Hacker News Board

Re: Pure CSS – Lace

#41

Post by ekianjo » Mon, Nov 04, 2019, 1:47 PM UTC

Semaphor wrote: post #8

leadingthenet wrote: post #4

Doesn't seem to render correctly on Safari.

> 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

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

Re: Pure CSS – Lace

#42

Post by jgsimmerman » Mon, Nov 04, 2019, 1:49 PM UTC

arondeparon wrote: post #16

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.

Yeah, I would definitely spend money on a book or video series that goes through this process.

The authors How page is interested but it leaves me with a bit of a "Draw the rest of the fucking owl" feeling.

Re: Pure CSS – Lace

#43

Post by Uehreka » Mon, Nov 04, 2019, 1:52 PM UTC

robin_reala wrote: post #33

osrec wrote: post #32

Earlier quoted context omitted.

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

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.

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.

Re: Pure CSS – Lace

#44

Post by Pigo » Mon, Nov 04, 2019, 2:00 PM UTC

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.

Re: Pure CSS – Lace

#45

Post by minusf » Mon, Nov 04, 2019, 2:08 PM UTC

ekianjo wrote: post #40

> 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.

let's just say it's a different lady in firefox :D

Re: Pure CSS – Lace

#46

Post by restlessmedia » Mon, Nov 04, 2019, 2:17 PM UTC

Narushia wrote: post #12

.iris { display: none; } :)

Even make her perform a very awkward wink.

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

Re: Pure CSS – Lace

#47

Post by SomethingNew71 » Mon, Nov 04, 2019, 2:19 PM UTC

Not responsive. Unusable. /s

Re: Pure CSS – Lace

#48

Post by Semaphor » Mon, Nov 04, 2019, 2:20 PM UTC

ekianjo wrote: post #41

Semaphor wrote: post #8

Earlier quoted context omitted.

> 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

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

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

Re: Pure CSS – Lace

#49

Post by tannhaeuser » Mon, Nov 04, 2019, 2:26 PM UTC

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.

Re: Pure CSS – Lace

#50

Post by justusthane » Mon, Nov 04, 2019, 2:39 PM UTC

restlessmedia wrote: post #46

Narushia wrote: post #12

.iris { display: none; } :)

Even make her perform a very awkward wink. setInterval(() => {var style = document.getElementsByClassName("iris")[0].style; style.display = style.display != 'none' ? 'none':'block'}, 2000)

Better wink:

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