Loading video...

Video Failed to Load

Go Home

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required 𝚑𝚎𝚊𝚍𝚎𝚛 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢; 𝚝𝚘𝚙: 𝟶; } @𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) { .𝚗𝚊𝚟-𝚋𝚊𝚛 { 𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖; 𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖; 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸); } } the browser...

mannupaaji's profile picture

Manu Arora

43,370 subscribers

110,181 views • 23 days ago •via X (Twitter)

EducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required
0:19

you can create a CSS only carousel with CSS `𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙` .𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚡: 𝚊𝚞𝚝𝚘; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚝𝚢𝚙𝚎: 𝚡 𝚖𝚊𝚗𝚍𝚊𝚝𝚘𝚛𝚢; 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚊𝚍𝚍𝚒𝚗𝚐-𝚒𝚗𝚕𝚒𝚗𝚎: 𝟷.𝟻𝚛𝚎𝚖; /* 𝚖𝚊𝚝𝚌𝚑𝚎𝚜 𝚢𝚘𝚞𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚙𝚕/𝚙𝚛 */ } .𝚌𝚊𝚛𝚍 { 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚗𝚊𝚙-𝚊𝚕𝚒𝚐𝚗: 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚏𝚕𝚎𝚡-𝚜𝚑𝚛𝚒𝚗𝚔: 𝟶; } When you scroll, it snaps exactly in the center of the card Super fun to use, easy to implement, no javascript required

Manu Arora

55,350 views • 2 months ago

One of my favourites latest CSS property is 𝚊𝚗𝚌𝚑𝚘𝚛 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗𝚒𝚗𝚐 .𝚝𝚛𝚒𝚐𝚐𝚎𝚛 { 𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚒𝚙; } .𝚝𝚘𝚘𝚕𝚝𝚒𝚙 { 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚏𝚒𝚡𝚎𝚍; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚒𝚙; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚛𝚎𝚊: 𝚝𝚘𝚙 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚝𝚛𝚢-𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜: 𝚏𝚕𝚒𝚙-𝚋𝚕𝚘𝚌𝚔; } Eliminates complex javascript logic or positioning, improved performance. Best part is the smart repositioning to avoid overflow Simple, clean solution!
0:14

One of my favourites latest CSS property is 𝚊𝚗𝚌𝚑𝚘𝚛 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗𝚒𝚗𝚐 .𝚝𝚛𝚒𝚐𝚐𝚎𝚛 { 𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚒𝚙; } .𝚝𝚘𝚘𝚕𝚝𝚒𝚙 { 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚏𝚒𝚡𝚎𝚍; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚒𝚙; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚛𝚎𝚊: 𝚝𝚘𝚙 𝚌𝚎𝚗𝚝𝚎𝚛; 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚝𝚛𝚢-𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜: 𝚏𝚕𝚒𝚙-𝚋𝚕𝚘𝚌𝚔; } Eliminates complex javascript logic or positioning, improved performance. Best part is the smart repositioning to avoid overflow Simple, clean solution!

Manu Arora

46,923 views • 2 months ago

we just added Apple Pay support in Chrome and non-Safari browsers on Dodo Payments. you can now use Apple Pay on desktop too. it opens a QR popup, you scan it with your iPhone, and pay. no Safari required. most payment providers still haven't shipped this. they're stuck on older Apple Pay versions that only work in Safari. we updated to the latest spec and built the cross-browser flow from scratch. this is live now for all merchants. no integration changes needed.
0:15

we just added Apple Pay support in Chrome and non-Safari browsers on Dodo Payments. you can now use Apple Pay on desktop too. it opens a QR popup, you scan it with your iPhone, and pay. no Safari required. most payment providers still haven't shipped this. they're stuck on older Apple Pay versions that only work in Safari. we updated to the latest spec and built the cross-browser flow from scratch. this is live now for all merchants. no integration changes needed.

Ayush Agarwal

31,066 views • 25 days ago

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome
0:14

