[HN Gopher] A Single Div
___________________________________________________________________
A Single Div
Author : techedlaksh
Score : 403 points
Date : 2024-05-02 23:17 UTC (1 days ago)
(HTM) web link (a.singlediv.com)
(TXT) w3m dump (a.singlediv.com)
| gnabgib wrote:
| 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
| techedlaksh wrote:
| 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.
| djbusby wrote:
| Yes. HN is one place where I love a repost.
| techedlaksh wrote:
| 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 !
| SkyMarshal wrote:
| This is my first time seeing it, thanks for re-posting it.
| Useful to be aware of and learn from.
| karaterobot wrote:
| 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.
| techedlaksh wrote:
| 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.
| omoikane wrote:
| This reminds me of
|
| https://news.ycombinator.com/item?id=8070879 - Rendering Worlds
| with Two Triangles on the GPU (2014)
| techedlaksh wrote:
| I usually follow Inigo's work but somehow i missed this one.
| Thanks for sharing this.
| doawoo wrote:
| Brave little toaster!
| ryanthedev wrote:
| I absolutely loved this site. Thank you for sharing.
| techedlaksh wrote:
| Sometimes I just wish, I could sit down and just recreate these
| little pieces one by one
| purple-leafy wrote:
| I'm on mobile, am I to understand each graphic is built from a
| single div? Incredible!
|
| Good eye for graphic design too
| spondyl wrote:
| Yep, they're all just one div. Well, technically a div plus
| ::before and ::after pseudo-elements but still, it's all CSS
| PcChip wrote:
| Can someone ELI5 what this is and why it's impressive?
| vidyesh wrote:
| 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.
| techedlaksh wrote:
| 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.
| exodust wrote:
| 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?
| IneffablePigeon wrote:
| 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.
| exodust wrote:
| 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."
| techedlaksh wrote:
| 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.
| wmil wrote:
| 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.
| vidyesh wrote:
| 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.
| techedlaksh wrote:
| 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.
| chilling wrote:
| You can try out my CSS-only bonfire! (:
|
| https://megaemce.github.io/Bonfire
| techedlaksh wrote:
| 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 ?
| chilling wrote:
| You can just check noises' svg for the source code:
|
| https://github.com/Megaemce/Bonfire/blob/main/noiseSmall.sv
| g... <feTurbulence type="turbulance
|
| basically creates Perlin noise.
| Bewelge wrote:
| 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).
| techedlaksh wrote:
| This was fun to play with and you even had some Physics
| equations in there.
| Izkata wrote:
| 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.
| pynappo wrote:
| maybe you're referring to the demo from pwnfunction?
|
| "This Site Has No Code, or Does It?"
| https://youtu.be/msdymgkhePo
| techedlaksh wrote:
| 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.
| chrismorgan wrote:
| https://news.ycombinator.com/item?id=34464951
| Izkata wrote:
| 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/
| techedlaksh wrote:
| an interesting read for sure.
| andrethegiant wrote:
| Lynn hype
| wodenokoto wrote:
| 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 ... ?
| nevir wrote:
| Each "picture" in the list is rendered via css rules defined
| for a single div.
|
| Lots of box shadow shenanigans, usually
| rav wrote:
| 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.
| onehair wrote:
| 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.
| silvestrov wrote:
| 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.
| techedlaksh wrote:
| Adequately put. I am gonna use your explanation from now
| on whenever somebody wants to know why this exists.
| wmil wrote:
| 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.
| poopsmithe wrote:
| 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.
| alfon wrote:
| 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
| guardian5x wrote:
| When i look at the html of the website i see a lot of divs.
| NayamAmarshe wrote:
| "Coding is art" and here's the proof!
| Traubenfuchs wrote:
| Bad name.
|
| Better name: (as) pure (as it gets) CSS art
| jcmontx wrote:
| Very laggy for my M1 macbook
| pawelduda wrote:
| Runs super fine on Pixel 7
| RGBCube wrote:
| Runs really fine on a low-end phone from 2019 with Firefox. Mac
| issue?
| sroussey wrote:
| Runs fine on an iPhone.
| ryanbrunner wrote:
| 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.
| techedlaksh wrote:
| Runs fine for me on my mac devices, even on an old iPhone.
| pattle wrote:
| Does anyone remember the Simpsons in CSS thing, that was cool
|
| https://pattle.github.io/simpsons-in-css/
| techedlaksh wrote:
| 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.
| ryanbrunner wrote:
| 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.
| itslennysfault wrote:
| 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.
| causal wrote:
| It has imports + many divs. Would still be easier to read not
| all on a single line.
| bodantogat wrote:
| 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.
| Bewelge wrote:
| Lovely detail! Thank you for pointing this out!
| techedlaksh wrote:
| 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 !
| aembleton wrote:
| With references in the background to Daria!
| holoduke wrote:
| Anyone knows the performance diff betweem these goodies and just
| using svgs?
___________________________________________________________________
(page generated 2024-05-04 23:01 UTC)