Канал: Ana Tudor

Grainy gradients/ backgrounds simplified

Grainy gradients/ backgrounds simplified

Pure CSS on scroll text inversion

Pure CSS on scroll text inversion

Pure CSS scroll animation

Pure CSS scroll animation

Möbius strip with CSS trigonometric functions

Möbius strip with CSS trigonometric functions

3 in 1: solve 3 coding challenges in 33 minutes (also explain solutions)

3 in 1: solve 3 coding challenges in 33 minutes (also explain solutions)

1 range input fancy slider bars

1 range input fancy slider bars

Soft triangle

Soft triangle

Reverse background on disc areas

Reverse background on disc areas

CSS hosting plans interface (no SVG, no images other than CSS gradients)

CSS hosting plans interface (no SVG, no images other than CSS gradients)

1 div soft loop

1 div soft loop

Creating and styling a range input with value and ruler

Creating and styling a range input with value and ruler

Pure CSS 1 div 💍 loader

Pure CSS 1 div 💍 loader

Uniform random dots distribution on/ throughout a sphere - the Maths behind

Uniform random dots distribution on/ throughout a sphere - the Maths behind

Uniform random dots distribution across a disc - the Maths behind

Uniform random dots distribution across a disc - the Maths behind

Order vs. chaos: pure CSS circular staggered grid animation

Order vs. chaos: pure CSS circular staggered grid animation

1 div pure CSS stripe fountain

1 div pure CSS stripe fountain

Pure CSS Icon Glassmorphism Effect

Pure CSS Icon Glassmorphism Effect

3 techniques in 1 video: candy ghost 👻 buttons

3 techniques in 1 video: candy ghost 👻 buttons

Pure CSS ⬡🌈🐍 animation

Pure CSS ⬡🌈🐍 animation

Pure CSS 🌈 dot animation variations

Pure CSS 🌈 dot animation variations

Pure CSS dot flower

Pure CSS dot flower

Pure CSS 🌈 skipping rope

Pure CSS 🌈 skipping rope

Liquid tab bar interaction

Liquid tab bar interaction

Minimal code stepper

Minimal code stepper

Card spotlight 🔦

Card spotlight 🔦

Fight 🥊 or flight 🕊️ highlight

Fight 🥊 or flight 🕊️ highlight

Pure CSS 🌈 logarithmic spiral: out of the dark... into the light

Pure CSS 🌈 logarithmic spiral: out of the dark... into the light

Pure CSS 🌈 bubble cube: out of the dark... into the light

Pure CSS 🌈 bubble cube: out of the dark... into the light

Pure CSS paper stairs

Pure CSS paper stairs

Pure CSS 🌈 springs

Pure CSS 🌈 springs

Pure CSS bubble cube animation

Pure CSS bubble cube animation

Pure CSS oscillating bars with chromatic aberration + motion blur

Pure CSS oscillating bars with chromatic aberration + motion blur

Blended layer backgrounds #2

Blended layer backgrounds #2

Blended layer backgrounds

Blended layer backgrounds

Minimal ripple heart pattern

Minimal ripple heart pattern

"Making people barf, a CSS only solution"

"Making people barf, a CSS only solution"

Simplifying pure CSS patterns

Simplifying pure CSS patterns

1 div, minimal CSS dot-dash pattern

1 div, minimal CSS dot-dash pattern

Sinking with Houdini magic 🎩🐇✨

Sinking with Houdini magic 🎩🐇✨

In the 🌈🕑🌊

In the 🌈🕑🌊

Deep inside a ⬡🐚

Deep inside a ⬡🐚

Eat me, drink me

Eat me, drink me

Grainy gradient blobs with filters, masking and blending

Grainy gradient blobs with filters, masking and blending

Cell gradient animation with Houdini magic 🎩🐇✨

Cell gradient animation with Houdini magic 🎩🐇✨

Slicing triangles

Slicing triangles

Neon Waterfall

Neon Waterfall

Pure CSS 🌈 grid 🌊

Pure CSS 🌈 grid 🌊

Skills chart animation

Skills chart animation

Pure CSS weaved pattern in under 110 bytes

Pure CSS weaved pattern in under 110 bytes

Fixing my crappy code... after over half a decade!

Fixing my crappy code... after over half a decade!

1 element ♾️ loader with Houdini magic 🎩🐇✨

1 element ♾️ loader with Houdini magic 🎩🐇✨

Compact pure CSS patterns

Compact pure CSS patterns

Pure CSS minimal cubes pattern

Pure CSS minimal cubes pattern

Consumed by 🐛 🐛 with Houdini magic 🎩🐇✨

