8 ms·
Apparently transparent – CSS3D HTML5 Experiment
- Aardwolf 12y agoSo CSS can do 3D, but still not vertically center multiline text in a straightforward way?
- alexcasalboni 12y agoTrue story. Too many hacks are needed for that: http://css-tricks.com/vertically-center-multi-lined-text/ http://css-tricks.com/vertically-center-multi-lined-text/ Anyways, centered stuff is evil! http://uxmovement.com/content/why-you-should-never-center-align-paragraph-text/ http://uxmovement.com/content/why-you-should-never-center-al...
- Izeau 12y agoThis article isn’t about vertically-centered text but horizontally-centered text. You don’t expect the starting place of each line to change with vertically-centered text!
- michaelbuddy 12y agocentered 'stuff' is not evil. Centered blocks of paragraphs are not as pleasing to look at and are harder to work around with the rest of your content elements making up the design. But he's talking about centering it from top to bottom: vertically centered. Which is not evil but would be a very easy thing for CSS to just do in all browsers. yet it can't seem to accomplpish it. Every 'rule' can be broken when done effectively. another expert will tell you that only a minority reads our paragraphs of text anyway. And another expert will tell you that the harder it is to read something the better the comprehension will be. If clean lines really solved the worlds problems, we'd be in much better shape by now.
- equil 12y agosomething wrong with flex box?
- audessuscest 12y agono IE8 and IE9 support...
- Izeau 12y agoEven Google doesn’t support those anymore…
- Cephlin 12y agoWhy would anyone want to use/support those browsers. First off their IE... secondly they're seriously out of date.
- AustinG08 12y agoTell that to the boss
- jastanton 12y agoIf you're the developer that's your job to tell that to your boss. Come up with analytics to support your findings, make your case, he's probably not going to be reading this thread and staying up to date on all the latest and greatest that's your job. He may be stubborn or you might find out that your user base is all IE6 I don't know but sitting around complaining isn't going to get you anywhere either :)
- O____________O 12y agoCome up with analytics to support your findings Analytics are irrelevant when you're writing some huge internal service for a company whose conservative upgrade policy dictates that only one older browser will be installed and used company-wide until God-knows-when. By the way, glancing at a few browser market share websites, it looks like IE8 and IE9 are alive and well, totaling around the same as IE11.
- matthewmacleod 12y agoFlexbox, or display: table-cell. These have been supported for a while now – you're not going to get old browser support, but they're not going to support 3D features either, so your complaint is either flame bait or ignorance.
- bonn1 12y ago> These have been supported for a while now For Safari still the -webkit prefix is required which is a bit odd
- kowdermeister 12y agoThe world is a cruel place :)
- bicknergseng 12y agoSafari is the new IE. No idea why they still require vendor prefix for a range of accepted and implemented standards.
- zghst 12y agoWebkit keeps prefixes usually because it is not implemented fully and it is an experimental feature. They began unprefixing flexbox in Sept. 2014, I don't know when it's gonna ship. Though, its super unfair that the Web Inspector in Webkit uses unprefixed Flexbox (http://trac.webkit.org http://trac.webkit.org revision 173707).
- hawleyal 12y agoYou should not center things vertically.
- laughinghan 12y agoAren't you comparing the capability to do 3D with the straightforwardness of vertical centering, though? Certainly CSS has the capability to do vertical centering of multiline text, and I wouldn't call the 3D rendering strategy in this experiment amazingly straightforward---in fact, the cleverness of the technique is one of the things that makes this experiment so cool.
- rafaqueque 12y agoInsane.
- zaroth 12y agoDo not look away. Do not blink. Quite beautiful, code and result.
- SXX 12y agoOnce I see the demo I had exactly same feeling! So I made this: http://demos-sxx.rhcloud.com/apparently-transparent/ http://demos-sxx.rhcloud.com/apparently-transparent/
- TazeTSchnitzel 12y agoWhen I try to load it, the images only load part-way. :(
- xixixao 12y agoI expected a woman in black. This could be made quite scary. Great demo.
- Tagbert 12y agoIts an angel statue. much scarier. Don't look away! :)
- examancer 12y agoFantastic demo and the source code is concise and clean. Thanks.
- tambourine_man 12y agoReally nice. Some glitches in desktop Safari 8 and it crashes my poor iPhone 4S repeatedly.
- code_duck 12y agoI loaded this page in Safari, tried scrolling it, and then Safari did the 'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted. The crash is repeatable, too.
- fredleblanc 12y agoWorked fine on my iPhone 6 not plus.
- code_duck 12y agoI can view it successfully in Chrome (and this is an amazing demo!). Safari shows a gray background with a blue circle, then crashes as described. I don't have the latest iOS update installed though...
- runeks 12y agoWhich iOS version? Works perfectly on my iPhone 6 (no Plus) in iOS 8.1.3.
- code_duck 12y ago8.1.2 (12B440). I'll try it after I upgrade to 8.1.3.
- TazeTSchnitzel 12y agoWorks fine on my iPhone 5C, and that's a phone with an A6.
- code_duck 12y agoDo you mean in Safari, not Chrome? It so thoroughly doesn't work on my Safari that I assumed Safari lacks support for the CSS features.
- TazeTSchnitzel 12y agoI mean Safari, yes.
- Kiro 12y agoHow can this be achieved with so little code? I was expecting thousands of lines. It's like 100.
- TazeTSchnitzel 12y agoIf you have a look at the scene (with Inspect Element), it's actually pretty simple. It's six walls (each an image), and each of the four sides also has another 5 walls behind it (each also an image) with a statue (image). That, combined with how CSS 3D transforms let you describe 3D graphics in a declarative way (there's an image at some position with some rotation), rather than in an imperative way (bind the buffer, link the shader, do the 3D rendering dance, draw this thing at some position I bound and some rotation I chose, etc.), allows it to be very small. As always, while declarative programming doesn't lead to brilliant performance, it produces much nicer code and it's much easier to write.
- emehrkay 12y agoThe source code is beautiful. Code can be art when you know what you're looking at/looking for, kinda like real art. (I don't like his if/else blocks though)
- mattdesl 12y agoIPhone 5s, ios 8: crashes the page, then forces a system reboot. :/
- frik 12y agoiPad 2 iOS 6, stable
- matthijs_ 12y agoDo look at his (Gerard Ferrandez) other work: http://www.dhteumeuleu.com/index http://www.dhteumeuleu.com/index Amazing stuff in there.
- jasonlfunk 12y agoThis is cool. I'm freaked out that the statue is in the reflections but not in the room....
- Raphmedia 12y agoWhat if... you are the statue?
- grimmdude 12y agomind blown
- mpnordland 12y agoThis is broken in firefox
- atopal 12y agoWhat is broken in Firefox? Looks pretty much the same as in Chrome. Firefox 37 on Mac OS that is.
- udswagz 12y agowow, is that just pure css ? or something else ? awesome dude !
- kowdermeister 12y agoRendering us CSS3 based, but there's some JS handling the camera, mouse and stuff.
- geppetto 12y agoOn linux it's very slow and has glitches on firefox 45 (iceweasel); good on chromium.
- NanoWar 12y agoThis is also very nice: http://www.dhteumeuleu.com/the-momentum-equation http://www.dhteumeuleu.com/the-momentum-equation
- caniscrator 12y agoThis apparently seems authored by vasanthk 8 days ago (see github link). http://git.io/AY78 http://git.io/AY78
- tpabla 12y agoFrom github "Inspired by Gerard Ferrandez's 3D experiment. Thank you." And if you go to the about url of this story it appears to be Gerard Ferrandez's personal site. (http://www.dhteumeuleu.com/about http://www.dhteumeuleu.com/about)
- deleted 12y ago[deleted]
- caniscrator 12y agoGot it. Thanks.