TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

A Single Div

649 点作者 brbcoding超过 10 年前

34 条评论

anateus超过 10 年前
I haven&#x27;t seen so much nay-saying on HN in a while. It&#x27;s like because there&#x27;s an artistic element this or it&#x27;s pure-web tech the appreciation of a cool hack and interesting exploration of a technology is completely gone. This is a classic example of a &quot;hack&quot;, pushing CSS slightly beyond what it was intended for and potentially what is practical.<p>But it&#x27;s beautiful and clever, and if you truly can&#x27;t appreciate it, that&#x27;s sad.
评论 #8230516 未加载
评论 #8231008 未加载
评论 #8230729 未加载
评论 #8229975 未加载
justhw超过 10 年前
For those who don&#x27;t understand. Each image is not in fact an image, it&#x27;s css styles applied to a single html element. Very impressive.<p><a href="http://i.imgur.com/V8HYrhK.png" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;V8HYrhK.png</a>
评论 #8230676 未加载
评论 #8231442 未加载
评论 #8232905 未加载
评论 #8230105 未加载
rtorr超过 10 年前
If you read <a href="https://github.com/lynnandtonic/a-single-div/blob/gh-pages/README.md#but-but" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;lynnandtonic&#x2F;a-single-div&#x2F;blob&#x2F;gh-pages&#x2F;R...</a>, she obviously knows this is not the most practical way to make illustrations. Maybe its for fun and research? Some harsh people on here today.
disillusioned超过 10 年前
What shitty fucking whiners you lot are. This is a fun technical experiment. It&#x27;s clearly not advocating for some sort of production environment usage of pure CSS&#x2F;single-div imagery in lieu of SVGs. It&#x27;s a mental challenge and a fun &quot;I wonder if&quot; experiment.<p>Any of you busily shouting high from the mountaintops how this is useless and pointless and stupid and derf, don&#x27;tyouknowthisisn&#x27;tpractical should stop well short of daring to call yourselves engineers, and even shorter of calling yourselves creators, for a key tenet of a great engineer is occasionally looking at absurd challenges and seeing if they can make something happen.<p>I&#x27;m glad most of this trash has since been downvoted into oblivion where it belongs.
评论 #8231566 未加载
评论 #8231928 未加载
评论 #8232745 未加载
blt超过 10 年前
I am unmoved by the many &quot;... in pure CSS&quot; posts, but I guess they are the equivalent of &quot;HTTP server in x86 assembly&quot; for CSS designers.
评论 #8229847 未加载
评论 #8229606 未加载
评论 #8231161 未加载
评论 #8229738 未加载
grimmfang超过 10 年前
These are really impressive. Are you using a program to compile these to CSS or are you just a wizard?
MalcolmDiggs超过 10 年前
Interesting to see CSS coming into it&#x27;s own. Sure it&#x27;s not the most practical thing at the moment, but I could certainly see some smaller-scale uses being useful today (like iconography and such).<p>Makes me wonder if we&#x27;ll begin to see icon&#x2F;image libraries released with pure css versions.
评论 #8231233 未加载
infinitivium超过 10 年前
Would love to see a blog post detailing some of these techniques.
评论 #8229303 未加载
评论 #8229311 未加载
jianshen超过 10 年前
This was really fun challenging myself not to look at the source and thinking thru how I would do each one myself. Things are not as hierarchical as you might expect. Great job!
elwell超过 10 年前
Relevant: <a href="http://pattle.github.io/simpsons-in-css/" rel="nofollow">http:&#x2F;&#x2F;pattle.github.io&#x2F;simpsons-in-css&#x2F;</a>
dinkumthinkum超过 10 年前
I&#x27;m surprised at the comments. To the person that did this: Great job! This is very neat and shows the kind of boundaries you can push with CSS. So what if this is not practical per se, it does show that you can potentially do simpler things than this in pure CSS and that may, in fact, be practical in some cases. Seeing an example like this makes it abundantly clear that that simple of effect you might be wondering if is possible to do in CSS is definitely because clearly this exists.<p>Besides that, this is HackerNews; it&#x27;s relevant.
shaurz超过 10 年前
And still less verbose than SVG.
marpstar超过 10 年前
Very cool. Kind of funny if you open it in something old, like IE9, just to see. Some of them are close, but none of them work 100%. Kind of like failing the old Acid test.
n0rm超过 10 年前
This is wizardry.
kelvin0超过 10 年前
Could someone please enlighten me as to what I am looking at? The images are nice, and ...?
评论 #8229281 未加载
评论 #8229309 未加载
评论 #8229287 未加载
pattle超过 10 年前
This is pretty cool, the attention to detail is great. I did something similar a while ago - <a href="http://pattle.github.io/simpsons-in-css" rel="nofollow">http:&#x2F;&#x2F;pattle.github.io&#x2F;simpsons-in-css</a><p>Don&#x27;t let the SVG naysayers get you down. Yes SVG would have been a better tool for the job but its not about that, its about pushing CSS to it&#x27;s a limits and that what you&#x27;ve done. This is an awesome hack!
prasath5s超过 10 年前
Awesome!!! This is absolute Hacking!!!
skalla超过 10 年前
Open this on Internet Explorer LOL! Try from IE6 until IE 11. You can watch the evolution of SingleDiv
penguindev超过 10 年前
maybe this will actually work in more browsers than svgs do. I tried about 15 inkscape-made svgs the other days, really simple clipart, and out of 3 (current!) browsers most of them rendered differently :-( One svg was different in all 3 :-(
okaka超过 10 年前
Tested<p>IE9 is not fully supported. And doesn&#x27;t support IE8 and below.<p>But It&#x27;s still wonderful.
评论 #8231876 未加载
Kiro超过 10 年前
How do they create two eyes out of one :after in the mushroom?
评论 #8231450 未加载
secutor超过 10 年前
What happens if you turn the web standards and css time back on this: <a href="https://twitter.com/secutor/status/504591841447399424" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;secutor&#x2F;status&#x2F;504591841447399424</a> Amazingly pictures how hard it is to develop anything cross IE platform...
评论 #8232611 未加载
jokoon超过 10 年前
shouldn&#x27;t SVG be more relevant for this ?
cseelus超过 10 年前
Artsy!
obasa超过 10 年前
Can&#x27;t believe this.
littleyangqh超过 10 年前
Only CSS? cool
collyw超过 10 年前
I saw 19 divs when I clicked on view source.
评论 #8232888 未加载
icalc超过 10 年前
Great work.
shmerl超过 10 年前
What is the point of doing that instead of using SVG?
评论 #8229764 未加载
评论 #8229902 未加载
评论 #8229627 未加载
jastanton超过 10 年前
&lt;google-maps&gt;&lt;&#x2F;google-maps&gt;<p>boom. see more here: <a href="http://www.polymer-project.org/components/paper-elements/demo.html" rel="nofollow">http:&#x2F;&#x2F;www.polymer-project.org&#x2F;components&#x2F;paper-elements&#x2F;dem...</a>
Pxtl超过 10 年前
Making images in css is like making a game engine in cobol. it wasn&#x27;t a good language&#x2F;model to begin with, and this is a particularly difficult application of the subject that only occurs to people because we&#x27;re stuck with the technology.
评论 #8230406 未加载
na85超过 10 年前
I came in expecting this to be an example of a website without tons of nested &lt;div&gt; elements- the problem that html5 was supposed to solve but didn&#x27;t.
评论 #8229858 未加载
评论 #8231325 未加载
mikeryan超过 10 年前
The first couple of these all have before and after pseudo elements. If you&#x27;re going to use those its kind of cheating calling it a single div when you have 3 styleable elements
评论 #8229428 未加载
leni536超过 10 年前
They are really nice but I really don&#x27;t see the point why they are implemented in css. Most of the images make use of the capability of directly using gradients in the background-image property. Of course it could be easily replaced by the appropriate svg element.<p>For the lollypop shadow I would make use of the 3D transformation capabilities of CSS3. AFAIK svg is only capable of affine transformations (why?) while CSS3 can handle perspective transformations too.
评论 #8229881 未加载
评论 #8229562 未加载
评论 #8229552 未加载