Ana Tudor
CSS-Tricks
Contact Ana
Discover and connect with journalists and influencers around the world, save time on email research, monitor the news, and more.
| Recent: |
|
| Past: |
|
Past articles by Ana:
Icon Glassmorphism Effect in CSS
I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just → Read More
CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people → Read More
Using Absolute Value, Sign, Rounding and Modulo in CSS Today
For quite a while now, the CSS spec has included a lot of really useful mathematical functions, such as trigonometric functions (sin(), cos(), tan(), → Read More
Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal
I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio → Read More
Taming Blend Modes: `difference` and `exclusion`
Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try → Read More
Smarter Ways to Generate a Deep Nested HTML Structure
A look at using HTML preprocessors to generate HTML, particularly deeply nested HTML, which is useful for a variety of interesting browser art and experimentation. → Read More
A Lightweight Masonry Solution
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I've been wanting to do on my own from scratch for a very → Read More
When Sass and New CSS Features Collide
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they → Read More
Cool Little CSS Grid Tricks for Your Blog
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more → Read More
Background Patterns, Simplified by Conic Gradients
For those who have missed the big news, Firefox now supports conic gradients! Starting with Firefox 75, released on the April 7, we can go to → Read More
Adventures in CSS Semi-Transparency Land
Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with → Read More
Unfortunately, clip-path: path() is Still a No-Go
I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the → Read More
Weaving a Line Through Text in CSS
Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this → Read More
While You Weren't Looking, CSS Gradients Got Better
One thing that caught my eye on the list of features for Lea Verou's conic-gradient() polyfill was the last item: Supports double position syntax (two → Read More
Multi-Thumb Sliders: General Case
The first part of this two-part series detailed how we can get a two-thumb slider. Now we'll look at a general multi-thumb case, but with a different and → Read More
Multi-Thumb Sliders: Particular Two-Thumb Case
This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec → Read More
Logical Operations with CSS Variables
Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could → Read More
Various Methods for Expanding a Box While Preserving the Border Radius
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the → Read More
Color Inputs: A Deep Dive into Cross-Browser Differences
In this article, we'll be taking a look at the structure inside elements, browser inconsistencies, why they look a certain way in a certain browser, and → Read More
Restricting a (pseudo) element to its parent’s border-box
Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent’s border-box? In case you’re having trouble picturing what that looks like, let’… → Read More