Loading video...

Video Failed to Load

Go Home

Quick demo of this CSS-driven configuration coming in Tailwind CSS v4 — creating a new `font-comic` utility by just creating a new CSS variable under our new `@​theme` directive. No JS configuration file, all the same theme customization flexibility 🤩

adamwathan's profile picture

Adam Wathan

295,563 subscribers

95,414 views • 2 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩
0:17

🎮 New CSS Game! What about a CSS game that you can play with your keyboard? No, it's not a joke but a reality! Play "Super CSS Mario", the first CSS-Only game playable using your keyboard. CodePen.IO demo in the next tweet 👇 0% JavaScript - 100% CSS Magic! Have fun🤩

CSS by T. Afif

13,762 views • 2 years ago

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬
0:15

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬

Adam Wathan

28,667 views • 1 year ago

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇
0:11

💡 CSS Tip! Get the scroll progress of the page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇

CSS by T. Afif

35,659 views • 2 years ago

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.
0:14

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.

Bramus

42,676 views • 2 years ago

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates
0:13

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates

Ibelick

131,343 views • 2 years ago

🎉 Snap! Check out our new Polaroid theme! 📸✨ Just in time for your summer parties, the Polaroid theme will add a touch of nostalgia and sparkle to your events. 👇
0:13

🎉 Snap! Check out our new Polaroid theme! 📸✨ Just in time for your summer parties, the Polaroid theme will add a touch of nostalgia and sparkle to your events. 👇

Luma

56,467 views • 2 years ago

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO
0:15

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Chrome for Developers

12,135 views • 2 months ago

In the new version of Simulon, we've built a simulated depth of field effect that seamlessly blends CG and real-world elements, mimicking the behavior of a real camera lens. We just love creating miniature shots with shallow focus! Assets by our friends at BigMediumSmall
0:18

In the new version of Simulon, we've built a simulated depth of field effect that seamlessly blends CG and real-world elements, mimicking the behavior of a real camera lens. We just love creating miniature shots with shallow focus! Assets by our friends at BigMediumSmall

Divesh Naidoo

59,080 views • 1 year ago

Opus 4.6 vs GPT 5.4 (High) (1/9) prompt: Build a single-file HTML/CSS/JS (no libs) demo that uses SVG to simulate a plant growing: stem extends, leaves sprout + unfurl with springy/windy “physics”, then seamlessly loops forever. For the initial impressions I'm really impressed by GPT, for speed they both felt about the same, but gpt was still half cheaper than opus. I also much prefer the design and animation that gpt produced, physics on the leaves are super cool and it also loops pretty nicely whilst opus just fades out the plant. Still got a bunch of tests to run but this is really exciting.
0:10

Opus 4.6 vs GPT 5.4 (High) (1/9) prompt: Build a single-file HTML/CSS/JS (no libs) demo that uses SVG to simulate a plant growing: stem extends, leaves sprout + unfurl with springy/windy “physics”, then seamlessly loops forever. For the initial impressions I'm really impressed by GPT, for speed they both felt about the same, but gpt was still half cheaper than opus. I also much prefer the design and animation that gpt produced, physics on the leaves are super cool and it also loops pretty nicely whilst opus just fades out the plant. Still got a bunch of tests to run but this is really exciting.

Dev Ed

660,154 views • 5 months ago

A fresh look is rolling out across CUE as we prepare for our new Calculator experience launching by 2/17 start of the Horse Year. You’ll notice smoother navigation, clearer visuals, and a cleaner theme throughout the app. Big upgrades are coming soon. ⚡️📈
0:12

A fresh look is rolling out across CUE as we prepare for our new Calculator experience launching by 2/17 start of the Horse Year. You’ll notice smoother navigation, clearer visuals, and a cleaner theme throughout the app. Big upgrades are coming soon. ⚡️📈

𝐂𝐔𝐄

10,388 views • 6 months ago

The golden days of 2016. I had the privilege of working with Koa, a studio, a dedicated costumer, and was under the generous wing of TaylorMadeClips Covid changed all of that, but we're still kicking & creating. You can find classic media & new content on our Pay-tree-on.
0:15

