No point here really. I had no idea you could refer to an HTML attribute in a pseudo :before or :after with content: attr(attr-name). Mind blown.
Works on my computer, not so sure about yours...
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ Mac-ish Interactive Keyboard and Display.markdown
Last active
August 29, 2015 14:21
Mac-ish Interactive Keyboard and Display
Not sure why, but here. At least it's oddly responsive. #useless
A Pen by Jake Albaugh on CodePen.
Using the characteristics of Auld Lang Syne for the New Year.
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ Color Scheme Launchpad Grid Generator.markdown
Last active
August 29, 2015 14:21
Color Scheme Launchpad Grid Generator
I've been seeing so many damn color scheme grids lately. Here is a generator that takes color/name pairs and spits out a grid. Touching the grid items will select their hex code for easy copying.
Modify the colors array and column count to customize to your heart's content.
Using the flatuicolors color scheme for this demo.
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ Mouse Position Background Focus Effect.markdown
Last active
August 29, 2015 14:21
Mouse Position Background Focus Effect
A little demo of a technique I'm working on for a client to draw attention towards the center of the screen.
A Pen by Jake Albaugh on CodePen.
Clock animation entirely controlled in CSS. JS only to add the second, minute (0-59) and hour (0-23) class names on load based on the current time. Everything else is CSS. Theoretically, you could do this with server side templating and not need client side JS. Not that it matters...
Not perfect. will degrade over time as hour starts on the hour, not fraction of hour.
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ CSS Modal :target Selector.markdown
Last active
August 29, 2015 14:21
CSS Modal :target Selector
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ Random SVG Polygons Splotch Animation.markdown
Last active
August 29, 2015 14:21
Random SVG Polygons Splotch Animation
Randomly generated SVG polygons with CSS opacity animations.
Should have called this "BattDrain MemHog 5000"
A Pen by Jake Albaugh on CodePen.
ja-k-e
/ SVG Fibonacci Sequence Golden Spiral.markdown
Last active
October 31, 2017 03:56
SVG Fibonacci Sequence / Golden Spiral
Generates Fibonacci sequence and corresponding spiral with as many iterations as you see fit.
UPDATE: Animated and only using Sass and Jade
A Pen by Jake Albaugh on CodePen.
Counting up with ::before & ::after content. A Pure CSS Counter is probably completely useless...but it is possible.
A Pen by Jake Albaugh on CodePen.