Quite a simple technique: use
:after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto.
If you like this, you’ll definitely like these too:
Neat installation which projects a map onto tiles, and then morphs those tiles to make them resemble the actual changes in altitude of the map projected.
Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline:
If you like reading more than watching a video, a write-up is also available: Pixels are expensive →
Note: If you’ve been reading the posts here on bram.us tagged performance, you’ll most likely already know this stuff. It’s a good refresher nonetheless.
Google’s “Material Design” recreated using Keynote. Wasn’t even aware of the “magic move” effect Keynote sports. The
.key file itself can be downloaded right here.
Note: Ever since last year we’ve been seeing quite a lot of these type of animations being sported on websites. Be it animations linked on the current scroll position, animations triggered at a specific scroll position, or interfaces that transition from one state to the other. Recent developments such as velocity.js are accelerating the spread of motion design on the web, yet – still – I’m eagerly awaiting the (very powerful) Web Animations API. Luckily a Web Animations Polyfill already exists.
There are filmmakers we love and then there’s Michael Bay. Even if you dislike him (as I do), Bay has something valuable to teach us about visual perception. This is an exploration of “Bayhem” — his style of camera movement, composition and editing that creates something overblown, dynamic and distinct.
Watch this if you – like me – are a movie fanatic.