Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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,090 subscribers

29,169 Aufrufe • vor 3 Jahren •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Kevin Powell

Kevin Powellvor 3 Jahren

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 3 Jahren

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

Profilbild von Brandon McConnell

Brandon McConnellvor 3 Jahren

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 3 Jahren

good choice 👍

Profilbild von myf (formerly myf)

myf (formerly myf)vor 3 Jahren

It seems like @LeaVerou's revived.

Profilbild von Faria Waseer

Faria Waseervor 3 Jahren

congratulations its a record You set 🎯✨🎈

Profilbild von CSS by T. Afif

CSS by T. Afifvor 3 Jahren

Thanks 😊

Profilbild von Ana Tudor 🐯🖤🌻

Ana Tudor 🐯🖤🌻vor 3 Jahren

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 3 Jahren

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 👀

Profilbild von Jakub T. Jankiewicz 🌟

Jakub T. Jankiewicz 🌟vor 3 Jahren

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

Profilbild von CSS by T. Afif

CSS by T. Afifvor 3 Jahren

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. 😑

Ähnliche Videos

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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,090 Aufrufe • vor 20 Tagen

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,784 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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,615 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Monaten

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,034 Aufrufe • vor 2 Jahren

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,241 Aufrufe • vor 1 Jahr

✨ 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 Aufrufe • vor 1 Jahr

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,672 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 2 Jahren

💡 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 Aufrufe • vor 1 Jahr

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,407 Aufrufe • vor 13 Tagen

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Wes Bos

103,902 Aufrufe • vor 1 Jahr