Facebook Plunges Again
Tumblr 101: Tips And Tricks To Get Started
Type Folly is a very impressive CSS3 typography showcase application
Type Folly is a tour de force, showing how far JavaScript and CSS have come. When I first openend the page I got a canvas with all sorts of text, which looks like an image. But then I clicked it, and discovered I can drag stuff around.
Then I noticed the tool panes on the sides; they look like Photoshop tool panes, but are implemented in JavaScript and are fully functional. There are layers, and type properties, and containers sizes and whatnot.
You play around with the canvas just like you would with Adobe Illustrator (including font effects, etc). But the shocker comes at the end, when you get a fully valid CSS3 + HTML code which is the exact canvas you created. It's all done with JavaScript, CSS and HTML.
I'm pretty sure the fonts come from Google, which is a case in point for me. But even if they use some paid service, the point here is the tool itself, which you really have to play with to understand.
Comments
4
Subscribe to comments5hRreDDyJul 16th 2010 6:13PM
It kind of reminds me of the HTML5 demos that Apple put a little while ago. The typography examples that they put up were also very impressive.
I think the typography aspects as well as the photo gallery and transitions aspects are areas that have impressed me the most with the advent of HTML5/CSS3.
Mircea PiturcaJul 16th 2010 6:57PM
Apple did something few months ago. TypeFolly was already launched. They did called it an HTML5 demo but in fact it was just some Javascript and CSS3. I do believe typefolly is way more advanced. We even have an Undo/Reundo function that works on the actual page DOM and its entirely based on an HTML5 component.
Mircea PiturcaJul 16th 2010 6:51PM
Thanx for the great review Erez! Indeed typefolly.com uses some of the latest stuff out there. We run on a custom jQuery engine, use HTML5 components such as canvas, contentEditable, localStorage and CSS3. The fonts are real "live" web fonts served from Google WebFonts API, TypeKit and FontDeck. Everything in done in DOM. There will be much more really soon.
The ideea behind this project was to give a powerful tool for webdesigners that will allow to create beautiful type compositions.Each project can be saved in our database (if you are registered) or just exported as ready to go HTML+CSS. Whatever you create can be used on your site.
Thanx again for the review, have fun playing around!
CristiJul 17th 2010 1:33AM
You go brother. By your name you are Romanian like me! I wish you all the best in your efforts.