Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears....

alicalimli_dev's profile picture

Ali

23,461 subscribers

64,818 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 1 ay önce

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)
0:11

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Dima Belyaev

27,616 görüntüleme • 6 ay önce

This one line of CSS will make your website feel more native. On mobile, tapping on clickable elements triggers an ugly blue highlight. This gets rid of it: html { -webkit-tap-highlight-color: transparent; } If you found this one useful, follow for more. ❤️
0:16

This one line of CSS will make your website feel more native. On mobile, tapping on clickable elements triggers an ugly blue highlight. This gets rid of it: html { -webkit-tap-highlight-color: transparent; } If you found this one useful, follow for more. ❤️

Ali

29,131 görüntüleme • 1 ay önce

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 görüntüleme • 6 ay önce

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:
0:16

✨ An example showing the power of container queries, inspired from Github. Notice that when the option is "Media," the UI items remain hidden despite sufficient space. However, when "container" is active, they are visible. Learn more:

Ahmad Shadeed

25,953 görüntüleme • 2 yıl önce

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️
0:10

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️

Ali

11,645 görüntüleme • 28 gün önce

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️
0:16

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️

Ali

26,692 görüntüleme • 1 ay önce

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️
0:16

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️

Ali

10,622 görüntüleme • 1 ay önce

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable" fixes this
0:11

Tip: prevent scrollbars from re-wrapping text. Using "scrollbar-gutter: stable" fixes this

Florian

163,494 görüntüleme • 8 gün önce

They claim if you cut the tip off a banana & put it in a container with paper towel, then place in the fridge that the banana can last for months without turning brown. I’ve NEVER heard of this. Is it true? Anyone actually do this??
0:11

They claim if you cut the tip off a banana & put it in a container with paper towel, then place in the fridge that the banana can last for months without turning brown. I’ve NEVER heard of this. Is it true? Anyone actually do this??

Derrick Evans

374,669 görüntüleme • 6 ay önce

I ran this a few more times, Gemini won every time. Seems like it was quicker picking up on this prompt: "All containers are **identical** — same OS, same services, same vulnerabilities. Whatever exploit works on one container works on all of them. Your container has the same weaknesses as your targets." and examined its own container to find the vulns faster than the others
0:18

I ran this a few more times, Gemini won every time. Seems like it was quicker picking up on this prompt: "All containers are **identical** — same OS, same services, same vulnerabilities. Whatever exploit works on one container works on all of them. Your container has the same weaknesses as your targets." and examined its own container to find the vulns faster than the others

SIGKITTEN

35,964 görüntüleme • 4 ay önce

When the lens of a camera tilts so that it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of farming operations. [📹 albaxya0]
0:15

When the lens of a camera tilts so that it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of farming operations. [📹 albaxya0]

Massimo

1,626,807 görüntüleme • 2 yıl önce

If there's one thing I disagree with, it's removing content, but I think this particular move ruins a good character. This move is a neutral skip. A lot of range, a lot of tracking to the right, some tracking to the left. you have to be more clean with your side step, +5 on block and ch launcher. I think if there's one move that ruins this character's , it's this move.
0:18

If there's one thing I disagree with, it's removing content, but I think this particular move ruins a good character. This move is a neutral skip. A lot of range, a lot of tracking to the right, some tracking to the left. you have to be more clean with your side step, +5 on block and ch launcher. I think if there's one move that ruins this character's , it's this move.

ALL leemishima

56,657 görüntüleme • 1 yıl önce

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙
0:18

one trick behind this demo 👇🎞️ .images { translate: 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙

jhey ʕ•ᴥ•ʔ

46,527 görüntüleme • 1 yıl önce

When the lens of a camera tilts so that it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of a construction site. [📹 albaxya0]
0:17

When the lens of a camera tilts so that it is no longer parallel to the camera's image sensor, it shifts the plane of focus and alters the depth of field. This is a tilt shift view of a construction site. [📹 albaxya0]

Massimo

6,503,022 görüntüleme • 2 yıl önce

A cool feature of the Disclosure component is that it uses the hidden=until-found attribute so you can still search the content while it is closed with ctrl+F (currently supported in Chrome). The disclosure will automatically open when content is found inside! 😲
0:14

A cool feature of the Disclosure component is that it uses the hidden=until-found attribute so you can still search the content while it is closed with ctrl+F (currently supported in Chrome). The disclosure will automatically open when content is found inside! 😲

Devon Govett

10,687 görüntüleme • 1 yıl önce

karina: i used to have an instagram when i was a student (shy) and my fans found it. maybe its the nostalgia, but i like the split collage layout vibe user jiman is really fond of split collage layout 🥰
0:12

karina: i used to have an instagram when i was a student (shy) and my fans found it. maybe its the nostalgia, but i like the split collage layout vibe user jiman is really fond of split collage layout 🥰

Sunshine

268,471 görüntüleme • 4 ay önce

This is one of the most powerful AI workflows I've ever built. It literally saves me 10+ hours/week and has replaced a full-time employee on my team. If you make content on X, you NEED to replicate this. I just automated 90% of my entire content research process using the new upgraded X API. This dashboard analyses hundreds of my viral tweets, extracts my exact tone/voice, and generates hundreds of new content ideas per day. It also includes a built-in heatmap that highlights when I'm outperforming. If you're looking to build a distribution moat with content/creative, this is a must.
0:12

This is one of the most powerful AI workflows I've ever built. It literally saves me 10+ hours/week and has replaced a full-time employee on my team. If you make content on X, you NEED to replicate this. I just automated 90% of my entire content research process using the new upgraded X API. This dashboard analyses hundreds of my viral tweets, extracts my exact tone/voice, and generates hundreds of new content ideas per day. It also includes a built-in heatmap that highlights when I'm outperforming. If you're looking to build a distribution moat with content/creative, this is a must.

Miles Deutscher

23,382 görüntüleme • 1 ay önce

OKE THIS IS A BIG ONE, i did all the choreo/layout for the main fight section !! here's my favorite shots that i also got to animate !!!!! #ZenlessZoneZero #ゼンゼロ
0:14

OKE THIS IS A BIG ONE, i did all the choreo/layout for the main fight section !! here's my favorite shots that i also got to animate !!!!! #ZenlessZoneZero #ゼンゼロ

ven

140,427 görüntüleme • 5 ay önce

use `𝚏𝚘𝚌𝚞𝚜:𝚛𝚒𝚗𝚐-𝟸` instead of `𝚏𝚘𝚌𝚞𝚜:𝚋𝚘𝚛𝚍𝚎𝚛` to avoid layout shifts when you click a button
0:11

use `𝚏𝚘𝚌𝚞𝚜:𝚛𝚒𝚗𝚐-𝟸` instead of `𝚏𝚘𝚌𝚞𝚜:𝚋𝚘𝚛𝚍𝚎𝚛` to avoid layout shifts when you click a button

Manu Arora

93,759 görüntüleme • 23 gün önce