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
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 […]
Damaged Photo Tutorial – Costica Ascinte Style
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”.
Gravity Forms Black Magic
Gravity Forms makes my list of Non-Programistan tools. I haven’t seen quite enough posts celebrating the fact that Gravity Forms can do magic. The key feature at the moment that is kind of blowing my mind is the ability to use modifiers on the submissions fields— the ability to have the label (what the user sees/answers) be one thing and the value be something entirely different. It has the potential to enable some SPLOT like activities without the coding on the tool maker endI know Alan Levine. Alan Levine is a friend of mine. I am no Alan Levine. . . . I know that sounds like nonsense but just follow me a bit . . . It’s easy to miss the checkbox that turns on the values. You can see it in the fairly annoying GIF above. The cool thing is you can put virtually anything in the value field- images, HTML chunks etc. This plus the ability to create content templatesThink mail merge . . . gives you the ability to have user form interactions create some fairly sophisticated content.You can also chain forms and use variables from the forms in the URLs which would enable some wild options with Choose Your Own Adventure style progressions. In this example the user selects “Awesome” as the answer to a […]
[…] 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 […]