• 201118 Mar

    For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path.

    Of course it isn’t an option to do all this transformations manually, it would kick us back into the pre-DTP-era in terms of labor intensiveness. Therefore I took the challenge to build a tool for CSS text warping myself. Through my AS3 experiments I already had enough knowledge of bezier-math to find out the proper angles and positions. Unfortunately CSS3 doesn’t offer us something like :nth-letter, so every letter must be wrapped into a new span for now, which is the recommended practice for in-word letter styling by the W3C. Anyway I’m not absolutely happy with this solution and am currently working on a Javascript to do the warping dynamically. I will post it here when I’m finished.

    The tool allows you to attach any text to an arbitrary bezier path or a circle. Click “Generate HTML” to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.

  • 201108 Feb

    Even though we’re definitely living in the Flickr Age (apparently that’s the one that comes right after the Age of Aquarius), there’s still something so lovely about being able to spread a big boxful of photos over my kitchen table. In fact, my favorite screensaver does a pretty good job of emulating this — it’s the one built into MacOS X that grabs photos from your iPhoto library, and scatters them gradually all over the screen in a nice, messy pile.

    Could we achieve this with CSS3 alone? I bet you’re already thinking of ways to make that work. Unfortunately, the versions of Firefox and IE that will support them are still in beta — and even when they do come out, we all know how long it takes the world to upgrade their browsers. For now, let’s look at a hybrid approach…

Hosting by: