Pure CSS Gooey Morph
SVG not involved. Animating primarily border-radius, plus some opacity and basic transforms.
Blended Photo & Gradient Blob Animation
Blended photo & gradient blob animation. An animation using border-radius and unsplash image with SCSS, Pug.
Flickering Neon Sign Effect Using CSS Text & Box Shadow
This pen shows how the CSS text-shadow and box-shadow properties can be animated to create a flickering neon sign effect. Neon text and border color can be individually changed by updating their respective CSS variables.
Animated Border Gradient Effect
I've created an animated gradient border using CSS3 gradients and animations. I make changes to the background-position CSS property during animation to give the effect.
Border-Gradient Mixin
Implementation of border gradient that can be applied to elements with border-radius.
Border Composition and Animation
Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.
Button Border Slide Mixin
A Sass mixin for a link animation where the border slides around the link on hover.
CSS Only Border Animation
CSS-only border animation on hover. It needs a solid background in order to work.
An Arrow Always Point to a Certain Position
It's all about the CSS techniques: calc and border-radius. Resize the window to see the arrow change its body length, while still always point to a certain position.
Star Trek LCARS-Style Ghost Buttons
These buttons are inspired by the computer interface seen in Star Trek with a bit of added transition effects on hover. The left and right values define the numerator and denominator of the border radius for the transition effects.
