Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

the magic of CSS counters ✨ let CSS count your content outside of ordered lists using counters and optional @​counter-style reorder/edit DOM content without having to update headings, etc. the styles will update for you 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,327 subscribers

143,806 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von CG
CGvor 1 Jahr

what program is this?

Profilbild von Safari Web Extensions
Safari Web Extensionsvor 1 Jahr

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Profilbild von Arthur
Arthurvor 1 Jahr

Saved and noted G!

Profilbild von Aingel ✞
Aingel ✞vor 1 Jahr

These are great if you’re hiding elements in a row or column. You can display a count of hidden elements without extra js loops

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

yeah, that's such a legit use case 💯

Profilbild von Mark Renton
Mark Rentonvor 1 Jahr

+1

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

as in, to record it?

Profilbild von Daniel Adeyemo
Daniel Adeyemovor 1 Jahr

we await The Course, sensei!

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

it's comin'! 🎈

Profilbild von Jude Boachie
Jude Boachievor 1 Jahr

I'm looking for your CSS course

Profilbild von jhey ▲🐻🎈
jhey ▲🐻🎈vor 1 Jahr

the people have spoken – it's coming! 🎈

Ähnliche Videos

don't sleep on using CSS counters for counting your content 👨‍🍳 section::before { content: counters(section,'',pad)'.'counters(content,'',pad) } /* 01.04 */ @​counter-style pad { system: extends decimal; pad: 2 '0'; } check it! 👇
0:33

don't sleep on using CSS counters for counting your content 👨‍🍳 section::before { content: counters(section,'',pad)'.'counters(content,'',pad) } /* 01.04 */ @​counter-style pad { system: extends decimal; pad: 2 '0'; } check it! 👇

jhey ʕ•ᴥ•ʔ

95,627 Aufrufe • vor 1 Jahr

Using the CSS Custom Highlight API to create dynamic typing animations ✨ No need to update or change the DOM content 👀 The content is always there, you're jus' highlighting it to create the effect!
0:29

Using the CSS Custom Highlight API to create dynamic typing animations ✨ No need to update or change the DOM content 👀 The content is always there, you're jus' highlighting it to create the effect!

jhey ʕ•ᴥ•ʔ

86,763 Aufrufe • vor 1 Jahr

once you grasp CSS counters, then you can leverage the cascade 🧑‍🍳 content: counters(section, '.', pad) var(--t, ' '); need a certain section to start at a different number? use scoped custom properties 🫡
0:30

once you grasp CSS counters, then you can leverage the cascade 🧑‍🍳 content: counters(section, '.', pad) var(--t, ' '); need a certain section to start at a different number? use scoped custom properties 🫡

jhey ʕ•ᴥ•ʔ

57,768 Aufrufe • vor 1 Jahr

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

In the next Reforged update, it will be possible to perform all kinds of special attacks with your left hand. You can roll attack, dash attack, duck attack, and even perform heavy attacks and guard counters, with your left handed weapon, without sacrificing blocking ability.
0:21

In the next Reforged update, it will be possible to perform all kinds of special attacks with your left hand. You can roll attack, dash attack, duck attack, and even perform heavy attacks and guard counters, with your left handed weapon, without sacrificing blocking ability.

ELDEN RING Reforged

43,289 Aufrufe • vor 11 Monaten

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇
0:24

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,621 Aufrufe • vor 3 Jahren

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

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs
0:23

The CSS Custom Highlight API lets you highlight search results — Without affecting the DOM structure. ::highlight(search-results) { background-color: #ff0066; color: white; } #CSS #WebAPIs

Bharat Kara

44,405 Aufrufe • vor 2 Monaten

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

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,193 Aufrufe • vor 5 Monaten

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }
0:25

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 Aufrufe • vor 1 Jahr

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!
0:23

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,016 Aufrufe • vor 6 Monaten

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?
0:21

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,682 Aufrufe • vor 3 Jahren

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)
0:48

CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } The last rendering trick is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

437,300 Aufrufe • vor 2 Jahren

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready
0:24

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Roy Quilor

65,130 Aufrufe • vor 3 Jahren

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @​keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇
0:52

CSS Trick ✨ You can create this glitch hover effect by animating pseudoelement content 🎬 button:hover span:after { animation: flip 0.2s calc(var(--i) * 0.05s); } @​keyframes flip { 20% { content: '_'; } 40% { content: var(--c1); } 60% { content: var(--c2); } } It's a funky little track that allows you to animate text flipping with CSS 🤙 Leaning into custom properties, you can make each flip animation random with inline styles 🎨 C l Click Me You make use of each character within the keyframes above. And "--i" communicates the index that you can use for the animation-delay 🙌 That's all there is to it! As always, any requests or suggestions, hit me up! 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

168,331 Aufrufe • vor 2 Jahren

The decision to close police counters has been made without the Mayor or Deputy Mayor even knowing how many people use the counters. @emmabest22 exposes the Deputy Mayor's ignorance 👇
1:19

The decision to close police counters has been made without the Mayor or Deputy Mayor even knowing how many people use the counters. @emmabest22 exposes the Deputy Mayor's ignorance 👇

City Hall Conservatives

54,661 Aufrufe • vor 8 Monaten

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