Ana Tudor

CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position, background-size, background-blend-mode or even opacity and transform on a pseudo-element/ child, but sometimes these are just not enough. Not to mention that we run into similar problems when wanting to animate SVG attributes without a CSS correspondent.

Using … Read article “Emulating CSS Timing Functions with JavaScript”

We’ve all been there. Landed on a website only to be slapped with a modal that looked something like the one below:

Hello darkness, my old friend.

For me that triggers a knee-jerk reaction: curse for giving them a pageview, close the tab, and never return. But there’s also that off case when we might actually try to get to the info behind that modal. … Read article “How to be evil (but please don’t!) – the modals & overlays edition”

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don’t get used that much in the wild – the likes of CSS Grid, custom properties, blend modes, … Read article “Glue Cross-Browser Responsive Irregular Images with Sticky Tape”

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables. This article is going to guide you through the process of building these demos.… Read article “Creating Yin and Yang Loaders On the Web”

Let’s say we wanted to have something like this:

Clockwise circular (cyclic) distribution with partially overlapping items.

At first, this doesn’t seem too complicated. We start with 12 numbered items:… Read article “Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items”

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than … Read article “Simplifying CSS Cubes with Custom Properties”

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong.

The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white … Read article “Methods for Contrasting Text Against Backgrounds”

I have recently live coded a pure CSS random rainbow particle explosion. There’s a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing that requires a lot of work and code, but it’s something I did quite quickly and with only 30 lines of SCSS.… Read article “Animate to Different End States Using One Set of CSS Keyframes”

As some people might know, I’ve always loved 3D geometry. Which has meant getting drawn towards playing with CSS 3D transforms in order to create various geometric shapes. I’ve built a huge collection of such demos, which you can check out on CodePen.

Because of this, I’ve often been asked whether it would be possible to create responsive 3D shapes using, for example, % values instead of the em values my demos normally use. The answer is a bit … Read article “The State of Responsive 3D Shapes”

I’ve always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.… Read article “Things to Watch Out for When Working with CSS 3D”