Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

ChallengesCss's profile picture

CSS by T. Afif

14,058 subscribers

29,170 görüntüleme • 3 yıl önce •via X (Twitter)

#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Kevin Powell profil fotoğrafı
Kevin Powell3 yıl önce

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

CSS by T. Afif profil fotoğrafı
CSS by T. Afif3 yıl önce

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

Brandon McConnell profil fotoğrafı
Brandon McConnell3 yıl önce

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

CSS by T. Afif profil fotoğrafı
CSS by T. Afif3 yıl önce

good choice 👍

myf (formerly myf) profil fotoğrafı
myf (formerly myf)3 yıl önce

It seems like @LeaVerou's revived.

Faria Waseer profil fotoğrafı
Faria Waseer3 yıl önce

congratulations its a record You set 🎯✨🎈

CSS by T. Afif profil fotoğrafı
CSS by T. Afif3 yıl önce

Thanks 😊

Ana Tudor 🐯🖤🌻 profil fotoğrafı
Ana Tudor 🐯🖤🌻3 yıl önce

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 profil fotoğrafı
CSS by T. Afif3 yıl önce

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 🌟 profil fotoğrafı
Jakub T. Jankiewicz 🌟3 yıl önce

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 profil fotoğrafı
CSS by T. Afif3 yıl önce

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

Benzer Videolar

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

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

jhey ʕ•ᴥ•ʔ

124,142 görüntüleme • 2 yıl önce

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 ✅
0:22

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 görüntüleme • 1 yıl önce

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
2:32

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 görüntüleme • 1 yıl önce

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.
0:51

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,554 görüntüleme • 1 ay önce

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? 🤔
0:27

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 görüntüleme • 1 yıl önce

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 ⭐️
0:33

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 görüntüleme • 2 yıl önce

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: 👇🏼
0:59

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 görüntüleme • 3 ay önce

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

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

eric zakariasson

185,565 görüntüleme • 1 yıl önce

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.
0:25

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 görüntüleme • 2 yıl önce

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🤩
0:36

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 görüntüleme • 5 ay önce

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
0:29

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 görüntüleme • 3 yıl önce

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

✨ 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 görüntüleme • 1 yıl önce

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. 👇
1:02

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,586 görüntüleme • 1 yıl önce

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.
0:34

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,718 görüntüleme • 9 ay önce

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
0:29

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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 2 ay önce

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! 👇
1:31

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 görüntüleme • 2 yıl önce

💡 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 👇
0:34

💡 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 görüntüleme • 1 yıl önce

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 👇
0:37

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,532 görüntüleme • 26 gün önce