By now, you probably know it’s possible to use media queries in SVG. As with media queries in HTML documents, you can use CSS to adjust layout — or in this case, things like stroke and fill — based on the width of the document view port. With SVG documents, of course, the viewport is [...]
[20 Apr 2013]
Transformed elements in Firefox sometimes appear with jagged edges. The anti-aliasing isn’t as smooth as what you find in Webkit-based browsers or Internet Explorer (Figure 1). Figure 2. An image with transform: rotateX(-45deg);. View a larger version. The good news is that there’s an easy fix for this. It’s essentially the fix used to address [...]
[13 Apr 2013]
One of the trickier parts of 3D transforms is understanding how the scaleZ() and scale3d() functions work. When applied to an element, they will often appear to have no effect. But then at other times, or in other combinations, they will. Confusing right? So what’s going on? Well, it has to do with transformation matrices, [...]
[24 Feb 2013]
Let me say this up front: I don’t know what Opera has up its sleeve. I’m sure you’ve heard some things. But it’s not hard to find people who think everyone — meaning Opera, Microsoft, and Mozilla — should switch to WebKit. In WebKitopia, the thinking goes, we’d have One True Browser Core that magically [...]
[1 Feb 2013]
This is old(ish) news to those of you who have been paying attention: support for the @supports API — CSS.supports() — landed in Firefox late last month. So far, a complete implementation is only available in Firefox Nightly builds. It should show up in a Firefox release sometime soon. Opera included full support for @supports [...]
[17 Jan 2013]
Opera’s border rendering on elements with a rotate transform applied. Opera 12.02 (and older versions with support for transforms) has a rendering bug in which borders of elements that have a rotation transformation applied will appear striped when placed on a colored background. The image above shows this bug in action. The code below shows [...]
[12 Oct 2012]
A screen shot of what a photo looks like with a hue-rotation filter applied. I spent this weekend getting my feet wet with CSS Filter Effects, in particular, the filter functions. They’re easy and fun to use, allow us to do really neat effects in the browser without requiring <canvas>. The current version of the [...]
[2 Oct 2012]
Support for 3D CSS Transforms has made it into most browsers in an experimental form. Opera’s support, however, is still busy baking. Unfortunately, 2D and 3D transforms share at least one property in common: transform (though prefixes are still required for now). Testing for it won’t exactly tell you whether the browser supports 3D transforms. [...]
[4 Sep 2012]
I was honored to be a part of this year’s CSS Summit virtual conference. I managed to survive a case of nerves, crashing software, and the awkwardness of doing a conference when you can’t see your audience. But the best part is that no one could tell whether or not I was wearing pants . [...]
[1 Aug 2012]
One of the things I didn’t cover in much depth in my MinneWebCon talk about CSS transitions and transforms is the matrix. That’s mostly because it involved some linear algebra and math that I don’t think I’ve touched since high school, if ever. (Seriously, it was so long ago that I can’t remember whether my [...]
[23 May 2012]