A Single Div | Hacker News Reader

A Single Div

a.singlediv.com

433 pointstechedlaksh69 comments

This reminds me of something that was posted once, that I haven't been able to find again: A demo where a page returned content, but if you viewed the source it was 0 bytes.

If I remember right, it took advantage of a feature that let you reference CSS through the HTTP headers (so it wasn't in the HTML), then the CSS added things to implicit required elements the browser would add to the page.

maybe you're referring to the demo from pwnfunction?

"This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo

Well thats a fun experiment. If you ever find the link, do share it, would love to tinker around and see what's exactly going on in there.

https://news.ycombinator.com/item?id=34464951

Aha, I don't think it was that post (feels too recent and I don't remember the main post), but the much simpler demo I remember is linked in the comments there: https://css-tricks.com/using-css-without-html/

an interesting read for sure.

Lots of discussion on this in 2016[1](535 points, 108 comments) and 2014[0](649 points, 141 comments), but also a similar project 16 days ago: Only <SPAN>s[2](135 points, 70 comments)

[0]: https://news.ycombinator.com/item?id=8229072 [1]: https://news.ycombinator.com/item?id=12091173 [2]: https://news.ycombinator.com/item?id=40049258

I found the "a single div" site to be interesting and great inspiration from time to time, so I shared it here. I feel like, it usually benefits the community if we see and discuss old projects from modern web development eyes.

Yes. HN is one place where I love a repost.

I agree some things should not become spam but once in a while a fresh conversation is what we all need for the things that we like !

This is my first time seeing it, thanks for re-posting it. Useful to be aware of and learn from.

I am always in awe of anyone doing CSS Art. Thank you for sharing this.

I know the current 3D graphic scene is frothing over three.js for everything but there is a place for CSS Art to be used and most people forget it or don't likely dive into it as CSS Art is really hard. I wish it was easier. three.js is great for creating big scenes but I see people creating small single character scenes for their website which can be created with CSS too!

