5 ms·
A Single Div
- gnabgib 2y agoLots 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 https://news.ycombinator.com/item?id=8229072 [1]: https://news.ycombinator.com/item?id=12091173 https://news.ycombinator.com/item?id=12091173 [2]: https://news.ycombinator.com/item?id=40049258 https://news.ycombinator.com/item?id=40049258
- techedlaksh 2y agoI 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.
- djbusby 2y agoYes. HN is one place where I love a repost.
- techedlaksh 2y agoI 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 !
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- ChrisArchitect 2y ago[flagged]
- techedlaksh 2y agoThese 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.
- ChrisArchitect 2y ago[flagged]
- techedlaksh 2y agoIt 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.
- pjerem 2y agoIt’s new to me and I enjoyed it. Nice discovery, op, thanks !
- techedlaksh 2y agoThis is what HN is for, curiosity and discussions !
- SkyMarshal 2y agoThis is my first time seeing it, thanks for re-posting it. Useful to be aware of and learn from.
- karaterobot 2y agoWell, I'm glad this was posted. I vaguely remember it, but I haven't looked at it in a while. It's incredibly impressive.
- techedlaksh 2y agoI 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.
- omoikane 2y agoThis reminds me of https://news.ycombinator.com/item?id=8070879 https://news.ycombinator.com/item?id=8070879 - Rendering Worlds with Two Triangles on the GPU (2014)
- techedlaksh 2y agoI usually follow Inigo's work but somehow i missed this one. Thanks for sharing this.
- doawoo 2y agoBrave little toaster!
- ryanthedev 2y agoI absolutely loved this site. Thank you for sharing.
- techedlaksh 2y agoSometimes I just wish, I could sit down and just recreate these little pieces one by one
- purple-leafy 2y agoI’m on mobile, am I to understand each graphic is built from a single div? Incredible! Good eye for graphic design too
- spondyl 2y agoYep, they're all just one div. Well, technically a div plus ::before and ::after pseudo-elements but still, it's all CSS
- PcChip 2y agoCan someone ELI5 what this is and why it’s impressive?
- vidyesh 2y agoEach 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.
- techedlaksh 2y agoBasically 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.
- exodust 2y agoDo 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?
- IneffablePigeon 2y agoI 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.
- exodust 2y agoMakes 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."
- vidyesh 2y agoI 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.
- techedlaksh 2y agoI 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.
- chilling 2y agoYou can try out my CSS-only bonfire! (: https://megaemce.github.io/Bonfire https://megaemce.github.io/Bonfire
- techedlaksh 2y agoThis 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 ?
- chilling 2y agoYou can just check noises' svg for the source code: https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg?short_path=178c68d https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.svg... <feTurbulence type="turbulance basically creates Perlin noise.
- Izkata 2y agoThis 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.
- pynappo 2y agomaybe you're referring to the demo from pwnfunction? "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo https://youtu.be/msdymgkhePo
- techedlaksh 2y agoWell 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.
- chrismorgan 2y agohttps://news.ycombinator.com/item?id=34464951 https://news.ycombinator.com/item?id=34464951
- Izkata 2y agoAha, 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/ https://css-tricks.com/using-css-without-html/
- techedlaksh 2y agoan interesting read for sure.
- andrethegiant 2y agoLynn hype
- wodenokoto 2y agoWhat 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 ... ?
- nevir 2y agoEach "picture" in the list is rendered via css rules defined for a single div. Lots of box shadow shenanigans, usually
- rav 2y agoLooking 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.
- onehair 2y agoWhile 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.
- silvestrov 2y agoIt'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.
- techedlaksh 2y ago
- poopsmithe 2y agoWhat is the significance of a single div? What is the meaning, what is the method? Without an about page, I'm left to speculation.
- alfon 2y agoThe "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 https://github.com/lynnandtonic/a-single-div Mozilla Hacks: https://hacks.mozilla.org/2014/09/single-div-drawings-with-css/ https://hacks.mozilla.org/2014/09/single-div-drawings-with-c... Talk from CSSDay: https://lynnandtonic.com/thoughts/entries/talk-illustration-with-css/ https://lynnandtonic.com/thoughts/entries/talk-illustration-... Codepen: https://codepen.io/lynnandtonic https://codepen.io/lynnandtonic Mastodon: @lynnandtonic@front-end.social Twitter: @lynnandtonic
- guardian5x 2y agoWhen i look at the html of the website i see a lot of divs.
- NayamAmarshe 2y ago"Coding is art" and here's the proof!
- Traubenfuchs 2y agoBad name. Better name: (as) pure (as it gets) CSS art
- jcmontx 2y agoVery laggy for my M1 macbook
- pawelduda 2y agoRuns super fine on Pixel 7
- RGBCube 2y agoRuns really fine on a low-end phone from 2019 with Firefox. Mac issue?
- sroussey 2y agoRuns fine on an iPhone.
- ryanbrunner 2y agoI 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.
- techedlaksh 2y agoRuns fine for me on my mac devices, even on an old iPhone.
- pattle 2y agoDoes anyone remember the Simpsons in CSS thing, that was cool https://pattle.github.io/simpsons-in-css/ https://pattle.github.io/simpsons-in-css/
- techedlaksh 2y agoYes, 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.
- ryanbrunner 2y agoThis 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.
- itslennysfault 2y agoThe 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.
- causal 2y agoIt has imports + many divs. Would still be easier to read not all on a single line.
- bodantogat 2y agoI clicked on the link at the top for the designer "Lynn Fisher", it took me to https://lynnandtonic.com/ 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.
- Bewelge 2y agoLovely detail! Thank you for pointing this out!
- techedlaksh 2y agoOh 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 !
- aembleton 2y agoWith references in the background to Daria!
- madacol 2y agoIt seems to only work in chrome, and resizing horizontally
- holoduke 2y agoAnyone knows the performance diff betweem these goodies and just using svgs?