Загрузка видео...

Не удалось загрузить видео

На главную

💡 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 просмотров • 1 год назад •via X (Twitter)

ИскусствоНаука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 1

Фото профиля Artur Bień
Artur Bień1 год назад

Love it. Very handy

Похожие видео

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 просмотров • 3 лет назад

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 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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,278 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 8 месяцев назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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,363 просмотров • 1 год назад

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 просмотров • 2 лет назад

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 просмотров • 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
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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 11 месяцев назад