The CSS3 transform property can do some really cool things – with it, web designers can rotate, scale, skew and flip objects quite easily. However, in order for designers to have fine-grained, pixel level control over their transforms, the matrix() function is hard to beat. This post explains what it does and the math behind the code. It also includes a tool to help you create matrix() transforms easily using HTML5 Drag and Drop for the user interface and the Sylvester JavaScript library to do the mathematics needed to calculate the matrix values so you don’t have to (in case you have difficulties with math, or if you just are lazy and don’t want to be bothered).
Read the whole article »
Ruby Characters, although used originally to help people read complicated Chinese and Japanese characters, can also be used to annotate all types of information to written text. This article shows how you can use it in browsers that support it, but also in ones that don’t using a simple stylesheet.
Read the whole article »
The IE Transforms Translator will allow you do Cross Browser CSS3-style Transformations without using a JavaScript library like cssSandpaper.
Read the whole article »
Have a font that doesn’t have an italics variant? Does your browser try to attempt to “obliquify” it (badly) or not do anything at all? There is a simple solution to this problem using CSS3 Transforms.
Read the whole article »
Ever had a problem with using IE’s Alpha Visual Filter and getting blocky text? A solution has been found, and it doesn’t use JavaScript. I expect to hear a sigh of relief from many developers.
Read the whole article »
The seemingly impossible task of coming up with color codes off the top of your head can be done easily using CSS3’s hsl color notation. Read how you can use this “human-friendly” and how it can work in the few browsers that don’t support it natively.
Read the whole article »
Next generation web forms using HTML5 is hard to do today due to spotty browser support. I demonstrate how a suite of JavaScript libraries can be used to help us use HTML5 Forms today.
Read the whole article »
One thing HTML5 forms can’t do is dynamically show and hide form elements according to the data that the user has already entered. My new library, visibleIf gives you a very easy way to do this using the HTML5 data- attributes.
Read the whole article »
In the first in a planned series of posts, I update cssSandpaper with new features. This week I add IE support for translate() support to CSS transforms and alpha channel support to linear gradients.
Read the whole article »
Although I have been doing a lot of work on cssSandpaper lately (JavaScript API for cross browser CSS3 animation anyone?), I have also spent a little time on an equally worthwhile project CSS3 Please. While cssSandpaper tries to give developers an all-in-one interface in which to do transforms, gradients and other nifty effects via simple CSS and JavaScript, CSS3 Please gives developers the opportunity to fill in the blanks of a stylesheet and see how CSS3 properties can be coded without the aid of JavaScript so that they work across the browsers that support it.
Read the whole article »