Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

💡 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 👇

ChallengesCss's profile picture

CSS by T. Afif

14,039 subscribers

19,823 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstWissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

1 Kommentare

Profilbild von Artur Bień
Artur Bieńvor 1 Jahr

Love it. Very handy

Ähnliche Videos

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:
0:45

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍 Here's the CodePen.IO:

AdirCode

66,369 Aufrufe • vor 3 Jahren

How to use the :where CSS selector to solve specificity problems ↓
0:24

How to use the :where CSS selector to solve specificity problems ↓

Sebastiano Guerriero

61,881 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,809 Aufrufe • vor 2 Jahren

Move over Sass! CSS Selector Nesting dropped in Chrome Stable today.
2:12

Move over Sass! CSS Selector Nesting dropped in Chrome Stable today.

Wes Bos

114,736 Aufrufe • vor 3 Jahren

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇
0:42

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

55,548 Aufrufe • vor 3 Jahren

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —
1:08

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,293 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇
0:21

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,063 Aufrufe • vor 3 Jahren

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?
3:54

The & in a CSS nested selector doesn't need to come at the start! Needed to style an element based on parent AND child selectors and this was the ticket. Good idea or nah?

Wes Bos

15,810 Aufrufe • vor 8 Monaten

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,272 Aufrufe • vor 3 Jahren

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇
0:36

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇
0:36

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,545 Aufrufe • vor 2 Jahren

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇
0:45

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

228,661 Aufrufe • vor 3 Jahren

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇
0:48

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,292 Aufrufe • vor 2 Jahren

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!
2:00

I wrote a Cursor Figma MCP server to make it easier for AI copilots to implement designs. It's not perfect, but the resulting HTML and CSS is a lot cleaner than giving AI a screenshot and having it guess. Link in the replies, take it for a spin and let me know what you think!

Graham Lipsman

102,418 Aufrufe • vor 1 Jahr

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.
0:27

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Addy Osmani

79,653 Aufrufe • vor 2 Jahren

SA2 Skin Selector mod is now available! Swap skin in real time after adding them to the mod! (Download link in reply!)
2:15

SA2 Skin Selector mod is now available! Swap skin in real time after adding them to the mod! (Download link in reply!)

Sora

86,751 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
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

My motivational tip of the day ! A new day and a chance to get better in pursuit of your goals .
0:45

My motivational tip of the day ! A new day and a chance to get better in pursuit of your goals .

Dick Vitale

26,338 Aufrufe • vor 1 Jahr

Bolt Rules extension, built in bolt.new - open-source (clone it, make changes, help me fix the scroll pls) - changes prompts when in a project or starting a new one - tool selector dropdowns link below
1:24

Bolt Rules extension, built in bolt.new - open-source (clone it, make changes, help me fix the scroll pls) - changes prompts when in a project or starting a new one - tool selector dropdowns link below

Ben Tossell

60,681 Aufrufe • vor 1 Jahr

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇
0:32

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

jhey ʕ•ᴥ•ʔ

75,335 Aufrufe • vor 11 Monaten