Consumed by 🐛 🐛 with Houdini magic 🎩🐇✨

Pure CSS spiral eyes 👀🦚 with Houdini magic 🎩🐇✨

Pure CSS spiral eyes 👀🦚 with Houdini magic 🎩🐇✨

Pure CSS liquid loader

Pure CSS liquid loader

Avatar border effect

Pure CSS 1 element tile loader in under 15 declarations!

Pure CSS 1 element tile loader in under 15 declarations!

1 element pure CSS gradient spinner with Houdini magic 🎩🐇✨

1 element pure CSS gradient spinner with Houdini magic 🎩🐇✨

Pure CSS 🌈 grid 🌊 with minimal code

Pure CSS 🌈 grid 🌊 with minimal code

Pure CSS: travel inside the sphere

Pure CSS: travel inside the sphere

1 element pure CSS ❄️

1 element pure CSS ❄️

1 element pure CSS 🌞

1 element pure CSS 🌞

Pure CSS infinity roll loader with Houdini magic 🎩🐇✨

Pure CSS infinity roll loader with Houdini magic 🎩🐇✨

Offset and XOR frame

Offset and XOR frame

Never cross my way

Never cross my way

Pure CSS ☢️🥧 slices with Houdini magic 🎩🐇✨

Pure CSS ☢️🥧 slices with Houdini magic 🎩🐇✨

Discovery - pure CSS hollow intersection

Discovery - pure CSS hollow intersection

Tile closing effect

Tile closing effect

Vertical original vs. negative card

Vertical original vs. negative card

Original vs. negative card

Original vs. negative card

Wrap me with Houdini magic 🎩🐇✨

Wrap me with Houdini magic 🎩🐇✨

1 elem pure CSS card patterns

1 elem pure CSS card patterns

Dot navigation with clever CSS, Houdini magic 🎩🐇 and a sprinkle of JS ✨

Dot navigation with clever CSS, Houdini magic 🎩🐇 and a sprinkle of JS ✨

Cross-browser no image duplication reveal effect with img elements

Cross-browser no image duplication reveal effect with img elements

No image duplication reveal effect with Houdini magic 🎩🐇✨

No image duplication reveal effect with Houdini magic 🎩🐇✨

Minimal 🟢🥧 pattern

Minimal 🟢🥧 pattern

Pure CSS shaded prisms & pyramids

Pure CSS shaded prisms & pyramids

Minimal image compare split

Minimal image compare split

How I code in 2021: checkbox control

How I code in 2021: checkbox control

Pure CSS golden ⭐

Pure CSS golden ⭐

Pure CSS 3D 🌲

Pure CSS 3D 🌲

Pure CSS shaded wooden ⭐

Pure CSS shaded wooden ⭐

Delete 2020, insert 2021

Delete 2020, insert 2021

Pure CSS 🌟🎄 animation

Pure CSS 🌟🎄 animation

Pure CSS 1 element gradient icons

Pure CSS 1 element gradient icons

Simplest CSS cube ever!

Simplest CSS cube ever!

Simple pure CSS icon grid

Simple pure CSS icon grid

Pure CSS illusion of depth in 10 declarations

Pure CSS illusion of depth in 10 declarations

Pure minimal CSS pattern - sliced rings

Pure minimal CSS pattern - sliced rings

Minimal animated café wall illusion

Minimal animated café wall illusion

Pure CSS 🌀 grid wave #2 with Houdini magic 🎩🐇✨

Pure CSS 🌀 grid wave #2 with Houdini magic 🎩🐇✨

Pure CSS 🌀 grid wave with Houdini magic 🎩🐇✨

Pure CSS 🌀 grid wave with Houdini magic 🎩🐇✨

Pure CSS blend poly 💍 with Houdini magic 🎩🐇✨

Pure CSS blend poly 💍 with Houdini magic 🎩🐇✨

Pure CSS ⬡ slices - chromatic aberration effect

Pure CSS ⬡ slices - chromatic aberration effect

Pure CSS blend 💍

Pure CSS blend 💍

Messed up 🌈⚙️

Messed up 🌈⚙️

Pure CSS 3D Xmas ornament

Pure CSS 3D Xmas ornament

Cicada pastel

Cicada pastel

Halloween 🎯🌊🎃🦇🕸️🕷️🧙‍♀️🧹

Halloween 🎯🌊🎃🦇🕸️🕷️🧙‍♀️🧹

Pure CSS Halloween zipper 🎃🦇🕸️🕷️🧙‍♀️🧹

Pure CSS Halloween zipper 🎃🦇🕸️🕷️🧙‍♀️🧹

1 element interlocking loader

1 element interlocking loader