I have spent a long time trying to recreate some of the amazing codepens I have seen and it takes my whole weekend and its not even perfect then. :(

I still think even though internet is ready for it, I don't think majority of the devices connected to the internet are capable to support WebGL properly. Yes, it differs with audience but silos are bad, create websites accessbile for everyone not just your silo perhaps.

I agree that there is novelty in doing CSS Art but due to the fact that it requires a lot of deep dive into nitty gritty-ness of css, devs usually don't prefer it whereas three.js is being pushed from niche 3D artist coder community to mainstream and that might just be a good thing.

Saying all that, three.js is not a perfect solution to everything and should be considered with it's pros and cons without creating unnecessary bloated websites.

You can try out my CSS-only bonfire! (:

https://megaemce.github.io/Bonfire

This seems like an interesting exercise for css. I saw on the repo that you are using Perlin Noise, but I could not find the algo. Mind sharing where you used it and how ?

You can just check noises' svg for the source code:

https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg...

  <feTurbulence type="turbulance

basically creates Perlin noise.

I once built a tool to generate buttons with particle effects using this CSS technique [0].

Always thought it'd be a fun project to build a small "image" editor with basic shapes that automatically outputs them as CSS code. Is anyone aware of any such tools?

[0] https://bewelge.github.io/CSS-Button-Particles/ (I just checked and the UI looks horrible on mobile. The buttons effects should still work fine though).

This was fun to play with and you even had some Physics equations in there.

What does single div mean here? I looked at the source and gave up counting the number of divs, so it is not literally "this page only has one div", but ... ?

Each "picture" in the list is rendered via css rules defined for a single div.

Lots of box shadow shenanigans, usually

Looking at the CSS for a few of the pictures, it seems like it's more CSS backgrounds specified using lots of gradients. I wonder if it would be faster to implement an SVG-to-CSS-gradient compiler or implement the pictures directly using CSS gradients.

While what you suggest is true, the incentive for the developer here is to try out all kinds of CSS properties in tandem and rely as much on CSS as possible.

To put this all in perspective, imagine developers doing this between 2012 and 2015, where many websites were still designed by using photoshop built & sliced images as backgrounds and applied on divs to achieve glorious designs. (while still needing to load all the pictures needed to achieve such designs. Then come new fascinating CSS properties that can do away with needing static images to make those same designs. Back then, such creations brought aww to fellow developers as it was out of the ordinary.

Most often the main concern wasn't performance and efficiency.

It's also a good torture test for the browsers "inspect element" debugging tool.

i.e. the debugger tools are useless in figuring out what the different background and box-shadow rules do.

Adequately put. I am gonna use your explanation from now on whenever somebody wants to know why this exists.

Each little doodle is a single div. Or rather each one has a container div that they don't count. Then the main div that they do count. Then content inserted with ::before and ::after that they don't count.

It's interesting as a creative exercise. However I've alway found that abusing ::before and ::after is a bad practice. The desire for "clean" html is silly, clear html is easier to maintain.

I clicked on the link at the top for the designer "Lynn Fisher", it took me to https://lynnandtonic.com/ and I discovered something by chance. I had my Chrome window open with the dev tools and was resizing it, and noticed the logo of a person walking up/down a street depending on which way you resize it. Very cool.

Lovely detail! Thank you for pointing this out!

Oh never noticed this one, I probably would try to mimic this in a simpler environment over the weekend, maybe a ball rolling over the street or spaceship flying over earth !

With references in the background to Daria!

It seems to only work in chrome, and resizing horizontally

Does anyone remember the Simpsons in CSS thing, that was cool

https://pattle.github.io/simpsons-in-css/

Yes, these were fun too. You know somebody should take these and add mouse position as the event trigger for eye movement, that would probably turn it into a nice creepy version of the Simpsons.

I’m on mobile, am I to understand each graphic is built from a single div? Incredible!

Good eye for graphic design too

Yep, they're all just one div. Well, technically a div plus ::before and ::after pseudo-elements but still, it's all CSS

Well, I'm glad this was posted. I vaguely remember it, but I haven't looked at it in a while. It's incredibly impressive.

I have been wanting to give this site another look too but could not remember the name until i dig deeper into my "dump link" folders.

This is cool! I really wish the authour formatted their HTML more nicely though - it's fine through the inspector but this is the sort of thing where I instinctively reached for "View Source" and with the whitespace stripped it's basically unreadable.

The HTML is just a div per "artwork" the css is the only interesting part. Much better to just: Right click, inspect element. To see the magic behind each piece.

It has imports + many divs. Would still be easier to read not all on a single line.

I absolutely loved this site. Thank you for sharing.

Sometimes I just wish, I could sit down and just recreate these little pieces one by one

This reminds me of

https://news.ycombinator.com/item?id=8070879 - Rendering Worlds with Two Triangles on the GPU (2014)

I usually follow Inigo's work but somehow i missed this one. Thanks for sharing this.

Can someone ELI5 what this is and why it’s impressive?

Each drawing is created with CSS and within a single div. This is not a SVG or PNG etc.

Its just pure CSS, even the animations of course.

Basically each graphic is a single `div` element and everything else comes from CSS. Early days of codepen were also used to be filled with these kind of fun little CSS Art.

Do we know if these were all hand-coded?

I gather there's vector drawing tools that can make these kinds of graphics.. But perhaps those tools can't output CSS attached to one div?

I would be surprised if any aren’t hand coded. You have to be extremely economical with shapes with this technique - generally (unless I’m out of date on css art techniques) you have your original element, a before and an after element, and an arbitrary number of box shadows of those elements which you can use to duplicate them in different colours and positions. So you have to pick 3 basic shapes to draw with. In some of these you can see that limited shape palette at play but some of them hide it very well.

Makes sense, so it's an exercise in efficiency and crafty creative use of shapes and keyframing. I wonder if the ability is within reach of AI to achieve a similar arrangement of CSS. It may be too hard due to the trial and error nature of making these. Prompt: "give me CSS for an animated column of rising smoke, 5 second duration, seamless loop."

The fun part about this "exercise" is that the final graphic is usually created just by iterating and eye balling your mistakes. I remember the most I did back then was to create a Snowman and it took me more than 1 hr.

Depends what you mean by hand coded. When the page was made vector graphics tools couldn't just output to CSS. I'm not sure if they can now.

However some of divs were probably made by drawing in a vector tool that could export to text then converted with a script.

"Coding is art" and here's the proof!

What is the significance of a single div? What is the meaning, what is the method? Without an about page, I'm left to speculation.

The "about" page is a comment in the HTML source:

> This is a CSS drawing experiment to see what's possible with a single div. To learn more about this project: GitHub: https://github.com/lynnandtonic/a-single-div Mozilla Hacks: https://hacks.mozilla.org/2014/09/single-div-drawings-with-c... Talk from CSSDay: https://lynnandtonic.com/thoughts/entries/talk-illustration-... Codepen: https://codepen.io/lynnandtonic Mastodon: @lynnandtonic@front-end.social Twitter: @lynnandtonic

Brave little toaster!

Anyone knows the performance diff betweem these goodies and just using svgs?

Very laggy for my M1 macbook

Runs super fine on Pixel 7

Runs really fine on a low-end phone from 2019 with Firefox. Mac issue?

Runs fine on an iPhone.

I wouldn't say "very" for me but it's definitely not as smooth as your average webpage. This is pretty edge casey use of HTML / CSS though, it's not surprising that browsers wouldn't optimize for it since this is more of a stunt than the best way to achieve this output.

Runs fine for me on my mac devices, even on an old iPhone.

When i look at the html of the website i see a lot of divs.

Lynn hype

Bad name.

Better name: (as) pure (as it gets) CSS art

Reply on news.ycombinator.com