CSS3 Isometric text | Hacker News Reader

CSS3 Isometric text

midwinter-dg.com

147 pointsdg-mid15 comments

Enter

    javascript:document.getElementsByClassName('text-block')[0].contentEditable=true

into your address field and you can edit the isometric text! Pretty neat.

Enter

javascript:document.querySelectorAll(".skew1")[0].contentEditable=true;document.querySelectorAll(".skew1")[0].onkeyup = function(){ document.querySelectorAll(".skew2")[0].innerHTML = this.innerHTML };

And you can edit the big one in the top left (and its shadow!).

Really amazing what HTML5 is capable of doing (and what people is capable of do with it of course)

Genius! I never would have thought of this. I may well have to incorporate it in to the demo :o)

The best thing is the cross-browser compatibility. Normally, you see fancy things that only work on Webkit browsers or some such, which gives it little application.

I particularly wanted to create something that was cross-browser, however there is still the problem of those with older browsers :(

I like it how the blue text selection also appears isometric!

Works on Safari for iPad.

Yes, and tap and hold to get the magnifier for a very cool effect.

My favorite part is that it even works on my (android) phone!

Horror of horror: it works with Blackberry's browser.

Very cool. I love the showmanship in the demo :)

Thanks, I enjoyed creating it -- hope someone finds it useful!

Good job. This just gets me more excited about how advanced browsers are getting, and that more tools are available to further unleash a designer's creativity.

Works in Firefox 3.6 which is nice too.

Simply amazing.

Reply on news.ycombinator.com