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
Book Review Site via Angular and a Google Form
I had an interesting conversation with a pair of elementary school teachers. It led to me saying I’d put our two older kids on Good Reads in lieu of some less pleasant ways of documenting their reading. It’s not a place I’d necessarily drop a group of 3rd graders. As we spoke, I figured I could build a little version of one very quickly with Angular and a Google Form. It’s worth noting that once you set up one Angular page tied to a Google Sheet, you can just copy that over and make websites very, very quickly. It’s just a matter of re-aligning the json data. I hadn’t done anything with Angular in a while and while doing this I found out a few other neat little tricks that’ll be of use at some point. One was this slick star rating CSS option. It will show the star rating based on a div percentage. I really liked it but my rating scale was 1 to 5 and Google didn’t really support doing something with percentages. However, I didn’t realize you could do math right in Angular. It turns out you can and I did it like so. The entry.gsx$_cyevm.$t part is just the name of the data chunk that holds the 1 to 5 rating scale. I can divide […]
Bike Race Fortunes Randomizer
Richmond is going to host this bike international bike race in a few months. The more interesting part, for me anyway, is going to be 25 one credit courses each using the energy and activity of the bike race to power a particular disciplinary/interdisciplinary exploration. In the meantime, we wanted to make a coming soon page and I thought it might be amusing to randomly generate some cycling-related fortunes that could be sent out via Twitter if the person was sufficiently amused. That’s not a difficult task but it might help someone to see it laid out. The twttr.widgets.load(); was something it took me a bit to realize. You can see it in the script without it the Twitter button didn’t look right. The javascript . . . Sources for various elements Emma made the background image for the page and the wheel. Dan and Enoch submitted fortunes. Twitter button fix
Biology Field Journal – Gravity Forms + Google Maps for WordPress
Turns out this won’t work for what I originally planned but the pattern is sound. You can see the form here and examples of the form submissions here. You’ll need Gravity Forms (pay but well worth it) and Google Maps for WordPress but the idea should work for all kinds things. The original goal was to have structured posts from students and the ability to associate those posts with a point on Google Maps. After turning on the plugins, all the work is done in Gravity Forms. Initially, make a text entry fields for latitude and separate text field for longitude. Add all the other fields you want in the mix. In this case we added some categories to do with the environment, plant descriptions etc. Gravity Forms is fairly unique in that it has post elements for WP built in. I added the Post Body and Post Title fields at the bottom. Now we just need to create the content template that’ll mix our variables into the body of the post. You’ll notice in the image above that when you mouse over an element it displays the Field ID – in this case 2. That’s important as to add this field you’ll need to reference both the title and the field ID like so {Latitude:2}. The image below […]
[…] 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 […]