Skip to main content

Ana Tudor

Mad scientist.

Article

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Article

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future.

Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And … Read article

Article

1 HTML Element + 5 CSS Properties = Magic!

Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that's there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?… Read article

Article

Simple Swipe with Vanilla JavaScript

I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let's jump right into it!… Read article

Article

Scooped Corners in 2018

When I saw Chris' article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let's see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.
Article

What Houdini Means for Animating Transforms

I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.… Read article

Article

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.… Read article

Article

Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let's dive into it and see how!… Read article

Article

A Sliding Nightmare: Understanding the Range Input

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it's not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are … Read article

Article

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I've shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I'll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one.… Read article

icon-link icon-logo-star icon-search icon-star