A Single Div • Hacker News Board

Re: A Single Div

#111

Post by gpvos » Wed, Aug 27, 2014, 8:48 AM UTC

smt88 wrote: post #103

MalcolmDiggs wrote: post #15

Interesting to see CSS coming into it's own. Sure it's not the most practical thing at the moment, but I could certainly see some smaller-scale uses being useful today (like iconography and such). Makes me wonder if we'll begin to see icon/image libraries released with pure css versions.

Considering PNG has been around since 1996 and HTML pages can load arbitrary images and fonts, we don't need pure CSS icons. We have purpose-built formats for images. This CSS image project is just for fun. The whole "[something] in pure CSS" began when people realized how awful table-based layouts are. First it was layouts, then full-blown designs. This is almost like the most extreme version of that trend, almost t…

While that may be true for this site, I do think CSS could be very useful for icons, since the it's infinitely zoomable, and a PNG isn't.

Re: A Single Div

#112

Post by rimantas » Wed, Aug 27, 2014, 9:00 AM UTC

na85 wrote: post #18

I came in expecting this to be an example of a website without tons of nested elements- the problem that html5 was supposed to solve but didn't.

How was html5 supposed to solve it? All it did is to introduce more elements, so instead of generic DIV you can use ARTICLE, but it was not going to solve the problem of superfluous elements in any way. If you can reduce the number of your nodes in html5, you can do the same in html4.

Re: A Single Div

#113

Post by dspillett » Wed, Aug 27, 2014, 9:15 AM UTC

khc wrote: post #105

alexjeffrey wrote: post #91

Earlier quoted context omitted.

http://caniuse.com/#feat=flexbox Until most IE users upgrade to 11, it's not usable by those of us who can't exclude a large chunk of our users.

has caniuse.com replaced quirksmode now as the canonical source of this kind of information?

For simple lookups, pretty much in my experience, especially as it doesn't seem to have seen much by way of updates since IE9.

Though quirksmode does go into more detailed analysis in places which can be pretty useful, particularly for when you are stuck supporting legacy browsers, so caniuse isn't a complete drop-in replacement.

Re: A Single Div

#114

Post by dsego » Wed, Aug 27, 2014, 10:11 AM UTC

justhw wrote: post #59

For those who don't understand. Each image is not in fact an image, it's css styles applied to a single html element. Very impressive. http://i.imgur.com/V8HYrhK.png

Div is like a canvas here, and background gradients create the image. What's so impressive about it?

Re: A Single Div

#115

Post by anteht » Wed, Aug 27, 2014, 10:14 AM UTC

Kiro wrote: post #88

How do they create two eyes out of one :after in the mushroom?

By using multiple box-shadows.

  box-shadow: 8px 0 #312114, 38px 0 #312114;

Re: A Single Div

#116

Post by lloeki » Wed, Aug 27, 2014, 10:50 AM UTC

comrh wrote: post #71

errantspark wrote: post #54

Earlier quoted context omitted.

Ok fair point I shouldn't have been so glib as puet is pretty horrible from a web design standpoint. It's a website for the demoscene, where people do stuff like this https://www.youtube.com/watch?v=wqu_IpkOYBg in 177 kilobytes.

They do that complete render in 177kb...? I remember crack intros but that's insane. Is this in C?

I don't get the fascination with Farbrausch. While I respect and admire the feat which I'm unable to pull of myself, there are comparatively much better realisations both in terms of art and technique. See the following 64k demos:

- chaos theory - https://www.youtube.com/watch?v=ZfuierUvx1A

- turtles all the way down - sub dream https://www.youtube.com/watch?v=z48t2R2hEJM

- the timeless — https://www.youtube.com/watch?v=lwFVlNytq0Q

- turtles all the way down - brain control - https://www.youtube.com/watch?v=sBKmqkh9bb8

Re: A Single Div

#117

Post by ZoFreX » Wed, Aug 27, 2014, 11:01 AM UTC

disillusioned wrote: post #92

What shitty fucking whiners you lot are. This is a fun technical experiment. It's clearly not advocating for some sort of production environment usage of pure CSS/single-div imagery in lieu of SVGs. It's a mental challenge and a fun "I wonder if" experiment. Any of you busily shouting high from the mountaintops how this is useless and pointless and stupid and derf, don'tyouknowthisisn'tpractical should stop well shor…

Counterpoint to "not practical": We have a dashboard at work that displays, amongst other things, the CI build status. For reasons I won't go into, we cannot change the HTML. We can change the CSS though, using Stylish. The "build failed" / "build succeeded" icons were incredibly non-obvious and developers weren't paying much attention to them.

Now, through a series of seriously horrendous CSS hacks, they display as really nice flat design green checks and crosses. Given that this dashboard only ever displays in literally one browser, on one big screen, it was completely acceptable to use CSS hacks to achieve the look I wanted.

It was sites such as this one that helped me figure out how to twist a single HTML element into what I needed. Particular shout-out to http://nicolasgallagher.com/pure-css-gui-icons/demo/

Re: A Single Div

#118

Post by secutor » Wed, Aug 27, 2014, 11:32 AM UTC

What happens if you turn the web standards and css time back on this: https://twitter.com/secutor/status/504591841447399424 Amazingly pictures how hard it is to develop anything cross IE platform...

Re: A Single Div

#119

Post by odonnellryan » Wed, Aug 27, 2014, 11:33 AM UTC

_pmf_ wrote: post #87

anateus wrote: post #42

I haven't seen so much nay-saying on HN in a while. It's like because there's an artistic element this or it's pure-web tech the appreciation of a cool hack and interesting exploration of a technology is completely gone. This is a classic example of a "hack", pushing CSS slightly beyond what it was intended for and potentially what is practical. But it's beautiful and clever, and if you truly can't appreciate it, tha…

> But it's beautiful and clever, and if you truly can't appreciate it, that's sad. Interesting. Is it as sad as the fact that one still cannot vertically center a div in CSS without using elaborate hacks?

There's a good reason for that.

Traditionally, HTML layouts are not designed to specify any kind of vertical behavior. There is no "vertical" in HTML. How the interface works (your browser) and how it is used (up-down scrolling) naturally imposed a scaling on width, not on height.

Re: A Single Div

#120

Post by pattle » Wed, Aug 27, 2014, 11:42 AM UTC

This is pretty cool, the attention to detail is great. I did something similar a while ago - http://pattle.github.io/simpsons-in-css

Don't let the SVG naysayers get you down. Yes SVG would have been a better tool for the job but its not about that, its about pushing CSS to it's a limits and that what you've done. This is an awesome hack!