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
Post Documents for Student Comments
Students writing short papers and posting them for comments from other students is a fairly common pattern among VCU faculty. It’s a nice entry point because it doesn’t require any radical rethinking but still starts to expand the audience for the work, has possibilities around peer review, and is a possible gateway to writing on the web more natively. There are lots of ways to do this. I’ll break down one option path here. The faculty member wants students to keep writing in Word. There’s no immediate interest in writing in WordPress or in Google Docs. The goal is to have comments made by other students on the document as a whole (not specific to words/phrases/sentences/paragraphs). Initial Setup – The Form We setup a Gravity Form to create a post with a document embedded in it using Google’s document viewer. You can explain it as mail merge into a WordPress post or if that doesn’t help you might show them this image as most people have been on the failure end of a mail merge attempt. You’re probably want a minimum of three fields for the user to fill out and you’ll have two that are invisible to them. The three you’ll need for the student are their name, the title of the document (the post will get this name […]
Radioactive Collage Maker
Radioactive is the book that VCU’s first-year students are reading. It’s an interesting book with interesting art and collage playing a major role in the design. I hadn’t really looked at it until this morning but I ended up in a conversation and an idea came to mind. “What if we could deconstruct elements of the text (words and images) and give them to students to recombine in interesting ways?” It seemed like a fun thing to do and within reach based on work I’d done earlier with Google Spreadsheet Fridge Poetry but I wanted a few more capabilities to help people create better visual products. I took my phone and took a bunch of quick pictures of pages from the book that seemed interesting and easy to cut out. That took about 10 minutes to photograph and drop the backgrounds.The PNGs are huge at the moment but I’ll fix that in time. Another 10 minutes and I had a working prototype using the old Google Fridge Poetry. Not bad but I wanted to be able to rotate/resize images and be able to save the results as an image file (something I tried but failed at doing last time around). Resizing It turned out resizing was built into jQuery with the resizeable. $( “.resize” ).resizable(); Nice but it resizes the […]
RVArts – Dealing with Dates in WordPress
We have an awesome general education course starting this semester called Cultural Passport (aka RVArts). The goal is to get students involved with the community’s cultural events – participating, promoting, reviewing them. The web side of this ends up being pretty interesting. See their video below for more details on the course. When we started this conversation last year, I thought I was going to go the Gravity Form submission routeI thought I wrote a full tutorial on this but can’t find it. I often have unrealized good intentions though . . . and use a js library to make it possible to add the events to various calendars. Like most projects, particulars shifted and we started changing things pretty radically right before winter break. We ended up shooting for full WordPress editor access for students to create events and the desire to write three different types of responses (interviews, reviews, and features) that would be associated with a specific event. Also, like most projects, this was all a bit beyond what I’d ever done before. I started off thinking I’d create a custom post type for events. I was trying to make up my mind between using Advanced Custom Fields and CMB to help do that when I realized I hadn’t really thought about repeat events. The complexities involved […]
[…] 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 […]