1 div, 9 CSS declarations 🧇

1 div, 9 CSS declarations 🧇

Pure CSS dot loader

Pure CSS dot loader

Pure CSS duo dot loaders

Pure CSS duo dot loaders

Pure CSS 1 element 🎯 loader

Pure CSS 1 element 🎯 loader

Pure CSS moon loader 🌚🌘🌗🌖🌕🌔🌓🌒

Pure CSS moon loader 🌚🌘🌗🌖🌕🌔🌓🌒

Horizontal rulers gone vertical with Houdini 🎩🐇✨

Horizontal rulers gone vertical with Houdini 🎩🐇✨

Pure CSS dark water bubbles with Houdini 🎩🐇✨

Pure CSS dark water bubbles with Houdini 🎩🐇✨

Cube candy twist

Cube candy twist

Numbered list with Houdini ✨🎩🐇

Numbered list with Houdini ✨🎩🐇

Simple pure CSS logo with only 3 declarations

Simple pure CSS café wall illusion - checker version

Simple pure CSS café wall illusion - checker version

Simple CSS gradient patterns

Simple CSS gradient patterns

Toggle with Houdini magic ✨🎩🐇 (Chromium only transition)

Toggle with Houdini magic ✨🎩🐇 (Chromium only transition)

Know your basics and defaults - simplifying gradients

Know your basics and defaults - simplifying gradients

1 element 5 bar spinner with Houdini magic ✨🎩🐇

1 element 5 bar spinner with Houdini magic ✨🎩🐇

Boximation with Houdini magic ✨🎩🐇

Boximation with Houdini magic ✨🎩🐇

Generating animation #2

Generating animation #2

Generating animation

Generating animation

Radial animated progress #2

Radial animated progress #2

Cool & compact pure CSS pattern #2

Cool & compact pure CSS pattern #2

Cool & compact pure CSS pattern

Cool & compact pure CSS pattern

Navigation effect

Navigation effect

Pure CSS gradient tooltip #2

Pure CSS gradient tooltip #2

Pure CSS gradient tooltip

Pure CSS gradient tooltip

Link hover effect

Link hover effect

Arched 3D panel

Arched 3D panel

Pure CSS 3D rainbow rotor

Pure CSS 3D rainbow rotor

Square dance animation

Square dance animation

Fancy checkbox

Fancy checkbox

Pure CSS loading animation

Pure CSS loading animation

Day/ night toggle with CSS variables

Day/ night toggle with CSS variables

Star mixin

Star mixin

Pure CSS background depending on height

Pure CSS background depending on height

Double helix with CSS 3D and variables

Double helix with CSS 3D and variables

No library emoji slider

No library emoji slider

Starry loader

Starry loader

Simplify a bar wave animation

Simplify a bar wave animation

Button hover effect with CSS variables

Button hover effect with CSS variables

Dots with CSS variables & grid layout

Dots with CSS variables & grid layout

1 element pure CSS pencil

1 element pure CSS pencil

Cross-browser sleek sliding toggle checkbox

Cross-browser sleek sliding toggle checkbox

Difference quarters

Difference quarters

Möbius beacons with CSS transforms, variables and Houdini magic 🎩🐇✨

Möbius beacons with CSS transforms, variables and Houdini magic 🎩🐇✨

Water your cat so it grows

Water your cat so it grows

Möbius bars with CSS transforms, variables and Houdini magic 🎩🐇✨

Möbius bars with CSS transforms, variables and Houdini magic 🎩🐇✨

Blend quarters loader

Blend quarters loader

Shiny glass buttons with CSS variables

Shiny glass buttons with CSS variables

Cube rings with CSS variables & Houdini magic 🎩🐇✨

Cube rings with CSS variables & Houdini magic 🎩🐇✨

Pure CSS expanding search

Pure CSS expanding search

Clever stroke tricks to create an SVG ☂️

Clever stroke tricks to create an SVG ☂️

1 element pure CSS ☂️ with conic-gradient + mask

1 element pure CSS ☂️ with conic-gradient + mask

Vertical items infographic with CSS vars, clipping & masking

Vertical items infographic with CSS vars, clipping & masking

Neon trails on torus with CSS variables & Houdini magic 🎩🐇✨

Neon trails on torus with CSS variables & Houdini magic 🎩🐇✨

Responsive buttons with CSS variables

Responsive buttons with CSS variables

Pointless 🌈 stairs with CSS variables & Houdini magic 🎩🐇✨

Pointless 🌈 stairs with CSS variables & Houdini magic 🎩🐇✨

3D buttons with clip-path, filters & CSS variables

3D buttons with clip-path, filters & CSS variables

