14 ms·
A Single Div
- kelvin0 12y agoCould someone please enlighten me as to what I am looking at? The images are nice, and ...?
- tux3 12y agoThat's clever. It didn't even slow done my modest laptop.
- kelvin0 12y agoSo would it be possible to have an SVG ==> CSS exporter which would lighten the load on most browsers? Is there always a performance 'gain' in using CSS?
- tokenizerrr 12y agoEach image is not in fact an image, it's css styles applied to a single div.
- deleted 12y ago[deleted]
- infinitivium 12y agoWould love to see a blog post detailing some of these techniques.
- MasterScrat 12y agoChrome's style inspector pretty much tells you everything... it's mostly basic techniques used in very creative ways
- jfoutz 12y agolooks like the big trick is rendering to the background image: #mario-mushroom div { width: 170px; height: 140px; margin-left: -85px; margin-top: -90px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%); border-radius: 140px 140px 80px 80px; }
- jtheory 12y agoDifferent gradients (sometimes linear, sometimes radial), and/or box-shadow rules like this: #camera div:after { width: 100px; height: 100px; margin-left: -20px; top: 15px; left: 50%; z-index: 3; background: linear-gradient(45deg, #ccc 40%, #ddd 100%); border-radius: 50%; box-shadow: 0 3px 2px #999, 1px -2px 0 white, -1px -3px 2px #555, 0 0 0 15px #c2c2c2, 0 -2px 0 15px white, -2px -5px 1px 17px #666, 0 10px 10px 15px rgba(0,0,0,0.3), -90px -51px 1px -43px #aaa, -90px -50px 1px -40px #888, -90px -51px 0 -34px #ccc, -90px -50px 0 -30px #aaa, -90px -48px 1px -28px rgba(0,0,0,0.2), -124px -73px 1px -48px #eee, -125px -72px 0 -46px #666, -85px -73px 1px -48px #eee, -86px -72px 0 -46px #666, 42px -82px 1px -48px #eee, 41px -81px 0 -46px #777, 67px -73px 1px -48px #eee, 66px -72px 0 -46px #666, -46px -86px 1px -45px #444, -44px -87px 0 -38px #333, -44px -86px 0 -37px #ccc, -44px -85px 0 -34px #999, 14px -89px 1px -48px #eee, 12px -84px 1px -48px #999, 23px -85px 0 -47px #444, 23px -87px 0 -46px #888; } Neat results -- I'm not sure how practical these specific techniques are to everyday development, but of course a project like this provides the creator with a strong motivation to seriously master everything available in CSS; and the end result of that has obvious practical use.
- leni536 12y agoThey are really nice but I really don'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. 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.
- sanketsaurav 12y agoIt's but a proof-of-concept.
- vlunkr 12y agoBy creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her
- inflagranti 12y agoAFAIK you can embed images in CSS using data URIs, so there goes that argument and only the show-off one remains ;)
- vlunkr 12y agoYou can do that, but I think embedded images are slightly larger than the original because the way they are encoded. But still, images are more practical since these would be a cross-browser nightmare.
- nfoz 12y ago*her skills
- jtheory 12y agoI'd say it's an artistic constraint. It forced her to search through everything possible in CSS (an obviously-limited medium), and get creative to convince it to draw these.
- mikeryan 12y agoThe first couple of these all have before and after pseudo elements. If you're going to use those its kind of cheating calling it a single div when you have 3 styleable elements
- abritishguy 12y agoI disagree - you still only have one element in markup which is the whole point.
- untog 12y agoBut when you're using CSS to turn one element into three... what is the "whole point", exactly?
- mononcqc 12y agoIt means you should be able to do more from semantic HTML only and CSS only, without mixing up markup and presentation.
- u124556 12y agoYet she uses a <div/> instead of an <img/>
- coldtea 12y agoThe whole point is that you're using one element on your HTML code.
- lstamour 12y agoYou're using CSS. That's the point. Many people still think CSS is still stuck in 2003. It's still limited, but it's come a long way... Heck, with just CSS you can have a webpage react to your turning off the lights on your phone.
- untog 12y ago
- deleted 12y ago[deleted]
- benatkin 12y agoThe outer div could be replaced with the body tag. Those divs are just for showing multiple examples on the page.
- grimmfang 12y agoThese are really impressive. Are you using a program to compile these to CSS or are you just a wizard?
- MalcolmDiggs 12y agoInteresting to see CSS coming into it's own. Sure it'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). Makes me wonder if we'll begin to see icon/image libraries released with pure css versions.
- smt88 12y agoConsidering PNG has been around since 1996 and HTML pages can load arbitrary images and fonts, we don't need pure CSS icons. We have purpose-built formats for images. This CSS image project is just for fun. The whole "[something] in pure CSS" began when people realized how awful table-based layouts are. First it was layouts, then full-blown designs. This is almost like the most extreme version of that trend, almost to the point of parody.
- gpvos 12y agoWhile that may be true for this site, I do think CSS could be very useful for icons, since the it's infinitely zoomable, and a PNG isn't.
- Nullabillity 12y agoSVG? Vectorized, far better browser support than advanced CSS, advanced WYSIWYG editor support.
- gpvos 12y agoSVG is another obvious contender, but it needs a separate file (or a cryptic data url), which is not always a disadvantage, but sometimes may be. It seems like CSS has many of the same possibilities as SVG, although expressed a bit more obscurely. But I can imagine that an SVG-to-CSS converter would be possible.
- blt 12y agoI am unmoved by the many "... in pure CSS" posts, but I guess they are the equivalent of "HTTP server in x86 assembly" for CSS designers.
- paddyoloughlin 12y agoMore like "386 emulator in javascript", methinks.
- kylnew 12y agono kidding. The practicality of this is just non-existent. So you can do many shapes in CSS box-shadow, oh joy. Show me one instance where this is actually applicable and more semantically appropriate than embedding an SVG and I'll shut up for life.
- lisper 12y agoTo say nothing of the fact that, because you can embed images in CSS, this sort of thing is only interesting at all if you actually look at the CSS source. It's kind of like someone making scrambled eggs with their hands tied behind their backs. Sure, it's challenging, but why should anybody care?
- Mandatum 12y agoI agree the novelty has worn off, but for someone who's trying it out and has done it for the first time - it's a pretty cool hack. Remember your first novelty hack?
- lisper 12y agoI don't want to discourage people from playing around with CSS, or even from trying to make scrambled eggs with their hands tied behind their backs. It's good for people to challenge themselves in all kinds of creative ways. But this is supposed to be Hacker News. Making icons in CSS hasn't been newsworthy in a very long time, and I think it's lamentable that something like this is at the top of the home page while vastly more interesting things (like https://news.ycombinator.com/item?id=8224972 https://news.ycombinator.com/item?id=8224972) languish in obscurity.
- n0rm 12y agoThis is wizardry.
- na85 12y agoI came in expecting this to be an example of a website without tons of nested <div> elements- the problem that html5 was supposed to solve but didn't.
- u124556 12y ago> the problem that html5 was supposed to solve but didn't I always thought html5 solved it, but then came bootstrap and got us back to div-hell.
- rimantas 12y agoHow was html5 supposed to solve it? All it did is to introduce more elements, so instead of generic DIV you can use ARTICLE, but it was not going to solve the problem of superfluous elements in any way. If you can reduce the number of your nodes in html5, you can do the same in html4.
- shmerl 12y agoWhat is the point of doing that instead of using SVG?
- dpeck 12y agoyou're not allowed to ask that these days, we have to celebrate using inferior means for the sake of doing so.
- shmerl 12y agoThe author commented: https://twitter.com/lynnandtonic/status/504378544349126656 https://twitter.com/lynnandtonic/status/504378544349126656 > Don't worry folks, I do know what SVG is. ;)
- marcosdumay 12y agoTheese days? Let's pretend people didn't ever make contests of do X in assembly|binay|electronics... Or one liners contests, or blanckspace coding sprints.
- ed209 12y agoyeah, what's the point of sailing solo around the world in 100 days when you can do the same trip by plane in just a couple of days!
- coldtea 12y agoWhat's the point of writing your own language instead of using an existing one? What's the point of learning Haskell, if you're never gonna realistically find work with it? Some things are just fun to do, and stretch the limits of what we can do. Not everything has to have a real use case "point".
- bjz_ 12y agoIt's a hack. Therefore it has been posted on "Hacker News". I come to "Hacker News" because I like seeing cool hacks once and a while. Don't you?
- 12y ago
- jastanton 12y ago<google-maps></google-maps> boom. see more here: http://www.polymer-project.org/components/paper-elements/demo.html http://www.polymer-project.org/components/paper-elements/dem...
- anateus 12y agoI haven't seen so much nay-saying on HN in a while. It's like because there's an artistic element this or it'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 "hack", pushing CSS slightly beyond what it was intended for and potentially what is practical. But it's beautiful and clever, and if you truly can't appreciate it, that's sad.
- jiggy2011 12y agoIt's been done before (and posted here) http://marvelapp.github.io/devices.css/ http://marvelapp.github.io/devices.css/ Edit: Changed link
- fibonachos 12y agoMalwareBytes doesn't like your link.
- jiggy2011 12y agoOdd, no problem for me. There's a lot of ads on the page , so maybe that's why. Here's another one http://marvelapp.github.io/devices.css/ http://marvelapp.github.io/devices.css/
- fibonachos 12y agoCool, thanks for the new link. You're probably right though. It's the ad-heavy pages that always seem to cause problems.
- brbcoding 12y agoSure, look up "single div" on codepen and you'll find tons (http://codepen.io/search?q=%22single+div%22&limit=all&order=popularity&depth=everything&show_forks=false http://codepen.io/search?q=%22single+div%22&limit=all&order=...). I don't think this website claims any new technique, It just shows off a collection of things made using it...
- 12y ago
- rtorr 12y agoIf you read https://github.com/lynnandtonic/a-single-div/blob/gh-pages/README.md#but-but https://github.com/lynnandtonic/a-single-div/blob/gh-pages/R..., 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.
- shaurz 12y agoAnd still less verbose than SVG.
- justhw 12y agoFor those who don't understand. Each image is not in fact an image, it's css styles applied to a single html element. Very impressive. http://i.imgur.com/V8HYrhK.png http://i.imgur.com/V8HYrhK.png
- deleted 12y ago[deleted]
- oliverwgarcia 12y agoIt's amazing how powerful css is. I recently worked with changing the checkboxes on a form of mine to look like the iOS7 toggle. Check it out: http://designcouch.com/home/why/2013/09/19/ios7-style-pure-css-toggle/ http://designcouch.com/home/why/2013/09/19/ios7-style-pure-c...
- Tloewald 12y agoIt's amazing how CSS lets you do stuff like this but still can't center things easily. Nice demo by the way, but why on earth did you use an id rather than a class?
- masklinn 12y ago> It's amazing how CSS lets you do stuff like this but still can't center things easily. It's trivial to do if you can use flexbox. And I do mean trivial, we're talking 3 properties including "opting into" flexbox: http://jsfiddle.net/1vd9xLdy/ http://jsfiddle.net/1vd9xLdy/ (note: didn't bother with prefixes or older syntaxes so IE >= 11, Firefox >= 28, Chrome >= 29, Opera 12.1 or >= 19)
- Tloewald 12y agoIt's not vertically centered in the window, and that's using a CSS feature that's only fully-supported in IE11. This trickery is all box shadows and border radii, which go back to IE8. Flex box is great, but it's interesting that CSS implemented gaussian blurred inset shadows and 3d transforms before it addressed centering (incompletely).
- jianshen 12y agoThis 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!
- Pxtl 12y agoMaking images in css is like making a game engine in cobol. it wasn't a good language/model to begin with, and this is a particularly difficult application of the subject that only occurs to people because we're stuck with the technology.
- nness 12y agoI think this kind of thing isn't born out of necessity, since we're locked in with the tech, but more because its a challenging experiment that requires some pretty clever CSS to accomplish. You should certainly not do this in the wild.
- Pxtl 12y agoI didn't mean that this is done out of necessity, I mean people only give a half-baked mess of standards that is modern web-layout/css the time of day because it's foisted upon us. If CSS were just another layout engine for just another platform, people would laugh it out of the room and not bother with this kind of artistic stunts. CSS does not deserve the kind of respect that would go into this sort of craftmanship.
- smt88 12y agoSome people like to do things just to see if they can do them. This project is interesting not just because CSS is not meant to do this, but also because CSS is so half baked.
- elwell 12y agoRelevant: http://pattle.github.io/simpsons-in-css/ http://pattle.github.io/simpsons-in-css/
- marpstar 12y agoVery 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.
- penguindev 12y agomaybe 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 :-(
- skalla 12y agoOpen this on Internet Explorer LOL! Try from IE6 until IE 11. You can watch the evolution of SingleDiv
- cseelus 12y agoArtsy!
- dinkumthinkum 12y agoI'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. Besides that, this is HackerNews; it's relevant.
- Kiro 12y agoHow do they create two eyes out of one :after in the mushroom?
- anteht 12y agoBy using multiple box-shadows. box-shadow: 8px 0 #312114, 38px 0 #312114;
- disillusioned 12y agoWhat shitty fucking whiners you lot are. This is a fun technical experiment. It's clearly not advocating for some sort of production environment usage of pure CSS/single-div imagery in lieu of SVGs. It's a mental challenge and a fun "I wonder if" experiment. Any of you busily shouting high from the mountaintops how this is useless and pointless and stupid and derf, don'tyouknowthisisn'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. I'm glad most of this trash has since been downvoted into oblivion where it belongs.
- ZoFreX 12y agoCounterpoint to "not practical": We have a dashboard at work that displays, amongst other things, the CI build status. For reasons I won't go into, we cannot change the HTML. We can change the CSS though, using Stylish. The "build failed" / "build succeeded" icons were incredibly non-obvious and developers weren't paying much attention to them. Now, through a series of seriously horrendous CSS hacks, they display as really nice flat design green checks and crosses. Given that this dashboard only ever displays in literally one browser, on one big screen, it was completely acceptable to use CSS hacks to achieve the look I wanted. It was sites such as this one that helped me figure out how to twist a single HTML element into what I needed. Particular shout-out to http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://nicolasgallagher.com/pure-css-gui-icons/demo/
- snorkel 12y agoHear hear! A true hacker forum should applaud experimentation not nitpick at it. It helps us all to know the limits of client-side drawing by various means no matter if your site needs a Mario mushroom or not.
- psychometry 12y ago>a key tenet of a great engineer is occasionally looking at absurd challenges and seeing if they can make something happen Sure, if that absurd challenge has some benefit to someone out there. This is not true for CSS-only artwork. There are no applications for this.
- littleyangqh 12y agoOnly CSS? cool
- obasa 12y agoCan't believe this.
- icalc 12y agoGreat work.
- okaka 12y agoTested IE9 is not fully supported. And doesn't support IE8 and below. But It's still wonderful.
- nobodyshere 12y agoThat's not necessarily a drawback.
- secutor 12y agoWhat happens if you turn the web standards and css time back on this: https://twitter.com/secutor/status/504591841447399424 https://twitter.com/secutor/status/504591841447399424 Amazingly pictures how hard it is to develop anything cross IE platform...
- talmand 12y agoI fail to see your point. I don't understand what these clever uses of CSS that may or may not be used in a production environment has to do with old IE development. It would be like complaining that developing the film from a digital camera shows the pain of painting realistic images onto canvas.
- pattle 12y agoThis is pretty cool, the attention to detail is great. I did something similar a while ago - http://pattle.github.io/simpsons-in-css http://pattle.github.io/simpsons-in-css Don'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's a limits and that what you've done. This is an awesome hack!
- prasath5s 12y agoAwesome!!! This is absolute Hacking!!!
- jokoon 12y agoshouldn't SVG be more relevant for this ?
- collyw 12y agoI saw 19 divs when I clicked on view source.
- collyw 12y agoA bit of context would be nice. I gather from the comments this is some neat css hack. Without that, I had no idea what the page is about.