正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

14,058 subscribers

29,170 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

Kevin Powell 的头像

Kevin Powell3 年前

Amazing work! I really like the two that have the subtle extra shadow that give it a bit of layering

CSS by T. Afif 的头像

CSS by T. Afif3 年前

The first one of them is also my best one. Only 2 gradients and the result is quite satisfying 😄

Brandon McConnell 的头像

Brandon McConnell3 年前

Congrats! 🥳 So many to choose from, I’ll go with this one

CSS by T. Afif 的头像

CSS by T. Afif3 年前

good choice 👍

myf (formerly myf) 的头像

myf (formerly myf)3 年前

It seems like @LeaVerou's revived.

Faria Waseer 的头像

Faria Waseer3 年前

congratulations its a record You set 🎯✨🎈

CSS by T. Afif 的头像

CSS by T. Afif3 年前

Thanks 😊

Ana Tudor 🐯🖤🌻 的头像

Ana Tudor 🐯🖤🌻3 年前

Even Google Trends knows you've been very CSS-busy. (I was poking around in the YouTube dashboard and found a link to this...)

CSS by T. Afif 的头像

CSS by T. Afif3 年前

Oh! it's unusual to see my Country listed number one somewhere 😅 btw, what kind of select is this? can you send me a link 👀

Jakub T. Jankiewicz 🌟 的头像

Jakub T. Jankiewicz 🌟3 年前

Is the code Public Domain? It's worth adding some kind of copyright license otherwise everything is protected and all right reserved.

CSS by T. Afif 的头像

CSS by T. Afif3 年前

All the code is in github with a licence there: but I doubt people will care about any licence when it comes to CSS. They will take your code to make it their and sometimes sell online content with it. 😑

相关视频

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

make it pop™ 🎈 CSS linear() is one of my favorite sleeper additions to the platform 💯

jhey ʕ•ᴥ•ʔ

124,142 次观看 • 2 年前

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

286,001 次观看 • 1 年前

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Squircles! In CSS! Work is underway to add corner-shape to CSS, which will give you control over a border-radius curve with superellipse() I build a little tool to visualize the possibilities

Wes Bos

31,135 次观看 • 1 年前

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

Csaba Kissi

105,818 次观看 • 1 个月前

Last week, I built this set of 50+ inputs with Tailwind CSS and Next.js (link in the comments)! 🔥 Now, I want to expand this into a collection of copy-and-paste components to quickly build app UIs. Would it be useful? 🤔

Last week, I built this set of 50+ inputs with Tailwind CSS and Next.js (link in the comments)! 🔥 Now, I want to expand this into a collection of copy-and-paste components to quickly build app UIs. Would it be useful? 🤔

Pasquale Vitiello

224,820 次观看 • 1 年前

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

jhey ʕ•ᴥ•ʔ

91,134 次观看 • 2 年前

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼

shawn.

145,982 次观看 • 3 个月前

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,063 次观看 • 2 年前

agent now automatically searches the internet when needed here's a one shot migration of Tailwind CSS 3 to 4

agent now automatically searches the internet when needed here's a one shot migration of Tailwind CSS 3 to 4

eric zakariasson

185,565 次观看 • 1 年前

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing). Drag the nodes, and the shortest path will update in real-time! A demo powered by all the modern CSS features🤩

CSS by T. Afif

1,201,004 次观看 • 6 个月前

Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ property ✅ Layer *Lots of code comments* to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ property ✅ Layer Lots of code comments to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

Adam Argyle

84,455 次观看 • 3 年前

✨ Build Next.js, Tailwind CSS & shadcn UIs with AI + visual editing. Export the code in one click. Live on ProductHunt now. Link below.

✨ Build Next.js, Tailwind CSS & shadcn UIs with AI + visual editing. Export the code in one click. Live on ProductHunt now. Link below.

Mattia

28,178 次观看 • 1 年前

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

244,700 次观看 • 1 年前

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

184,850 次观看 • 9 个月前

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

jhey ʕ•ᴥ•ʔ

256,187 次观看 • 1 年前

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

your signature is a custom easing function™ ✒️ draw it map the motion to css linear() timing function package as portable SVG paste anywhere 👇

jhey ʕ•ᴥ•ʔ

170,474 次观看 • 2 个月前

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,234 次观看 • 2 年前

💡 CSS Tip! A small tool to create a quantity query selector using has(). Adjust the setting and get your selector in no time! 😎 I am trying a new kind of "interactive CSS Tip". Let me know what you think. Link in the reply 👇

💡 CSS Tip! A small tool to create a quantity query selector using has(). Adjust the setting and get your selector in no time! 😎 I am trying a new kind of "interactive CSS Tip". Let me know what you think. Link in the reply 👇

CSS by T. Afif

19,823 次观看 • 2 年前

today it's my birthday, and i'm shipping inspekt hover any element to instantly inspekt fonts, colors, spacing, and css no devtools. no digging copy all you need in one click grab inspekt below 👇

today it's my birthday, and i'm shipping inspekt hover any element to instantly inspekt fonts, colors, spacing, and css no devtools. no digging copy all you need in one click grab inspekt below 👇

hamza

10,561 次观看 • 1 个月前