Radial animated progress (no SVG, no library)

Radial animated progress (no SVG, no library)

Board challenge (solution)

Board challenge (solution)

🌈 moon grid with clip-path, CSS variables & Houdini magic 🎩🐇✨

🌈 moon grid with clip-path, CSS variables & Houdini magic 🎩🐇✨

Dizzy: triangular layers with CSS variables

Dizzy: triangular layers with CSS variables

Interactive pie chart with conic-gradient(), CSS variables & Houdini magic 🎩🐇✨

Interactive pie chart with conic-gradient(), CSS variables & Houdini magic 🎩🐇✨

Rainbow thing with CSS variables

Rainbow thing with CSS variables

4 paragraph responsive layout with CSS variables and flexbox tricks

4 paragraph responsive layout with CSS variables and flexbox tricks

Spinning shaded octahedron with CSS vars + clean Sass code

Spinning shaded octahedron with CSS vars + clean Sass code

Spinning shaded cube with CSS vars + clean Sass code

Spinning shaded cube with CSS vars + clean Sass code

Spinning shaded tetrahedron with CSS vars + clean Sass code

Spinning shaded tetrahedron with CSS vars + clean Sass code

Simple SVG sun

Simple SVG sun

Rainbow bar spinner with CSS vars & Houdini magic 🎩🐇✨

Rainbow bar spinner with CSS vars & Houdini magic 🎩🐇✨

Kitties 🐯🦁🐱🐅🐆

Kitties 🐯🦁🐱🐅🐆

Board challenge (solution)

Board challenge (solution)

Breathing cube with CSS 3D transforms, keyframe animations + more! 🙀

Breathing cube with CSS 3D transforms, keyframe animations + more! 🙀

Animate gradient components independently with CSS vars & Houdini magic 🎩🐇✨

Animate gradient components independently with CSS vars & Houdini magic 🎩🐇✨

Bouncing cube with CSS vars & Houdini magic 🎩🐇✨

Bouncing cube with CSS vars & Houdini magic 🎩🐇✨

Squishy bouncing box with keyframe animations, CSS vars, Houdini magic 🎩🐇✨ & more

Squishy bouncing box with keyframe animations, CSS vars, Houdini magic 🎩🐇✨ & more

Pure CSS breathing box (Blink only)

Pure CSS breathing box (Blink only)

Bouncing box with CSS vars & Houdini magic 🎩🐇✨

Bouncing box with CSS vars & Houdini magic 🎩🐇✨

SVG escalade loader

SVG escalade loader

Back to blue SVG loader

Back to blue SVG loader

SVG ∞ loader (no JS, cross-browser, minimal code)

SVG ∞ loader (no JS, cross-browser, minimal code)

Tomato loader with CSS variables #2

Tomato loader with CSS variables #2

Tomato loader with CSS variables

Tomato loader with CSS variables

Fluff loader with CSS variables

Fluff loader with CSS variables

Cube twist with CSS variables

Cube twist with CSS variables

Regular polygon & star-shaped polygon mixins

Regular polygon & star-shaped polygon mixins

Dot tentacles 🐙 with CSS variables

Dot tentacles 🐙 with CSS variables

XOR gradient rays & ripples animation (Firefox only)

XOR gradient rays & ripples animation (Firefox only)

Isometric loader with CSS variables and Houdini magic 🎩🐇✨

Isometric loader with CSS variables and Houdini magic 🎩🐇✨

Hopping cube with CSS variables and Houdini magic 🎩🐇✨

Hopping cube with CSS variables and Houdini magic 🎩🐇✨

Animating gradient sun rays with CSS variables and Houdini magic

Animating gradient sun rays with CSS variables and Houdini magic

Glowing tetrahedron

Glowing tetrahedron

Rays & ripple checkerboard with CSS mask (Firefox only!)

Rays & ripple checkerboard with CSS mask (Firefox only!)

Temperature display change: conic-gradient, CSS vars, Houdini magic 🎩🐇✨ (Blink + flag)

Temperature display change: conic-gradient, CSS vars, Houdini magic 🎩🐇✨ (Blink + flag)

Animating 🌈 ∞ logo with Houdini magic 🎩🐇✨

Gradient infinity logo (1 element + CSS)

Basics of damped oscillations with SVG + Vanilla JS

Basics of damped oscillations with SVG + Vanilla JS

Pure CSS tile switcher

Pure CSS tile switcher

Spin cubes with CSS variables and Houdini 🐇🎩

Spin cubes with CSS variables and Houdini 🐇🎩

1 element complex motion with CSS variables and Houdini 🐇🎩

1 element complex motion with CSS variables and Houdini 🐇🎩