100% css 0% javascript Pretty cool that you can run animations like this now off the main thread, was always a worry implementing a scroll animation knowing some users might see "jank" Safari and Firefox are sleeping far too long, scroll driven animations are awesome

Dev Ed

88,209 views • 1 year ago

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO
0:15

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Chrome for Developers

12,135 views • 1 month ago

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge
0:10

🟢 News: GPU compute in the browser is finally real. WebGPU now ships by default in Chrome, Firefox, Safari, and Edge—not a polyfill, not behind a flag. You can run LLMs client-side. Transformers.js and ONNX Runtime already ship WebGPU backends. Eight years of spec work. No more asterisks. 🔗 #WebGPU #GPU #Chrome #Safari #Firefox #Edge

WebGL / WebGPU

12,762 views • 4 months ago

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan
0:16

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,617 views • 1 year ago

browser automation still sucks at scale. not necessarily because playwright or Stagehand are bad, but because we keep treating chromium like a normal service. the solution is to stop managing browsers yourself! i wrote a blog post on what changes when browsers go serverless
0:15

browser automation still sucks at scale. not necessarily because playwright or Stagehand are bad, but because we keep treating chromium like a normal service. the solution is to stop managing browsers yourself! i wrote a blog post on what changes when browsers go serverless

harsehaj ⋆˙⟡

30,711 views • 5 months ago

When immutably updating a JavaScript array, you can now use `.with` instead of the spread syntax 💡 (supported by all browsers!)
0:11

When immutably updating a JavaScript array, you can now use `.with` instead of the spread syntax 💡 (supported by all browsers!)

bolt.new

35,167 views • 2 years ago

*You can make popup modals with 2 lines of HTML* Yesterday, Firefox 🔥 125 came out. This means all major browsers now support all the fantastic features of popover, which means an entire class of JavaScript libraries (and I suspect about 10% of @GitHub) is now fully obsolete.
0:15

*You can make popup modals with 2 lines of HTML* Yesterday, Firefox 🔥 125 came out. This means all major browsers now support all the fantastic features of popover, which means an entire class of JavaScript libraries (and I suspect about 10% of @GitHub) is now fully obsolete.

Joost de Valk

221,102 views • 2 years ago

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 views • 3 years ago

this is the worst launchpad ever finally you can only create vamp or derivative > pick a coin and make it chill house > no wallet connect needed > only 0.02 extra fee vs pumpfun og > all fees go straight into buying chillhouse > choose if your ticker ends in fuck or chll > no official chillieve token available
0:15

this is the worst launchpad ever finally you can only create vamp or derivative > pick a coin and make it chill house > no wallet connect needed > only 0.02 extra fee vs pumpfun og > all fees go straight into buying chillhouse > choose if your ticker ends in fuck or chll > no official chillieve token available

AI BALD KING

25,706 views • 1 month ago

Excited about a new debug feature in Visual Studio Code for all languages: Triggered Breakpoints! Triggered breakpoints are activated only when another breakpoint gets hit. Really useful when looking for that one bug in code with lots of events or loops:
0:13

Excited about a new debug feature in Visual Studio Code for all languages: Triggered Breakpoints! Triggered breakpoints are activated only when another breakpoint gets hit. Really useful when looking for that one bug in code with lots of events or loops:

Connor Peet

33,190 views • 2 years ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 views • 8 months ago

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.
0:14

Are those … CSS Scroll-Driven Animations on in Safari? Yes they are! What made this possible is a polyfill our team has been working on: Load up the polyfill JS file and … that’s it - there is no other step.

Bramus

42,676 views • 2 years ago

Track exactly when blocks of content load in our new origin trial → Container Timing extends Element Timing so you can measure when entire components like widgets or sidebars are available to your users.
0:13

Track exactly when blocks of content load in our new origin trial → Container Timing extends Element Timing so you can measure when entire components like widgets or sidebars are available to your users.

Chrome for Developers

11,555 views • 1 month ago

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

425,540 views • 8 months ago

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 views • 1 month ago

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 views • 1 year ago