Amongst the many annoying limitations of pseudo elements, none were quite as confusing as the fact that they didn’t take transition or animation properties. No more (once, of course, this makes its way into public releases).
Ever tried to style an image that has irregular bounds (like a trapezoid) with a box shadow? You’ve run into the biggest limitation of the venerable box-shadow; the shadow is always cast by the square bounds of the element. This limitation can be frustrating if you mock up complex shadows and end up having to bake them in.
No more! (Well, soon no more. Filters only work in webkit right now). Just add a CSS filter drop-shadow and you’re set with animatable, resolution independent, transparency aware drop shadows. Here’s a spinner with a drop-shadow. Exciting!
I’m using this on my home page on a handful of svg elements. Can’t wait to see what the wider web does with this tool.
Another day, another Webkit bug. Apply a scale transform to an element that has an SVG graphic as a background and you’ll see bitmap scaling artifacts. Firefox does what you would expect is supposed to happen and continually rasterizes the SVG at new scales. Here’s a demo fiddle.
There’s no work around that I know of.
One of the lesser known CSS properties I’m really excited about is
box-decoration-break. From the official spec:
When a box is broken at a page break, column break, or, for inline elements, at a line break, the ‘box-decoration-break’ property specifies whether box fragments are treated as broken fragments of one continuous box, or whether each fragment is individually wrapped with the border and padding.
Exciting. Page-break-inside works in Safari 6;I’m using it here. One look at the print preview is enough to get you excited about all of the possibilities better print control will bring.
This bug is a frustratingly easy to trigger and yet it’s been around for years. You can get around it by tricking the browser into using the GPU for the transitions, but it feels really hacky. Other rendering engines don’t suffer from this issue.
The new version of my older brother’s site has launched (after a two day delay to wait for 1&1 to change DNS settings). It uses lots of neat technology under the hood; pushState, CSS filters, and SVG graphics all make an appearance.
Apple has released videos of all this year’s WWDC sessions, not four days after the conference ended. There’s not much on the Web track this year (6 sessions), but the topics covered are interesting regardless. “Advanced Effects with HTML5 Media Technologies” covers some interesting new tech that’s landing in Safari 6 including the new Fullscreen API, Media Controllers for syncing multiple media elements and CSS Filters. Other’s I’ve yet to watch cover remote inspection of IOS devices with the new web inspector and “Delivering Web Content to High Resolution Displays”. Cool stuff, and all 100% free.
While working on a recent project, I found myself in need of a spinner graphic. As I think most people do, I hit google looking for something that would work, and while 37signals’ solution was neat, I wanted something that would add minimal non-semantic markup and would be easily scalable.
So, I made this SVG spinner.
Here’s the actual SVG file.