Pens from Zach Cole https://codepen.io/zachacole/ en nospam@codepen.io Copyright 2024 2017-03-13T22:14:58-07:00 Loading Bar https://codepen.io/zachacole/pen/oZwJgd https://codepen.io/zachacole/pen/oZwJgd Zach Cole

See the Code - See it Full Page - See Details

]]>
Loading Bar 2017-03-13T22:14:58-07:00
CSS Grid Spec w atomic span classes https://codepen.io/zachacole/pen/OWYmVJ https://codepen.io/zachacole/pen/OWYmVJ Zach Cole

See the Code - See it Full Page - See Details

Makes more sense to define an item's grid area by using reusable atomic classes to denote how many rows/cols the item should span.

]]>
CSS Grid Spec w atomic span classes 2017-02-17T19:01:50-07:00
Basic CSS Grid Spec https://codepen.io/zachacole/pen/YNMMog https://codepen.io/zachacole/pen/YNMMog Zach Cole

See the Code - See it Full Page - See Details

Playing with the very basics of defining a grid with CSS Grid spec, coming to a browser near you in... March 2017! (I think?)

]]>
Basic CSS Grid Spec 2017-02-17T05:36:19-07:00
Radar Bubble Animation https://codepen.io/zachacole/pen/qNwaZj https://codepen.io/zachacole/pen/qNwaZj Zach Cole

See the Code - See it Full Page - See Details

Wanted to recreate a little radar bubble with a tap/click animation.

]]>
Radar Bubble Animation 2016-08-19T00:41:57-07:00
CSS SVG Animation https://codepen.io/zachacole/pen/YqWNyG https://codepen.io/zachacole/pen/YqWNyG Zach Cole

See the Code - See it Full Page - See Details

Made a little SVG animation for a friend's website to add a little extra character.

]]>
CSS SVG Animation 2016-03-10T20:01:33-07:00
Hamburger Menu Animation https://codepen.io/zachacole/pen/dYEXqo https://codepen.io/zachacole/pen/dYEXqo Zach Cole

See the Code - See it Full Page - See Details

A demo of a hamburger menu animation

]]>
Hamburger Menu Animation 2015-11-23T20:26:07-07:00
Audio Waves https://codepen.io/zachacole/pen/ojVqbg https://codepen.io/zachacole/pen/ojVqbg Zach Cole

See the Code - See it Full Page - See Details

CSS animation of audio waves

]]>
Audio Waves 2015-11-19T01:44:51-07:00
Gradient Button Animations https://codepen.io/zachacole/pen/KdGzgb https://codepen.io/zachacole/pen/KdGzgb Zach Cole

See the Code - See it Full Page - See Details

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

]]>
Gradient Button Animations 2015-11-07T02:14:18-07:00
Form Field Demo https://codepen.io/zachacole/pen/LVjVvN https://codepen.io/zachacole/pen/LVjVvN Zach Cole

See the Code - See it Full Page - See Details

A simple form field demo that runs validations for each input, with animated guides for valid/invalid answers.

]]>
Form Field Demo 2015-06-14T17:47:17-07:00
SVG iPhone animation with CSS fill https://codepen.io/zachacole/pen/gpPogy https://codepen.io/zachacole/pen/gpPogy Zach Cole

See the Code - See it Full Page - See Details

Animating an outlined SVG iPhone, then backfilling the fitting pure-CSS iPhone graphic.

]]>
SVG iPhone animation with CSS fill 2015-05-10T19:55:05-07:00