3 ms·

Isometric text with CSS3

56 points by Kenan 14y ago

Cyranix 14y ago
Looking forward to digging through the source code on this one. Pleasantly surprised that text selection with both mouse and keyboard worked intuitively and smoothly (Ubuntu/Chrome) -- usually I'd expect this kind of trickery to break down at some boring edge case like this. Same for zooming with Ctrl+mousewheel.
powrtoch 14y ago
It's really unfortunate that this would be so hard to use in production due to lack of a suitable IE fallback. If a browser doesn't support @font-face, for example, you can always fall back to a standard font. For isometric text though, lack of support would likely disrupt the page layout so badly that the only fallback solution would be images. That said, as easy as it is to think of sites where isometric text would be a cool design element, I can't easily think of an application where it would need to be actual, editable text. Perhaps if you had a heavily futuristic themed CMS site...
- TazeTSchnitzel 14y ago
  Editing isometric game worlds, perhaps?
mp3geek 14y ago
Interesting firefox will do the isometric text, but not when its the shadow
- gkoberger 14y ago
  This site uses the never-official-and-now-removed skew(x, y) rather than the correct way, skewX(x) skewY(y).
  - asto 14y ago
    This is correct. More on MDN: https://developer.mozilla.org/en/CSS/transform#skewX https://developer.mozilla.org/en/CSS/transform#skewX
vegashacker 14y ago
Is this related to this project? http://www.themaninblue.com/experiment/Cubescape/new.php http://www.themaninblue.com/experiment/Cubescape/new.php Design looks the same.
- dangrossman 14y ago
  I don't see the similarity, aside from the 3D perspective which is the point of the demo.
Smudge 14y ago
Very similar to http://beta.theexpressiveweb.com/css3-web-fonts/ http://beta.theexpressiveweb.com/css3-web-fonts/
Foy 14y ago
I think if there was too much of this anywhere my neck would get a major kink in it. The specific font choice didn't help. It's cool that this is _possible_ however, just not so cool for accessibility, or readability.
- leberwurstsaft 14y ago
  I'd say it may even be contributing to accessibility, precisely because of the use of CSS to achieve a desired look instead of falling back to imagery. This allows to disable styles or rather allows screenreaders to still work their way through every bit of information. But yes, for visual readability its quite the horror. So better apply it sparingly.
rorrr 14y ago
Fails in IE9 Half-fails in Firefox 14.0.1 (Win7)
- rplnt 14y ago
  Surprisingly works in Opera.
msujaws 14y ago
This site fails to use unprefixed css properties when it uses the prefixed versions, so when newer browsers view the page they get a partial experience.
chinchang 14y ago
Nice! This can be used to make a really cool isometric website. Something similar but in terms of isometric blocks: http://kushagragour.in/lab/isoblocks/ http://kushagragour.in/lab/isoblocks/

56 points by Kenan 14y ago

Looking forward to digging through the source code on this one. Pleasantly surprised that text selection with both mouse and keyboard worked intuitively and smoothly (Ubuntu/Chrome) -- usually I'd expect this kind of trickery to break down at some boring edge case like this. Same for zooming with Ctrl+mousewheel.

powrtoch 14y ago

It's really unfortunate that this would be so hard to use in production due to lack of a suitable IE fallback. If a browser doesn't support @font-face, for example, you can always fall back to a standard font. For isometric text though, lack of support would likely disrupt the page layout so badly that the only fallback solution would be images. That said, as easy as it is to think of sites where isometric text would be a cool design element, I can't easily think of an application where it would need to be actual, editable text. Perhaps if you had a heavily futuristic themed CMS site...

TazeTSchnitzel 14y ago
Editing isometric game worlds, perhaps?

mp3geek 14y ago

Interesting firefox will do the isometric text, but not when its the shadow

gkoberger 14y ago
This site uses the never-official-and-now-removed skew(x, y) rather than the correct way, skewX(x) skewY(y).
- asto 14y ago
  This is correct. More on MDN: https://developer.mozilla.org/en/CSS/transform#skewX https://developer.mozilla.org/en/CSS/transform#skewX

vegashacker 14y ago

Is this related to this project? http://www.themaninblue.com/experiment/Cubescape/new.php http://www.themaninblue.com/experiment/Cubescape/new.php Design looks the same.

dangrossman 14y ago
I don't see the similarity, aside from the 3D perspective which is the point of the demo.

Smudge 14y ago

Very similar to http://beta.theexpressiveweb.com/css3-web-fonts/ http://beta.theexpressiveweb.com/css3-web-fonts/

Foy 14y ago

I think if there was too much of this anywhere my neck would get a major kink in it. The specific font choice didn't help. It's cool that this is _possible_ however, just not so cool for accessibility, or readability.

leberwurstsaft 14y ago
I'd say it may even be contributing to accessibility, precisely because of the use of CSS to achieve a desired look instead of falling back to imagery. This allows to disable styles or rather allows screenreaders to still work their way through every bit of information. But yes, for visual readability its quite the horror. So better apply it sparingly.

rorrr 14y ago

Fails in IE9 Half-fails in Firefox 14.0.1 (Win7)

rplnt 14y ago
Surprisingly works in Opera.

msujaws 14y ago

This site fails to use unprefixed css properties when it uses the prefixed versions, so when newer browsers view the page they get a partial experience.

chinchang 14y ago

Nice! This can be used to make a really cool isometric website. Something similar but in terms of isometric blocks: http://kushagragour.in/lab/isoblocks/ http://kushagragour.in/lab/isoblocks/