7 replies
14h9m
Can someone ELI5 what this is and why it’s impressive?
6 replies
12h27m
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 ... ?
4 replies
12h20m
Each "picture" in the list is rendered via css rules defined for a single div.
Lots of box shadow shenanigans, usually
3 replies
12h14m
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.
2 replies
10h45m
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.
0 replies
39m
Adequately put. I am gonna use your explanation from now on whenever somebody wants to know why this exists.
0 replies
10h3m
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.
0 replies
6h1m
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.
5 replies
14h9m
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.
1 replies
12h3m
You can try out my CSS-only bonfire! (:
0 replies
44m
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 ?
1 replies
2h26m
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).
0 replies
56m
This was fun to play with and you even had some Physics equations in there.
0 replies
13h41m
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.
5 replies
5h40m
Very laggy for my M1 macbook
1 replies
5h0m
Runs really fine on a low-end phone from 2019 with Firefox. Mac issue?
0 replies
3h32m
Runs fine on an iPhone.
0 replies
30m
Runs fine for me on my mac devices, even on an old iPhone.
0 replies
4h10m
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.
0 replies
5h27m
Runs super fine on Pixel 7
5 replies
13h46m
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.
2 replies
11h8m
1 replies
5h22m
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/
0 replies
1h6m
an interesting read for sure.
0 replies
13h13m
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.
0 replies
13h24m
maybe you're referring to the demo from pwnfunction?
"This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
4 replies
19h3m
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
3 replies
18h45m
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.
1 replies
15h38m
Yes. HN is one place where I love a repost.
0 replies
15h18m
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 !
0 replies
8m
This is my first time seeing it, thanks for re-posting it. Useful to be aware of and learn from.
3 replies
3h6m
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.
0 replies
1h3m
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 !
0 replies
32m
With references in the background to Daria!
0 replies
2h35m
Lovely detail! Thank you for pointing this out!
2 replies
4h12m
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.
1 replies
3h35m
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.
0 replies
3h14m
It has imports + many divs. Would still be easier to read not all on a single line.
1 replies
15h37m
I absolutely loved this site. Thank you for sharing.
0 replies
15h15m
Sometimes I just wish, I could sit down and just recreate these little pieces one by one
1 replies
14h40m
I’m on mobile, am I to understand each graphic is built from a single div? Incredible!
Good eye for graphic design too
0 replies
14h7m
Yep, they're all just one div. Well, technically a div plus ::before and ::after pseudo-elements but still, it's all CSS
1 replies
10h49m
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.
0 replies
10h45m
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
1 replies
4h17m
Does anyone remember the Simpsons in CSS thing, that was cool
0 replies
27m
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.
1 replies
15h38m
This reminds me of
https://news.ycombinator.com/item?id=8070879 - Rendering Worlds with Two Triangles on the GPU (2014)
0 replies
15h13m
I usually follow Inigo's work but somehow i missed this one. Thanks for sharing this.
1 replies
15h38m
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.
0 replies
15h19m
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.
0 replies
39m
Anyone knows the performance diff betweem these goodies and just using svgs?
0 replies
9h23m
When i look at the html of the website i see a lot of divs.
0 replies
15h38m
Brave little toaster!
0 replies
13h42m
Lynn hype
0 replies
6h33m
Bad name.
Better name: (as) pure (as it gets) CSS art
0 replies
9h15m
"Coding is art" and here's the proof!
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.
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.