SVG Partial Blur and iOS Style Translucency

SVG TranslucencyIt's one of the lesser known features of SVG filters that they can be masked. Here's how to apply a partial blur to images and SVG elements. This way it's possible to create some nifty effects like tilt-shift or true iOS style translucency.more

The SVG Filter and why it’s awesome

SVG Filter EffectI had the honour to write a post over at Smashing Magazine, where I take a closer look at SVG filters and the phantastic possibilties they offer designers to create astonishing type effects.more

The 4 Slice Scaling Technique for SVG

4 Way SlicingThis is a method to create highly flexible SVG images from 4 overlappping tiles. Learn it and then never go back to traditional CSS background images again.more

Everything is Relative. The Art of the Adaptive Image.

ZombieIn responsive design it's not only about how big an image will display and which density we must feed to the browser. The image itself must be adaptive, change its content according to the context. In loose order I will try some not so common adaptive image techniques here.more

Finally! csswarp.js for dynamic Text warping

HTML text warpingFinally the first incarnation of csswarp.js is ready. Now it's possible to have warped text that follows a path even when content is served dynamically. An extensive set of configuration options gives you the ability to control every aspect of your warp.


Better CSS Sprites with SVG


SVG CSS sprites offer some possibilities for webdevelopers that are superior to the "classical" CSS sprites. With SVG it is possible to get access to much needed properties like "background-rotation" or "background-opacity" that currently are missing from the CSS spec. This article shows how SVG can give us additional useful CSS tools for our frontend coding tasks.


Updated: traqball 2.0

traqball 2.0Finally updated traqball.js, my little js lib for gimbal lock free 3d rotation to version 2.0. Impress friends and family with deceleration, easier configuration and multiple trackballs on a webpage.


Fresh from the Lab: CSS3 Text-Warping

HTML text warping

My latest experiment: this little web application will make it easy for you to "warp" HTML-text. Create native text that follows the flow of an arbitrary bezier path or wrap it around a circle like you do in Illustrator.


Showcase: Pop-Up Book in HTML and CSS

Pop-up book

A little showcase, using all the latest CSS-stuff that makes CSS so much fun to work with these days: animations, transitions, transformations, 3D....