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.
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/
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)
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.
These are fun little CSS Art and I agree this might have become a niche topic but that does not mean it's lost. These little graphics in the early days is what pulled me towards learning CSS even better and I hope discussing this now, today, would help new web developers get excited for CSS as it did for me back then.
It seems like you have nothing to discuss regarding the original link and it's obvious from other comments that people still find this interesting contradicting your whole point.
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.
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?
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 ?
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 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.
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.
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.
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 !
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.
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.
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.
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.
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.
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.