Augment Photos With CSS3 matrix3d() Transforms

July 16th, 2015 by zoltan · 1 Comment

teaser It’s possible to super-impose dynamic HTML content on top of a photos using 3D transforms to give the appearance that it is part of the picture. However, using a combination of translate3d(), scale3d() and rotate3d() functions to do this is difficult. This article discusses how to use the matrix3d() CSS transform with the Matrix Construction Set to get pixel-perfect 3D transforms easily and without any knowledge of matrix arithmetic. It also discusses the differences between matrix() and matrix3d(), as well as what fallbacks to use for browsers that don’t support transforms.

[Read more »]

Tags: 3d · CSS · CSS3 · matrix · matrix3d · transform · transform3d · transform3d · Uncategorized

Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS

September 24th, 2014 by zoltan · 1 Comment

With viewport units, you can describe width, height, font-size and other CSS styles as percentages of the viewport width and height. There are, however, a few nasty gotchas when it comes to using them in iOS Safari and IE9 and 10. They also don’t always play nice in CSS3 calc() statements and don’t work at all in IE Visual Filters. Using them in iframes can also be problematic. This post talks about how to work around these issues easily using a JavaScript buggyfill (not polyfill). I have used viewport units in production sites today, and now you can too, on any phone or device used in the wild today.

[Read more »]

Tags: CSS · CSS3 · IE Visual Filters · math · viewport units

How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together

September 2nd, 2010 by zoltan · 17 Comments

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 more »]

Tags: @font-face · ClearType · CSS · CSS3 · Fonts · IE Visual Filters

CSS3 Please – Another Great Cross Browser CSS3 Solution.

April 6th, 2010 by zoltan · 1 Comment

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 more »]

Tags: CSS · CSS3