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

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

На главную

`overscroll-x-contain` should be the default for any horizontal scroll container on the web. by default sideways trackpad swipes trigger browser back navigation and users hate this add this CSS and respect their intent .scroll-container { overscroll-behavior-x: contain; }

mihirtwt's profile picture

OPM

4,889 subscribers

34,747 просмотров • 3 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar
0:12

when you add fade out for the scrollable container, make sure it won't overlap your scroll bar

dmytro

54,436 просмотров • 7 месяцев назад

you don't need threejs for this effect just apply `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser easy to map opacity or scroll to speed too
0:15

you don't need threejs for this effect just apply `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser easy to map opacity or scroll to speed too

daniel petho

116,258 просмотров • 4 месяцев назад

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

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);
0:10

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

jhey ʕ•ᴥ•ʔ

77,042 просмотров • 1 год назад

OPENAI 🔥: Codex now supports Chrome DevTools Protocol for browser use. This is a huge superpower that will allow Codex to inspect and modify any website. It is still a very early implementation, but I bet that in several years this will be a default browser capability. If websites are loaded through AI, users will be able to customize their UX on the fly. This is the way 👀
0:17

OPENAI 🔥: Codex now supports Chrome DevTools Protocol for browser use. This is a huge superpower that will allow Codex to inspect and modify any website. It is still a very early implementation, but I bet that in several years this will be a default browser capability. If websites are loaded through AI, users will be able to customize their UX on the fly. This is the way 👀

🚨 AI News | TestingCatalog

94,784 просмотров • 21 дней назад

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;
0:13

if you’re dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too 🧑‍🍳 mask-repeat: no-repeat; mask-size: calc(100% - 10px) 100px;

jhey ʕ•ᴥ•ʔ

210,662 просмотров • 1 месяц назад

Use `overscoll-behavior-x: none` when building ui with side scroll behavior to avoid browser's built in back page behavior.
0:14

Use `overscoll-behavior-x: none` when building ui with side scroll behavior to avoid browser's built in back page behavior.

Will King

39,180 просмотров • 6 месяцев назад

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀
0:12

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀

David Mráz

22,233 просмотров • 1 год назад

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇
0:18

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇

Kavsoft

20,540 просмотров • 5 месяцев назад

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }
0:17

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

Soren

1,186,911 просмотров • 4 месяцев назад

Should elevators be designed for everyone by default
0:18

Should elevators be designed for everyone by default

Mav

241,764 просмотров • 5 месяцев назад

Every TV should do this by default
0:18

Every TV should do this by default

Stephen Robles

386,270 просмотров • 9 месяцев назад

Intent-based settlement is becoming the default way DeFi executes. Be ready for ORBT.
0:14

Intent-based settlement is becoming the default way DeFi executes. Be ready for ORBT.

ORBT

17,648 просмотров • 21 дней назад

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own
0:14

You can pin a chat scroller to the bottom with CSS 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛, without having to use MutationObserver or 𝚜𝚌𝚛𝚘𝚕𝚕𝚃𝚘() functions ... ... #𝚜𝚌𝚛𝚘𝚕𝚕𝚎𝚛 * { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚗𝚘𝚗𝚎; } #𝚊𝚗𝚌𝚑𝚘𝚛 { 𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠-𝚊𝚗𝚌𝚑𝚘𝚛: 𝚊𝚞𝚝𝚘; 𝚑𝚎𝚒𝚐𝚑𝚝: 𝟷𝚙𝚡; } Browsers run scroll anchoring by default to prevent layout shifts Disable it on children, re-enable it on a 1px anchor at the end and the scroll follows new content down on its own

Manu Arora

66,601 просмотров • 1 месяц назад

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">
0:19

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jhey ʕ•ᴥ•ʔ

307,283 просмотров • 2 лет назад

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎
0:12

🤩 I just learned a super cool trick! Do you know how sometimes you want to record while you scroll on a website, like for a demo or something... But by using the mouse to scroll it turns out to be kinda janky and it doesn't look very good? No? Just me? 🤭 Well, I found out that if you paste this code in the console of your browser: ` setInterval(() => window.scrollBy(0, 4), 16); ` You can make the browser automatically scroll for you! And it looks super cool in the recording! 😎

Florin Pop 👨🏻‍💻

29,839 просмотров • 9 месяцев назад

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇
0:16

don't know the size of a container in CSS? container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇

jhey ʕ•ᴥ•ʔ

65,006 просмотров • 1 год назад

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

RECORD USEAGE LAST 30 DAYS 📈 Carbon Browser has surged in downloads and DAUs (daily active users) the last 30 days! Carbon is will on it's way to becoming a top 3 internet browser as we continue to focus on updates and browsing speed. Once #CarbonBrowser breaks the top 12 browsers list it will be shown as an option to be set as a default browser for 500 million users in Europe 🇪🇺 This will further accelerate the growth of Carbon Browser / $CSIX as the Fastest Growing #web3 Browser in the world! Onwards #CSIX 🔥
0:12

RECORD USEAGE LAST 30 DAYS 📈 Carbon Browser has surged in downloads and DAUs (daily active users) the last 30 days! Carbon is will on it's way to becoming a top 3 internet browser as we continue to focus on updates and browsing speed. Once #CarbonBrowser breaks the top 12 browsers list it will be shown as an option to be set as a default browser for 500 million users in Europe 🇪🇺 This will further accelerate the growth of Carbon Browser / $CSIX as the Fastest Growing #web3 Browser in the world! Onwards #CSIX 🔥

Carbon Browser

20,795 просмотров • 1 год назад

Yesterday someone on X called me old and unattractive. I get that I’m not for everyone but you have the power to scroll by ☮️✌️
0:19

Yesterday someone on X called me old and unattractive. I get that I’m not for everyone but you have the power to scroll by ☮️✌️

Elaina St James

770,084 просмотров • 2 лет назад