Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

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

#CSS
LIVE

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

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev
0:26

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,277 Aufrufe • vor 3 Jahren

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!
0:30

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

Adam Argyle

31,206 Aufrufe • vor 1 Jahr

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.
1:08

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Alamin

65,653 Aufrufe • vor 3 Jahren

One of my first projects to practice HTML/CSS
0:42

One of my first projects to practice HTML/CSS

Julia👩‍💻

131,767 Aufrufe • vor 2 Jahren

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥
0:27

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,622 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 ✅
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 ʕ•ᴥ•ʔ

285,140 Aufrufe • vor 1 Jahr

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.
1:11

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

Sage ⚡️

413,377 Aufrufe • vor 3 Jahren

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

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

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here
0:28

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here

Sage ⚡️

13,189 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 ⭐️
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,077 Aufrufe • vor 1 Jahr

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
1:56

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

Firefox for Web Developers

11,375 Aufrufe • vor 3 Monaten

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.

144,326 Aufrufe • vor 2 Monaten

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,200,799 Aufrufe • vor 4 Monaten

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

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

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap
0:40

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,831 Aufrufe • vor 1 Jahr

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻
1:01

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻

luis.

12,061 Aufrufe • vor 1 Jahr

It's a CSS Maze!! 🌽 Unless Safari... In which case it's some random shapes 🙃 🚳 No images 📵 No JavaScript 👨‍💻 Just CSS + a sprinkling of HTML First one to screenshot the end wins... Go!! 🎉 CodePen.IO #nojavascript #purecss #cssonly #cssart #ccsgame
0:22

It's a CSS Maze!! 🌽 Unless Safari... In which case it's some random shapes 🙃 🚳 No images 📵 No JavaScript 👨‍💻 Just CSS + a sprinkling of HTML First one to screenshot the end wins... Go!! 🎉 CodePen.IO #nojavascript #purecss #cssonly #cssart #ccsgame

Ben Evans

12,744 Aufrufe • vor 3 Jahren

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖
2:08

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 Aufrufe • vor 1 Jahr