Beer Bubbles CSS
Another random conversation led to this experiment . . . it’s animated CSS which is pretty cool but I can’t take any credit for it.
I found this example on Codepen and then mainly gutted it to make what you see below (also a minor experiment with flexbox).
See the Pen CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tom (@twwoodward) on CodePen.
Inspired by the Noise Professor’s decision to make his animated GIF in Photoshop, I decided to play around with that tonight and ended up learning a good bit and with a much better process and product (fewer programs, higher quality). I didn’t know you could do this all in just CS4. Video to Images Capture video frames as stills to layers – you can even select portions of the video right in the import window. You’ll now have all the frames as images in individual layers. Animation Window Open up the Animation WindowNever opened this before Eternal Looping I set it to loop eternally. It’s right there in the bottom left hand portion of the animation window. If you forget you have the option to set this again when you do the final export/polishing. Frame Speed Shift click to select all the frames and you can change the animation speed all at once. Animate the GIF I saw this was impossible in a number of places and if you go to the normal Save/Save As location, it is. There is actually an option below that on the menu that is “Save for Web & Devices.” Somehow I never saw that. You’ll have Animated GIF as an option here. Polish It Up
I love the @Costica Acsinte Flickr photos. I like them enough to try to make one. cc licensed ( BY SA ) flickr photo shared by Tom Woodward Here’s a super quick video on how I did it. Essentially, steal beautifully broken chunks of those photographs and add them as layers to your photo. I did say “transfer” instead of “transform” and I use all Mac shortcuts. I am also sorry for having no idea how to say “Costica Acsinte” or “opacity”.