I spend every minute of the day looking at amazing things that other people are doing on the web. Studio buddy Glen helped convince me to compile a list.
- Redpen, by Matthew Farag — I already used this with a couple of clients this week.
- Addy Osmani wrote about the front end performance on Pitchfork’s Daft punk feature, which is beautiful, but jankkky-as-a-motherfucker.
- Two crazy, stupid incredible CSS demos #1 #2
- Aaron Shekey with a Stunning post about why Adobe reflow was created. (I want my blog to look like this)
- Playground Inc’s site is pretty
Its Friday! Break out the beer & Tumblr!
Writing Gallery CSS was a total experiment, I didn’t want to have to use jQuery, and some “do everything” plugin. So I sat down and forced myself to find a working solution. Through this process, I’d inadvertently learnt a lot of tiny details… which I think is what every good open source project does.
I took those learnings and recorded a 40 minute, 720p screencast, it covers build tools, process, css animation & transitions, and some other rad tips along the way. Not bad, right?
So begins my experiment: Open source for free, $12 screencast to learn what I had to know to put it together.
Go get yourself a copy! (Please)
Recently I worked with Art Processors to create the “Replay” feature for The State Library of New South Wales’ “Curio” — Essentially, you get to see which exhibits you viewed at the gallery after you’ve left (you’re geotagged through the building as you explore).
One particular part of this build proved difficult, I thought it may be worth sharing — The polygonally (is that a word?) masked images:
To get this effect to work on webkit browsers, I was able to use the proprietary webkit feature:
-webkit-mask-image, with an SVG polygon image.
In Firefox (or browsers that actually handle SVG well) — I hand modified the SVG polygon image, adding a
clipPath that also contained a copy of the original
I also added some IDs so that the
clipPath and original
polygon could be referenced separately, then it was just a matter of changing the CSS so webkit would reference the
polygon and Firefox would use the
For some extra icing, I added a
transition: all .25s so that the
mask-size would be animated when changed.
Curio was a blast to put together, I can’t wait to see what ArtPro come up with next time.