A hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
In this article, I explore how device motion can bring a sense of life to mobile interfaces. By tapping into accelerometers, we can create experiences that feel dynamic, responsive, and surprisingly tactile, turning static screens into something that moves with the user.
Disney's legendary 12 principles of animation have shaped the way we bring characters and motion to life. But what if we applied them using only CSS? In this talk, we'll explore how these timeless animation techniques can be recreated with modern CSS. Through live examples and practical demos, you'll see how to add depth and personality to your transitions and interactions, and hopefully, you'll be inspired to push the boundaries of CSS animations!
How can we creat a true deep card effect?
Not a shadow trick, not a fake layer, but a card that actually feels like it sits inside 3D space. In the article I break down the visual challenge, why traditional approaches fall short, and how a small shift in perspective can unlock a much more convincing result.
Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to manage and turn it into a clear, predictable system.
Are we on the verge of a new era of Computational CSS?
With Typed Arithmetic, we can do calculations directly in CSS, opening doors to new layout possibilities and more dynamic, powerful designs.
A two-part article on the power of paths in CSS, covering everything from the basics to the creation of custom complex shapes and smooth motion along custom routes.
A three part exploration series, with each chapter diving deep into a single idea.
1. The basics - everything you need to know from the very first line to the final result.
2. Movement and Variations - how to animate, how to change, and how to make it look good.
3. Advanced interactions - making the code cleaner and more dynamic with a touch of JavaScript.
DevTools are for more than console logging, with extensive and powerful CSS debugging features.
Get started learning all about Chrome's DevTools with this free 5-part Getting Started with CSS DevTools course by Amit Sheen and Kevin Powell.
A few weeks ago, while brainstorming silly things I could do with Scroll Driven Animations, I suddenly remembered that text can be animated too 🤯. That little spark quickly led me to a new idea: a Scroll-Driven Sticky Heading.
A deep dive into the new property, and a little dig into the math behind it.
Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you.
Had the honor of (finally) being a guest on FrontCast, we talked a lot about CSS, and came to the conclusion that one hour is simply not enough to cover all the cool things that are happening on the web right now. 🙃
I asked myself what we could do with just the mouse position, and got to this fun simple effect.
his presentation challenges perceived limitations in CSS by showcasing live demonstrations of previously "impossible" front-end techniques: scroll-driven animation, anchor positioning, and styleable select elements. While seemingly disparate, these features highlight the evolving power of CSS to handle tasks once relegated to JavaScript
Have you ever stared at a piece of code and thought, What the hell was that person thinking? Has anyone ever stared at your code and asked themselves the same thing?
While browsing the conference website, I couldn’t help but notice their big firebrick-red buttons... And the rest is in my latest article, where we explore three different methods to animate buttons.
Let's talk about all the decisions we need to make when working on a Design System, what questions we need to ask ourselves, what some of the possible answers are, and how to choose.
My friend Gil sent me a question about handling browser support, which is a common concern for many frontend developers working with CSS. So I thought my response might be useful to others, and decided to share it as a short article.
A live step by step hand pose detection using MediaPipe.
Hosted by NWD.
In the competitive world of tech, side projects aren’t just a "nice-to-have" – they can be your secret weapon, help showcase your skills, highlight your passions, and set you apart from the crowd. This talk explores why building a personal project is one of the smartest moves for junior developers seeking their first role. From choosing the right project to presenting it effectively in interviews, we'll dive into actionable insights to turn your side project into a main career boost. Perfect for anyone ready to code their way to opportunity!
A fun talk about writing better CSS: tips that turn code into art, stories of fails and aha moments (when one button breaks the whole vibe), staying sharp in a world of shifting trends, and why Amit and Shahar ended up chatting until 2AM at a meetup.
CSS has undergone a massive transformation in recent years, offering developers unprecedented control and flexibility in crafting web experiences. In this talk, we’ll explore what “modern CSS” truly means and how it has redefined the way we approach layout, design, and interactivity.
(without Requiring a Monospace Font)
A step-by-step breakdown, from the splitting, through the transforms, to the 'magic' of forced-perspective.
In this talk, we'll take a look at the new @ rules that have been added recently, understand what they do, why they do it, and how to use them correctly.
Showcasing a unique usage of the :has selector in CSS that goes beyond just being a parent selector.
Join me to a quick review of all the great possibilities that were added lately, and all the wonderful things that are still about to come.
A digital 'candle lighting', For the eight days of the holiday, we'll build eight different animated menorahs, one a day, all in pure CSS. Starting simple, and every day we'll increase the light and learn more things.
Hosted by Kevin Powell
This time looking at how we can do particle animations with CSS, by looking at how we can make a 3D scene with a laser cutting a panel, with sparks flying off while it’s cutting the panel.
Ever wondered how web conferences do their room layout planning? Well, with Container Queries of course! Hosted by Fronteers
@JavaScript Israel
There's a lot of fuss these days about the new (level 2) transforms, specifically about individual transforms.In this session we'll see some of the great quick wins and cool new things we can now do (the good), understand the limits and constraints of individual transforms with live examples, review cases where you shouldn't use them, or just can't (the bad), and talk about the syntax.
This time @RomanSndlr and @HamatoYogi hosted @amit_sheen to discuss CSS and tailwindcss.
The discussion was 🔥 , 🌶 , and a lot of fun as always 🤗
Hosted by Negev Web Developers
Join me as I build a full 3D Backgammon board, pieces and all, in pure CSS. Sharpen your skills and learn how to work with perspective, transforms, user interactions, animations, and much more, in a full session of live coding, followed by an AMA session about CSS perspective and animations.
@CSS Cafe
Let's take a deep dive into CSS perspective and 3D animation, and learn to harness the power of CSS to add depth to our elements and spice up our design with animated 3D buttons, switches, menus, info cards, interactions, and even text and titles. (May contain some live coding)
@CSS DAY
Working with keyframes can be difficult even if you only have one animation, but the real problems begin when you have 3 objects with 5 animations, each of which has different keyframes, duration, timing-function… and yet they all need to be exactly synchronized. So how do we do that?!
A workshop at Smashing magazine. A deep dive into #CSS perspective and animation, 4 days of 3D and movement, covering everything you need to know, from the ground up.
@LogRocket
Let's take a deep dive on how to use CSS animations and stay performant.
Together we'll look at the render process, learn how to harness the GPU, mind our properties, and stay accessible while we're doing it.
A full hour interview with Vitaly Friedman, for Smashing magazine
I had the honor of meeting @chriscoyier for a short chat, and talk about some of my favorite pens, including the one that started it all, the one that was done by mistake, and more.
Hosted by Kevin Powell
CSS animations AMA - We talked about all sorts of CSS animations and 3D stuff, I hope you enjoy it!
Hosted by Frontend Horse
Let's learn how to create and animate stick figures with just CSS! and create a horse together, learning some advanced techniques.
@TechRadar by Tikal
Long before its official release, CSS Houdini is declared as one of the greatest game-changers ever. In this talk we'll go over the different APIs that Houdini reveals, understand what they are and how to use them, and see some examples of the many great things you can do with it.
At React Next conference
React is amazing, it allows us to do incredible things, and the possibilities are endless. But with so many options, a component that seems very simple, can have all sorts of weird states and bizarre conditioning, and we can sometimes find ourselves struggling with our own code and hacking our way to the desired result. As a React developer, I run into these problems on a regular basis, but as a CSS specialist, I know that many of these problems have much simpler solutions.
In this talk I'll try to bring my knowledge and expertise in combining JavaScript and CSS, present some real-life everyday cases that React developers encounter, and demonstrate how they can be solved in a simpler way, using CSS.
What is the one thing people can do to make their website better?...
London CSS
Working with keyframes can be difficult even if you only have one animation but the real problems begin when you have 3 objects with 5 animations, each of which has different keyframes, duration, timing-function… and yet they all need to be exactly synchronized. So how do we do that?!
Hosted by Negev Web Developers
In this lecture / live-coding session we'll get to know CSS Houdini, understand what it is and how to use it, and see some examples of the many great things you can do with it. (caution: may contain some JavaScript)
@WarsawJS
In this short live-coding session we'll learn step-by-step how to get the user’s mouse position and map it into CSS custom properties, and how to use these properties to manipulate your elements (including some working examples).
Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX and --positionY.
Hosted by TechItalia Lab
A talk about the connections between the design and the development process, specifically about the different 'point of view' the designers and developers have, and the problems/collisions that these differences may bring with them, and a few tips and tricks for a better workflow.
Hosted by Framsia
Let's talk about conic, learn what it is, understand how (and where) it works, and see some cool examples of conic-gradient.
Hosted by Negev Web Developers
Let's talk about conic, learn what it is, understand how (and where) it works, and see some cool examples of conic-gradient.
Hosted by Negev Web Developers
We'll take a quick look at some of the latest animations I've created with CSS, review the code and the methods that were used, and see some tips and tricks for using animations and transitions in CSS.
In this article, I’ll try to explain the concept of perspective, starting with the very basics, as we work up to a fully animated 3D cube.
From the first ever In.Dev meetup at Google campus TLV