3-D text

by Jason Robb

Apr 4, 2012

LessCSS and Lettering.js Part 2 - I'm using the LessCSS mixin from the previous shot with Lettering.js to create rainbow text (to follow this shot).

2,132 views

5 Responses

Jason Robb

Things going on in this shot:
- Lots of text-shadowing, 16 to be exact... I wonder how bad that effects browser load times? hmm...
- LessCSS mixin to aid in the design, i.e. making it ridiculously easy and fun
- Lettering.js to wrap each letter with a span.char1,2,3,etc.

Using LessCSS makes designing in the browser so friggin' easy.

I doubt I'll actually use this on my real site, but it was a rather educational experience overall. Yay.

I've uploaded (is that the right verb?) to Github, enjoy: https://github.com/jasonrobb/3D-text

about 1 year ago
Anthony Garand

Pull request time!

1likes
about 1 year ago
Pro James Wilson

That's pretty sweet, the best 3d text rendering done w/ CSS/JS I've seen yet. Now to jump over to GitHub to see how you styled it.

1likes
about 1 year ago
Nick Cooley

Very cool... SImilar I think, to what's been done with omg-text on the Sass side: http://jaredhardy.com/omg-text/

Nice work!

about 1 year ago
Jason Robb

Thanks for the support folks. I'll get back to you about the Git pull requests this weekend. Cheers!

about 1 year ago