Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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...

alicalimli_dev's profile picture

Ali

23,457 subscribers

16,738 Aufrufe • vor 2 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

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. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

65,416 Aufrufe • vor 2 Monaten

z-index in CSS explained 🫣
0:11

z-index in CSS explained 🫣

Ryan Els

616,644 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Monaten

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️
0:14

How I build with Claude Fable 5 1. CSS position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️

FHILY👑

117,775 Aufrufe • vor 26 Tagen

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,760 Aufrufe • vor 1 Monat

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

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

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,135 Aufrufe • vor 1 Jahr

`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; }
0:11

`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; }

OPM

34,747 Aufrufe • vor 3 Monaten

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷
0:11

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷

Adam Argyle

22,444 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Monaten

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.
0:11

If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property. It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.

Jakub Krehel

139,937 Aufrufe • vor 1 Monat

Coming Soon: Spectrum V2 An entire redesign of the Index discovery & creation process 🌤️ Easy to discover indexes with social elements to make backing an index easier than ever. Launching an index is seamless with quick asset picking that has zero complexity or pool logic. Deployment will also showcase the best of what interactive sites have to offer as evidenced by the animation below 🧺 We can't wait for you to experience the new and improved Spectrum soon.
0:14

Coming Soon: Spectrum V2 An entire redesign of the Index discovery & creation process 🌤️ Easy to discover indexes with social elements to make backing an index easier than ever. Launching an index is seamless with quick asset picking that has zero complexity or pool logic. Deployment will also showcase the best of what interactive sites have to offer as evidenced by the animation below 🧺 We can't wait for you to experience the new and improved Spectrum soon.

Prism

58,610 Aufrufe • vor 1 Monat

A warmer and more humid feel for many of us on Thursday, but will there be any sunshine to go along with the higher temperatures or will your umbrella still be required? Find out in the 4cast 👇
0:11

A warmer and more humid feel for many of us on Thursday, but will there be any sunshine to go along with the higher temperatures or will your umbrella still be required? Find out in the 4cast 👇

Met Office

14,707 Aufrufe • vor 1 Monat

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇
0:14

CSS Tip! ⚡️ You could use CSS trig functions to calculate animation-delay 🤓 Using them here with custom props for this DNA strand! 👩‍🔬 .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) 👈 * var(--speed) * -1s ); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

182,569 Aufrufe • vor 3 Jahren

weekend project - ship any container to cloudflare with a single command
0:12

weekend project - ship any container to cloudflare with a single command

brandon

46,274 Aufrufe • vor 10 Monaten

Gen-Z has been watching EVERYTHING. We've SEEN that President Trump has arrested more child traffickers than any other President. We've SEEN that Trump has ENDED the persecution of Christians & more. Gen-Z STANDS WITH Trump. Gen-Z will be the generation that CONTINUES MAGA!🇺🇸
0:15

Gen-Z has been watching EVERYTHING. We've SEEN that President Trump has arrested more child traffickers than any other President. We've SEEN that Trump has ENDED the persecution of Christians & more. Gen-Z STANDS WITH Trump. Gen-Z will be the generation that CONTINUES MAGA!🇺🇸

Bo Loudon

338,594 Aufrufe • vor 3 Monaten

Describe this backyard container bar with one word only
0:15

Describe this backyard container bar with one word only

Architecture Presentation

52,854 Aufrufe • vor 7 Monaten

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }
0:15

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

Soren

77,915 Aufrufe • vor 4 Monaten

ASIC Mining Container Delivery 🚚 💰Valued at over $40,000 ⚡️Capacity: 150 BITMAIN L9s 🇬🇧 We’re excited to announce that the first of many new ASIC mining containers has arrived at our UK facility! This container is fully equipped with PDUs, advanced networking infrastructure, and optimised air cooling technology. 🦾 This strengthens our existing infrastructure even further, boosting our hosting capacity, increasing scalability for future growth and providing greater mining power to fortify $HASHAI. 👀 We will be sharing more updates with you soon, as we begin filling this container full of ASIC miners in preparation for our tokenised #RWAs.
0:13

ASIC Mining Container Delivery 🚚 💰Valued at over $40,000 ⚡️Capacity: 150 BITMAIN L9s 🇬🇧 We’re excited to announce that the first of many new ASIC mining containers has arrived at our UK facility! This container is fully equipped with PDUs, advanced networking infrastructure, and optimised air cooling technology. 🦾 This strengthens our existing infrastructure even further, boosting our hosting capacity, increasing scalability for future growth and providing greater mining power to fortify $HASHAI. 👀 We will be sharing more updates with you soon, as we begin filling this container full of ASIC miners in preparation for our tokenised #RWAs.

Hash AI

37,152 Aufrufe • vor 1 Jahr