6 ms·
The Simpsons in CSS
- calcar 7y agodigging a cave with a spoon. if hand-made, hat off to patience
- Nition 7y agoI love how even something as silly and unimportant as this has 13 open issue reports on GitHub.
- DarthGhandi 7y agoThe license one was opened nearly 6 years ago.
- Symbiote 7y agoIt seems reasonable for the author not to put a license on what's clearly someone else's trademarks and copyright.
- avian 7y agoIf you check the pull requests tab there's also a showcase of why some people resist putting stuff on GitHub. Most of the pull requests are low-effort tickets like "update bart.css" with no further explanation and a bunch of random changes in the diff.
- OJFord 7y agoThose almost certainly come from people using GitHub's web editor - the default commit message is 'Update {filename}'. I despise it, I don't know why they encourage such useless commit messages, there should be no default message because there can be no useful default.
- bachmeier 7y agoThere are two extremely simple solutions to that: - Disable issues (pretty sure Github didn't give that option to me alone) - Write on the readme that you're not working on this and will ignore/close any submitted issues "Resisting" putting stuff on GitHub is not necessary.
- dividuum 7y agoFor projects that are "finished" and will not be updated, I think using the archive function could be helpful. Marking a project as archived removes the issues tab among other things and clearly communicates that the owner is not interested in continued development.
- jtangelder 7y agoCSS art always reminds me to the acid tests, back in the old days. We come from far! https://en.wikipedia.org/wiki/Acid2 https://en.wikipedia.org/wiki/Acid2
- mFixman 7y agoThose tests were definitely fun, and gave me lots of "my browser is better than yours" bragging rights. I'm surprised that it's the year 2020 and Firefox still doesn't score 100% in the Acid3 test.
- jerven 7y agoThat is because the acid3 test is broken or expects non standard behavior.
- FlorianRappl 7y agoIt will never have. And that is also fine. Acid3 was a great step forward at its time, but it just isn't that useful any more. There are so many more specs that are more important. More infos here: https://news.ycombinator.com/item?id=15256890 https://news.ycombinator.com/item?id=15256890
- heydabop 7y agoShit, Firefox Developer 74.0b8 is even failing Acid2 for me
- 7y ago
- exdsq 7y agoThis is cool - CSS art is one of the first things I tried when learning to program. I wonder if we will ever see a CSS art exhibition at a gallery or something. Krusty looks pretty terrifying though.
- jolmg 7y agoComic book guy, too.
- pattle 7y agoI was wondering why I suddenly had an influx of Twitter followers this morning... Thanks to whoever shared this.
- cmroanirgo 7y agoNicely done. I was following the link to "How I did it" and noticed that I got SSL cert errors for the site: https://www.chrispattle.com/blog/simpsons-in-css/ https://www.chrispattle.com/blog/simpsons-in-css/ You're using the cert for octopushr.app... Unfortunately port 80 is also closed, so even the most recent wayback machine wasn't working. Here's a link from 2016 which goes into your methods, which honestly, are a bit on the sparse side (it doesn't detract at all from what you've done): https://web.archive.org/web/20160111044359/https://www.chrispattle.com/blog/simpsons-in-css/ https://web.archive.org/web/20160111044359/https://www.chris...
- pattle 7y agoThanks for the heads up, I've just removed those links for now. Wasn't expecting anyone to come across them!
- ak39 7y agoAmazing achievement. How long did it take you to do each?
- 7y ago
- DiabloD3 7y agoSome of these do not seem to render correctly on Firefox. Seems to rely on Chrome-specific behavior.
- cmroanirgo 7y agolooks ok to me. FF 73
- misnome 7y agoBoth FF73 and Chrome, on mac, messes up for me. It's most noticeable on Comic-book-guy but many of the later ones are messed up to various degrees, mainly hair/whiskers, sometimes spurious lines/strokes outside the main image.
- MrGilbert 7y agoSame for Vivaldi, which is Chromium-based...
- JosephRedfern 7y agoSame here: https://i.imgur.com/M07sFus.png https://i.imgur.com/M07sFus.png. FF72 (just realised I'm a bit out of date).
- JosephRedfern 7y ago(this was FF72 on Windows)
- gnulinux 7y agoFF73 on OSX, I see the same result as that image.
- Angostura 7y agoSome of them are slightly problematic on Safari Mac, too https://imgur.com/a/5CCu9K8 https://imgur.com/a/5CCu9K8 shows quite a few spurious ovals showing up. Good work though :)
- z3t4 7y agoSVG would be a better fit. Hand written SVG is underrated. But maybe it would not be difficult enough to make them in SVG. Whenever you feel the CSS get a bit hacky, like backgrounds with round shapes, it can usually be solved in a few lines of SVG. SVG also has classes and CSS, yes you can have CSS in SVG for style reusability and abstraction. You can also create SVG on the fly using JavaScript.
- peterkelly 7y agoI suspect you may be missing the point of this exercise
- jiofih 7y agoI suspect the exercise may be missing the point (there is none). Parent is right.
- rpastuszak 7y agoIf everything I did had a practical purpose, I'd die from boredom without learning anything beforehand. Kudos to the poster for sharing this. Also, if I was hiring a developer with decent CSS knowledge, and found this attached to their CV, it'll help me skip a ton of questions (and I'll be less bored during the interview). Next step: ensure that the related Simpons characters' images are build using CSS cascade:) Sidenote: I think we should put more energy in replying to the OP, rather than feeding trolls (I'm up for constructive criticism, but genuinely think that the parent comment doesn't add anything to the discussion).
- Sharparam 7y agoViewing this page with Dark Reader enabled makes for quite a harrowing experience... https://i.imgur.com/AUTXPfW.png https://i.imgur.com/AUTXPfW.png
- blowski 7y agoThe Simpsons meets Coraline!
- csmattryder 7y agoIn a classic case of "Simpsons did it"... https://en.wikipedia.org/wiki/Treehouse_of_Horror_XXVIII#Coralisa https://en.wikipedia.org/wiki/Treehouse_of_Horror_XXVIII#Cor...
- djsumdog 7y agoSeason 29 ... wow. I loved the show as a kid. I'll occasionally watch one or two every few years. Most of it seems meh when I catch it. Still this CSS is pretty amazing, with all the neat stuff you can do with it just by changing some CSS or enabling dark mode.
- jordigh 7y ago:-( Everyone forgets that white is not the default background colour. There is no default background colour!
- djsumdog 7y agoQuora is bad about this. I change my default background to a grey and I always notice it on their site because they have a white central element surrounded by grey.
- MrManatee 7y agoSome forget. This page explicitly sets the background white. If the user runs a browser extension that overrides this setting, what can the page do?
- dusted 7y agoCool pictures! Well done! That's quite a feat indeed! Not being a fan of CSS, I think this (the CSS source code) shows fairly well why I'm not a fan of CSS. Sure, doing things like this is not what CSS is meant for. CSS is meant for making HTML do things it wasn't meant for.
- vivanchuk 7y agoThat's crazy!
- cryptozeus 7y agoThis is crazy good, didn’t know css has come this far.
- jiofih 7y agoThis page is over five years old.
- rambojazz 7y agoSeriously, how are these things made? Is there a GIF2CSS converter or anything like that?
- sleepychu 7y agoIf you like css art... https://a.singlediv.com https://a.singlediv.com
- deleted 7y ago[deleted]
- anonsivalley652 7y agoHoly mackerel's ghost. That's mighty damn impressive. More skills I will never have, like penmanship and singing. Give me about a week, and I'll have a red square and a blue circle aligned.
- ww520 7y agoVery nicely done!
- jiofih 7y agoNeeds (2015) tag.
- anonsivalley652 7y agoAnimated even and the code looks hand-drawn. I <3 it. Fun fact: I worked at a nuclear engineering consultancy in the 90's. That's the not the fun fact. The hostnames of the computers were all Simpsons' character names. rsh blinky ftp homer
- richthegeek 7y agoI work at a place now that uses USS Starship names for projects. Really brings home the old adage about the hardest parts of computer science being naming things when the decision comes down to a discussion of the philosophical implications of a TV episode from 1994.
- philbarr 7y agoI worked at a place once where we were told to pick a naming system for the releases. We chose "Genesis" as the first one. Our boss, whom we didn't know was religious, says, "that's fantastic! Books of the bible, yes?! Next release is 'Exodus'?" "Er, no it's Start Trek, next release is gonna be called 'Picard'."
- jjgreen 7y agoMy first work encounter with Unix (SunOS, Solaris) had a weather phenomena naming scheme, "lightning", "thunder" and so on, all very exciting. When I and the other new hire called ours "overcast" and "mizzle", the older coders were nonplussed, but couldn't really complain about our sarcasm.
- Phrenzy 7y agoA long time ago I was a sysadmin for a company that gave us a Windows client desktop, and a desktop running Windows Server. The rule was that you had to name the server after a brewery. I'm not a beer drinker, so I named mine A&W. Spelled as "Ayeanddubya." (Aye and dubya) That was fun for a while, people would call it names like "Abbadabba." I later switched it to Duff. During that time our manager, who wasn't that bright, rushed over and exclaimed. "There is a rouge server on the network!" We did some looking around and discovered that she had seen my coworker's server, named after Rouge Brewery.
- dillonmckay 7y agoNo date in title? This is a classic.
- ak39 7y agoDamn, this is dope! (Learnt that from my sons) Now just give me a design surface tool that takes my raster drawn images and converts it to these CSS and I will be on it like a rash.
- rpastuszak 7y agoMy first reaction when I saw the title was "oh, not this again", but this looks neat and the CSS source, surprisingly clean! I really enjoyed the first attempts at 3d in CSS (in pre-canvas, WebGL times). Can't find the right example, but in a nutshell, the approach involved using border-width to create triangles, and thus triangle meshes. You might like this one: https://keithclark.co.uk/labs/css-fps/desktop/ https://keithclark.co.uk/labs/css-fps/desktop/
- AdmiralAsshat 7y agoSpot-on! They even do the creepy blinking animation like the Simpsons arcade game!
- davnicwil 7y agoI think a hidden gem here is at the end, when it says 'what's cool is, I can now do stuff like.. green Bart, colorless Bart' That's something I've often thought is a real ace in the sleeve of CSS and also SVG, that ability to basically have artistic parameters as code and change them, animate them, etc. Obviously you can do that offline so to speak in image applications, but the iteration time is hugely longer, stuff like caching becomes a problem, and you definitely can't automate it based on runtime inputs etc. It's almost like having that image application running in the browser, rendering whatever changes you need in real time.
- tomphoolery 7y agoHas anyone done Vaporwave Bart yet? ;)
- whoisjuan 7y agoGot you fam: https://jsbin.com/rofemujofo https://jsbin.com/rofemujofo
- rimlicker 7y agoHis name is Dankmus. https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw https://www.youtube.com/channel/UCfITAHFPUbFwCbMYrhMJJCw
- artificial 7y agoI'm compelled to link the Bed Goes Up song! https://www.youtube.com/watch?v=a4HuUmwWesA https://www.youtube.com/watch?v=a4HuUmwWesA
- leeoniya 7y agothese are still no match for https://github.com/cyanharlow/purecss-francine https://github.com/cyanharlow/purecss-francine
- mwexler 7y agoLove the blinking!
- A4ET8a8uTh0 7y agoThat is neat. It only goes to show that it is often not just about tools, but about the artist behind them.
- honest_tovarich 7y agothat is amazing
- it 7y agoNice work! Can you describe the process?
- jsd1982 7y agoVery cool but can you fill in the eye whites instead of leaving them as background color? The characters looked really odd with a dark mode extension enabled so all the eyes were completely black :D
- jonluca 7y agoThis is really cool. Everyone looks a bit... wispy? though
- chrisweekly 7y agoMods: consider adding (2014) to title?
- brainscdf 7y agoFun question: Is CSS Turing complete yet?
- MR4D 7y ago583 lines of CSS just to create Homer!! Wow, with this, you don't need a resume, and can probably quote any price you want. Very impressive!!
- runarberg 7y agoPreviously posted 6 years ago: https://news.ycombinator.com/item?id=7937070 https://news.ycombinator.com/item?id=7937070