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]
Android’s stock browser supports the range input type, but in versions 3.x4.x and below (not sure about Android 4.x), it doesn’t actually display the UI. It does, however, support parts of the Shadow DOM. That means we can style this element, and give our users a visible control. The image below shows a rather garish [...]
[7 Feb 2012]
During my three years at Armchair, I worked on a few ActionScript 3.0 projects. I knew some ActionScript 2.0 when I started, but ActionScript 3.0 was new for me. It is object-oriented and requires event-driven thinking — two skills frankly, that I am still developing. They’re also two skills you should be developing, as they’re [...]
[3 Oct 2011]
I came across an issue recently while trying to transition from left: 30px to left: 50%. The transition appeared to work, but it wasn’t smooth and transition-like. It was jumpy. Worse yet, another item I applied a transition to in the same document worked perfectly. It’s starting left value? 0px. Confusing, right? Not really. Browsers [...]
[28 Sep 2011]
Transitioning between an ‘open’ state and a ‘closed’ state when the height of your content is variable (making a transition of the height property inadequate). What makes the magic? Using height: auto, and transitioning the min-height and max-height properties instead. View the demo, or study / steal the code. This example makes use of CSS3 [...]
[26 Sep 2011]
Many features of JavaScript/DOM frameworks are being incorporated into the browser natively. In my last post, I talked about the Selectors API. In this one, we’ll look at classList. classList makes it much easier to work with elements and class names. With it, you can: Add, remove, and toggle classes; Retrieve the class name at [...]
[15 Aug 2011]
DOM Scripting is sometimes clunky. Consider the retrieval of elements with a particular class name. The code might look like this: var p = document.getElementsByTagName(‘p’); var newsitems = []; var i; for(i = 0; i < p.length; i++){ if( p[i].className == ‘newsitem’ ){ newsitems.push( p[i] ); } } In the example above, we’ve retrieved all [...]
[12 Aug 2011]
Shout out to Rick Ross for his pronunciation because “bawse” > “boss.” What Mazzola’s CSS3 buttons look like in Opera 11.10. In January, Chad Mazzola posted a Thoughtbot article titled Make CSS3 buttons like a boss (via nico604). It is a great read for designers, but it does have one glaring omission: no Opera support.* [...]
[17 May 2011]
Examples of CSS gradients are cropping up in the wild, and with good reason. CSS gradients: don’t require the additional HTTP request of an image file. are easier to modify than image files. “weigh less” than most image files. That’s the ideal, at least. In their current state, gradients are actually a hot mess. The [...]
[6 Apr 2011]