（评论）

（评论）
(comments)

原始链接: https://news.ycombinator.com/item?id=40242410

该用户发现了一个展示简单 CSS 图形的旧网站，称为“单 div 网站”，从现代视角看待这些过去的项目中找到了灵感和乐趣。尽管这是一个潜在的利基主题，但他们相信讨论它可以激发新的 Web 开发人员掌握 CSS，就像它对他们所做的那样。该网站的作者使用了大量的 CSS 背景，主要是通过渐变的使用。用户思考将图像转换为 CSS 渐变或实施直接 CSS 图片操作是否会是更快的方法。他们计划在周末尝试重新设计某些设计。令人钦佩的是，每个图像都包含一个单独的“div”容器，而复杂的视觉效果仅源于 CSS 样式。从历史上看，这种艺术表达在 CodePen 的初始阶段蓬勃发展，大概只涉及最少的编码。 CSS 图稿依赖于基本形状的经济使用——通常是一个基本形状，后面跟着一个“之前”和“之后”伪元素，以及几个盒子阴影。创作者必须选择三种基本形式来展示他们的设计，使其成为效率和创造力的巧妙努力。尽管与标准网页相比费力且不够精致，但这些动画制作起来很迷人且令人愉快。然而，用户对糟糕的 HTML 格式感到遗憾，并建议改进格式以提高可读性。总的来说，以上述方式创建 CSS 图形是对工艺和局限性的一次有趣的探索。

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.

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?

[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).

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.

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.

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.

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.

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.

（评论） (comments)

（评论）
(comments)