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.
Related posts
Better Animated GIF Tutorial for PS CS4
I’ve been fairly obsessed with animated gifs lately. My apologies. It was really If We Don’t, Remember Me that had me stuck in this loop. This person churns out such really interesting visuals, I couldn’t rest until I got something fairly close. I feel like the image above, while not perfect, is close enough to let things rest for a whileThe gif is from some beach something something video. I was just randomly watching old movies on Netflix instant watch to make capture quality better and easier.. Initially, I just thought IWDRM was just a master of choosing just the right clip. Now, that part can’t be discounted but there’s a lot of other things that go on to improve the final product. While fairly simple, I’ll try to detail what I did and how I eventually learned to make it more economical time wise. I’m not a PS guy, so there may be even better ways. If you know them, let me know. This is tilted towards CS4 but I imagine the concepts will make sense if you use other versions or other software. Clip your video down in Quicktime or something like that. You can edit in the PS import tool but it’s awkward. Import the video files to layers. The animation window will be at the bottom. […]
Email Templates in GMail
Another quick and easy option if you end up sending similar patterns of responses via email. We also use a more aggressive option that uses form submissions etc. but this one doesn’t require anything more than GMail account.
Keynote “Flowing Ribbon” Tutorial
This is just one of those weird little things that might come in handy for someone someday plus I’m always happy to see software do things that are just a bit off standard. Part of our online summer courses is creating course trailers. One of the instructors wanted to portray the connection between stages in a persons’s life as connected by a moving ribbon that links different representational photographs together. A cool idea and one that I wanted to support. Given we’re dealing with a large number of people, the goal was to do something that was quick and relatively easy. I may yet choose another piece of“Piece of” sounds really weird. software but I managed to do the example above in Keynote (Apple’s version of PowerPoint). I’m pretty sure you could do it in PPT as well. Step one is to put the image in and draw some lines with the vector tool. It’ll be easiest if you end the ribbon in one of the main directions of movement (up, down, left, right). In this case I chose down. The vector drawing tool in Keynote is quite different from what you’re used to in Illustrator or Photoshop or anything I’ve ever used. I kind of like it but it’s different. Once you have that set up, select the line […]
[…] been fairly busy. That said, I’ve been meaning to play around with CSS animation thanks to Tom Woodward’s post last month featuring beer bubbles. And after talking with Bryan Mathers about more seamless animation of the artwork […]