Tilted: HTML Elements Become Parallelograms With Maskew

You know that you can tilt HTML elements into the shape of a parallelogram using the CSS3 property "transform". Nice, at first sight. But then, calling "transform" on a picture leads to tilting the picture itself. Uncle Hugo is not amused about his new skewed look. And you know, it is his corporation you are preparing the web site for. To save you, I have found the JavaScript library Maskew. Maskew skews elements into parallelograms too. But it does not skew the content, only the frame. Uncle Hugo himself will not tilt (at you) this way... Some Examples for Maskew's Masquerade

Nifty Frames, Easily Created

Freeforms for HTML elements are limited, even CSS3 does not break down all the borders. With minimum effort we are able to create circles, ovals and rectangles to mask pictures and other elements. Now with Maskew and thanks to JavaScript we can mask elements easily using parallelograms, too. Operating Maskew is simple. Having embedded the small library, weighing in on only 5kb, you call it on any given element like this::

var maskew = new Maskew(document.getElementById("photoofunclehugo"), 10);

The Maskew object needs two variables. The first variable contains the element, the effect is supposed to be invoked on. The second variable defines the angle. Valid values range from 0, which leads to a rectangle, and 45 degrees. Although Maskew comes without dependencies it can be used as a jQuery plugin too. So why not take the easy path, if you have embedded jQuery anyway?

var $maskew = $("photoofunclehugo").maskew(10);

Mouse Actions on Maskewed Elements

If you want to give your elements a little dynamics, you should add the option touch. Touch allows for the change of angle using the mouse. Keep the right mouse-button clicked and drag the image over. A change in the cursor displayed tells you whether this possibility is active:

var maskew = new Maskew(document.getElementById("photoofunclehugo"), 10, {touch: true});

Conclusion: Maskew offers a nice effect to bring pictures and other HTML elements into the rather unusual shape of a parallelogram. Variation in routine is always a good thing, isn't it. (dpe)