Apparently transparent – CSS3D HTML5 Experiment | Hacker News Reader

Apparently transparent – CSS3D HTML5 Experiment

dhteumeuleu.com

110 pointsalexcasalboni59 comments

So CSS can do 3D, but still not vertically center multiline text in a straightforward way?

True story. Too many hacks are needed for that: http://css-tricks.com/vertically-center-multi-lined-text/

Anyways, centered stuff is evil! http://uxmovement.com/content/why-you-should-never-center-al...

This 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!

centered '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.

something wrong with flex box?

no IE8 and IE9 support...

Even Google doesn’t support those anymore…

Why would anyone want to use/support those browsers. First off their IE... secondly they're seriously out of date.

Tell that to the boss

If 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 :)

Come 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.

Lol I am hardly "sitting around and complaining." At my last agency gig we had to support down to IE6 for several months until we built a strong case to only support down to IE8. Even still it was much harder and protracted battle than it should have been.

My fancy looking website doesn't have to look good on somebody's office computer. If they had a good firewall, it would probably be blocked anyway. Also, people still on old IE are used to seeing websites all busted up.

You meant "Only Google doesn't support those anymore..."

If you want new features, you cannot expect old browsers to be supported, that's just the way it works.

Fallback for IE8 and IE9, display: table-cell; vertical-align: middle; Note that the element needs an explicit height for this to work...

Flexbox, 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.

> These have been supported for a while now

For Safari still the -webkit prefix is required which is a bit odd

The world is a cruel place :)

Safari is the new IE. No idea why they still require vendor prefix for a range of accepted and implemented standards.

Webkit 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 revision 173707).

You should not center things vertically.

Aren'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.

Fantastic demo and the source code is concise and clean. Thanks.

I 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.

Worked fine on my iPhone 6 not plus.

I 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...

Which iOS version?

Works perfectly on my iPhone 6 (no Plus) in iOS 8.1.3.

8.1.2 (12B440).

I'll try it after I upgrade to 8.1.3.

Works fine on my iPhone 5C, and that's a phone with an A6.

Do 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.

I mean Safari, yes.

Interesting, I updated to the latest version and it still just barely starts to load on Safari before crashing.

So, I upgraded to 8.1.3 and now Safari will reload the page a couple of times, then crash. There's no kernel panic or whatever now, though, only Safari crashes.

Edit: never mind that, I cleared my Safari data, reloaded the page, and it once more made my entire phone reboot.

Do look at his (Gerard Ferrandez) other work: http://www.dhteumeuleu.com/index

Amazing stuff in there.

This is also very nice: http://www.dhteumeuleu.com/the-momentum-equation

This apparently seems authored by vasanthk 8 days ago (see github link). http://git.io/AY78

From 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)

Got it. Thanks.

How can this be achieved with so little code? I was expecting thousands of lines. It's like 100.

If 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.

The 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)

This is cool. I'm freaked out that the statue is in the reflections but not in the room....

What if... you are the statue?

mind blown

This is broken in firefox

What is broken in Firefox? Looks pretty much the same as in Chrome. Firefox 37 on Mac OS that is.

On linux it's very slow and has glitches on firefox 45 (iceweasel); good on chromium.

Really nice.

Some glitches in desktop Safari 8 and it crashes my poor iPhone 4S repeatedly.

IPhone 5s, ios 8: crashes the page, then forces a system reboot. :/

iPad 2 iOS 6, stable

Do not look away. Do not blink.

Quite beautiful, code and result.

Once I see the demo I had exactly same feeling!

So I made this: http://demos-sxx.rhcloud.com/apparently-transparent/

When I try to load it, the images only load part-way. :(

I expected a woman in black. This could be made quite scary. Great demo.

Its an angel statue. much scarier. Don't look away! :)

Insane.

wow, is that just pure css ? or something else ? awesome dude !

Rendering us CSS3 based, but there's some JS handling the camera, mouse and stuff.

Reply on news.ycombinator.com