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.
Suppose you had to build a web page pretty quickly (an hour or so) and suppose you had to have it mostly match the theme from some other site you had nothing to do with. You’ll want it to be responsive etc. You’ll do the whole University-brand identity thing. Suppose you’re a pretend web developer. Here’s my pattern (based loosely on actual events). Here’s the original page. The screenshot below was made with the Full Page Screen Capture Chrome plugin. Step One – Framing I’m using Bootstrap on this one because I’ve become decently familiar with it. I may use flexbox in the future but speed was the deal so I went with something I knew. I figured I’d echo the framing of the first site (which is pretty typical in any case)- VCU banner header with some navigation a big picture a couple of text blocks spanning about a 1/3 of the page the footer There’s some default navigation stuff I can paste in.I think the VCU brandbar js messes up the “fixed” aspect but I haven’t bothered to figure that out yet. From there I start to look at the body of the page as Bootstrap components. In my head I’m sketching it out in rectangles. In Bootstrap, that’s essentially Container>Rows>Columns. Everything is based on a 12 column […]
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.
flickr photo shared by JeepersMedia under a Creative Commons ( BY ) license I started to apologize for writing three posts on this and promising not to do any more but I reconsidered. This is my site. I’ll write whatever I want. Skip it if it bores you or exile me from your feed reader.Plus no one reads blogs any more. Shouldn’t you be on Twitter or vaping? Alan’s comment got me thinking that using spreadsheet formulas was not necessary and it felt awkward to me anyway. So I figured out how to do it all in the php. I’ll include the relevant portion of the code below. You can get the whole thing here. The key is substr_count which will find stuff in a string and count it. The other little piece is boolval which returns true if it’s greater than 0.