The golden days of 2016. I had the privilege of working with Koa, a studio, a dedicated costumer, and was under the generous wing of TaylorMadeClips Covid changed all of that, but we're still kicking & creating. You can find classic media & new content on our Pay-tree-on.

MaxgrowthPro 15 Year Anniversary 🌈

12,608 views • 7 months ago

UPDATE: Around 100 Ukrainian drones struck the Ryazan oil refinery in Russia overnight. Heavy black smoke was seen billowing over the city. In another attack, Ukraine destroyed a Russian Be-200 aircraft. The cost of the destroyed Be-200 alone may exceed $30–40 million. Secretary Rubio Highlighted this by saying, " There's no doubt that the necessity of fighting this war has caused the Ukrainians to develop new tactics, new techniques, new equipment, new technology that is creating a sort of hybrid asymmetrical warfare."
0:15

UPDATE: Around 100 Ukrainian drones struck the Ryazan oil refinery in Russia overnight. Heavy black smoke was seen billowing over the city. In another attack, Ukraine destroyed a Russian Be-200 aircraft. The cost of the destroyed Be-200 alone may exceed $30–40 million. Secretary Rubio Highlighted this by saying, " There's no doubt that the necessity of fighting this war has caused the Ukrainians to develop new tactics, new techniques, new equipment, new technology that is creating a sort of hybrid asymmetrical warfare."

Donald J Trump Posts TruthSocial

48,925 views • 2 months ago

Introducing the future of creation with our friends at YouWare ! I just built a coming-soon page for a new startup called SynthWave AI in minutes. No code, no stress, just pure creation. YouWare is the new vibe coding platform that transforms your ideas into reality.
0:14

Introducing the future of creation with our friends at YouWare ! I just built a coming-soon page for a new startup called SynthWave AI in minutes. No code, no stress, just pure creation. YouWare is the new vibe coding platform that transforms your ideas into reality.

Kelsey

43,516 views • 8 months ago

Introducing our first flagship retail & entertainment experience - Doodles x CAMP, launching this summer! Through this partnership, we will grow the Doodles ecosystem by creating a real life emotional connection with thousands of new people, spanning generations. Here's how: 🧵
0:12

Introducing our first flagship retail & entertainment experience - Doodles x CAMP, launching this summer! Through this partnership, we will grow the Doodles ecosystem by creating a real life emotional connection with thousands of new people, spanning generations. Here's how: 🧵

doodles

415,666 views • 3 years ago

Just dropped: Horizon. Not just a theme. A new foundation for building online stores on Shopify. One system. Ten new themes. All live today. Horizon incorporates theme blocks - 30+ drag-and-drop components you can remix across your store. Video. Product recs. Rich text. Custom content. Want holographic effects on images as you hover over them? Just say so and AI will code something just for you. We’ve also made some of your most requested updates to the theme editor: • Copy + paste blocks anywhere • Drag + drop across pages • Preview blocks before publishing This is total design freedom. The fastest way to go from idea to store. Horizon is the new starting line for great brands. Let’s build.
0:14

Just dropped: Horizon. Not just a theme. A new foundation for building online stores on Shopify. One system. Ten new themes. All live today. Horizon incorporates theme blocks - 30+ drag-and-drop components you can remix across your store. Video. Product recs. Rich text. Custom content. Want holographic effects on images as you hover over them? Just say so and AI will code something just for you. We’ve also made some of your most requested updates to the theme editor: • Copy + paste blocks anywhere • Drag + drop across pages • Preview blocks before publishing This is total design freedom. The fastest way to go from idea to store. Horizon is the new starting line for great brands. Let’s build.

Harley Finkelstein

31,696 views • 1 year ago

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 3 months ago

Our new full length “No Love Lost” is officially out everywhere. We’re all so proud of this album and we hope you enjoy what we put so much into creating. Listen and pick up a physical copy at THANK YOU 🖤
0:18

Our new full length “No Love Lost” is officially out everywhere. We’re all so proud of this album and we hope you enjoy what we put so much into creating. Listen and pick up a physical copy at THANK YOU 🖤

YEAR OF THE KNIFE

48,197 views • 2 years ago