Juan R Labrada

Experiments

Triangle offset-distance animation

The triangle is animated using a combination of offset-path, offset-anchor and offset-distance properties. The offset-path defines the path, and the offset-distance the position within the path.

Original

Car Animation

The car is animated using the offset-path css property.

Original

Path Animation

The cyclist is animated using the offset-path css property.

Original

Text Wave Effect

Nice and simple effect in SCSS using before and after directives.

Original

WAVE

Text Animation

This animation makes use of blur and letter spacing.

Original

blur word

Glow Animation

This is a simple effect that makes use of SVG filter to produce the glowing effect.

Original
HOVER ME

Glowing Loader Animation

This is a simple effect that makes use of SVG filter to produce the glowing effect.

Original

Glue Contrast

This experiment mixes up a contrast filter with a blur filter. In the right proportion it accomplishes this nice effect.

Smoke Text Hover

Nice and simple effect in SCSS using hover, filter and svg animation.

Hover

Smoky Text Animation

This smoke effect is based on text shadow blur animation. The text color is transparent and the shadow white. By rotating the text and increasing the blur a smoke effect is created. This is increase by making different the animation for characters in even position.

Original
EXPERIMENT

Contrast Animation

Nice and simple effect in SCSS using mix-blend-mode.

Original

Multi Word Animation

Simple effect mixing up contrast and blur filters.

Senior
Software
Dev
Labrada

Font Variation Animation

Experiment that animates the font variation settings.

Original
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT
  • EXPERIMENT

Flame

This is effect uses a conic gradient rotating in the :before element and a smaller dark element in the :after in order to pull off this.

Original

Overflow animation

Similar border animation but using Overflow.

Original
Hover me
Hover me

Clip path animation

Similar border animation but using Clippath.

Original
Hello
Hello

Fieldset and Legend

This experiment uses relative unknown html tags 'fieldset' and 'legend' to pull off the effect of the text on the border.

Original
CSS fieldset
HTML element
JavaScript
TypeScript

Bright Border

This is effect uses a conic gradient rotating in the :before element and a smaller dark element in the :after in order to pull off this.

Original

Rainbow Border

This uses 4 linear gradients extended to four colors

Original

Weird button

Solving problem from CSSBattle.com

Yellow Tears

Solving problem from CSSBattle.com

Border Animation

Nice and simple effect in SCSS using hover, before and after directives.

Original