正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

Ali

23,457 subscribers

16,738 次观看 • 5 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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

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

67,744 次观看 • 5 个月前

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

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,331 次观看 • 5 个月前

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 🏔️

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👑

120,329 次观看 • 4 个月前

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

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,804 次观看 • 5 个月前

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 🤙

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,904 次观看 • 1 年前

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

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 次观看 • 5 个月前

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.

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,869 次观看 • 4 个月前

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 👇

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 次观看 • 4 个月前

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

shadcn

552,643 次观看 • 3 个月前

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.

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,153 次观看 • 1 年前

Signs are famously frustrating to read in Super Mario 64, with Mario punching the sign instead of reading it. In fact, this was such a problem that Z-Targeting in The Legend of Zelda: Ocarina of Time was invented directly as a result of the team attempting to fix this.

Signs are famously frustrating to read in Super Mario 64, with Mario punching the sign instead of reading it. In fact, this was such a problem that Z-Targeting in The Legend of Zelda: Ocarina of Time was invented directly as a result of the team attempting to fix this.

Supper Mario Broth

211,382 次观看 • 1 年前

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 次观看 • 5 个月前

Kaja Kallas: "The EU today blacklisted Russia for the risk of money laundering. This will slow down and increase the costs of transactions with Russian banks." What does that mean for Russia? All transactions with Russian banks will now be seen as maximum high risk. If a European bank deals with Russia, it will be under additional scrutiny to prove they are not laundering money. Russia might have to route its trade through several intermediaries, pay higher fees, resort to more cash or barter schemes. This can also concern banks from countries "friendly" to Russia if they deal with European banks.

Kaja Kallas: "The EU today blacklisted Russia for the risk of money laundering. This will slow down and increase the costs of transactions with Russian banks." What does that mean for Russia? All transactions with Russian banks will now be seen as maximum high risk. If a European bank deals with Russia, it will be under additional scrutiny to prove they are not laundering money. Russia might have to route its trade through several intermediaries, pay higher fees, resort to more cash or barter schemes. This can also concern banks from countries "friendly" to Russia if they deal with European banks.

Anton Gerashchenko

112,181 次观看 • 8 个月前

What's up drivers!💥 👀 Today we'd like to share with you information about one of the most anticipated features of CarX Drift Racing 3... Car damage system. ✅ Damage to your car will be tied to the physics of the collision. In other words, the nature of the collision will affect the condition of your car afterwards. If you slightly touch the rear fender with the wall - you should expect a nasty scratch and with more serious accidents you can expect body elements deformation and cracks. ✅ Obviously, damage to your car will also depend on the material: steel will bend, glass will crack and shutter, and plastic elements will "bend back" with time. Some elements will fall apart from the car and it's even possible to break them into pieces. ✅ All damage could be repaired - though it'l ltake some time - and you'll be able to set up additional bash bars and other elects to minimize your future crash damage. What additions to this car damage system you'd like to see, drivers? Share your thoughts.

What's up drivers!💥 👀 Today we'd like to share with you information about one of the most anticipated features of CarX Drift Racing 3... Car damage system. ✅ Damage to your car will be tied to the physics of the collision. In other words, the nature of the collision will affect the condition of your car afterwards. If you slightly touch the rear fender with the wall - you should expect a nasty scratch and with more serious accidents you can expect body elements deformation and cracks. ✅ Obviously, damage to your car will also depend on the material: steel will bend, glass will crack and shutter, and plastic elements will "bend back" with time. Some elements will fall apart from the car and it's even possible to break them into pieces. ✅ All damage could be repaired - though it'l ltake some time - and you'll be able to set up additional bash bars and other elects to minimize your future crash damage. What additions to this car damage system you'd like to see, drivers? Share your thoughts.

CarX Technologies

269,173 次观看 • 2 年前

I will be painting not one, but TWO Deltarune soaps to celebrate chapter 5! One of these will be decided by you Soapers. Reply to this with any Deltarune chapter 5 image (nothing crude!!!!) and the reply with the most likes will be painted in 3 business days!

I will be painting not one, but TWO Deltarune soaps to celebrate chapter 5! One of these will be decided by you Soapers. Reply to this with any Deltarune chapter 5 image (nothing crude!!!!) and the reply with the most likes will be painted in 3 business days!

soap of the day

23,027 次观看 • 3 个月前

“I’m fucking JAY-Z!… I’m fucking HOV!” THIS the one right here! Btw, this doesn’t just apply to Drake. This applies to every rapper ever. Actuality, forget rap or music in general. I don’t believe that Shawn “Jay-Z” Carter looks at ANY man in the history of life and wishes he could trade places with them. “FOR WHAT?!”

“I’m fucking JAY-Z!… I’m fucking HOV!” THIS the one right here! Btw, this doesn’t just apply to Drake. This applies to every rapper ever. Actuality, forget rap or music in general. I don’t believe that Shawn “Jay-Z” Carter looks at ANY man in the history of life and wishes he could trade places with them. “FOR WHAT?!”

Luis

26,731 次观看 • 6 个月前

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

122,455 次观看 • 2 个月前

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! ❤️

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,841 次观看 • 4 个月前

🚨 IF YOU HOLD $INDEX, READ THIS. You may not fully understand what you’re holding. AGAIN. You may not understand the financial machine sitting inside your wallet. Let me explain. $INDEX possesses something incredibly powerful: The ability to capture financial value from economic activity regardless of which direction the market moves. Think about what exchanges like Binance have understood for years. Markets can rise. Markets can fall. Markets can go sideways. But people keep trading. And when people trade, fees are generated. That means exchanges can continue extracting value from market activity through bull markets AND bear markets. Now imagine taking that same concept and turning it into a tokenized flywheel. That is what makes Index so interesting. You aren’t simply holding a token. You are holding a claim on a machine designed to convert trading activity into financial assets. And the timing? Potentially fascinating. THE BULL MARKET WITH MAXIMUM ACTIVITY IS ON THE HORIZON. If volatility increases and trading volume explodes, the machine has more activity to feed on. Let’s run the numbers. 📊 TODAY’S EXAMPLE $INDEX did approximately $714,000 in 24H trading volume. A 3% ETH fee hook on $714,000 generates: $714,000 × 3% = $21,420 That’s $21,420 worth of fees entering the flywheel. Now look at what different holdings represent: 50K INDEX = 0.005% of supply 0.005% × $21,420 = $1.071 in stocks 100K INDEX = $2.142 200K INDEX = $4.284 300K INDEX = $6.426 400K INDEX = $8.568 500K INDEX = $10.710 600K INDEX = $12.852 700K INDEX = $14.994 800K INDEX = $17.136 900K INDEX = $19.278 1 MILLION INDEX = $21.420 And this is from a $714K volume day. Now imagine what happens when the market awakens. ⸻ 🚀 NOW LET’S LOOK AHEAD Suppose $INDEX eventually experiences an $8.2 MILLION 24H volume day, similar to the volume $PONS achieved on the last 24H At a 3% fee: $8,200,000 × 3% = $246,000 That’s $246,000 worth of fees. Now the same ownership percentages produce: 50K INDEX = 0.005% = $12.30 in stocks 100K INDEX = $24.60 200K INDEX = $49.20 300K INDEX = $73.80 400K INDEX = $98.40 500K INDEX = $123.00 600K INDEX = $147.60 700K INDEX = $172.20 800K INDEX = $196.80 900K INDEX = $221.40 1 MILLION INDEX = $246.00 Read that again. A single $8.2M volume day could theoretically direct $246K through the fee mechanism. And here’s where the philosophy becomes interesting: The value isn’t only in the token. The value is in the activity the token can capture. Volume becomes fuel. Fees become capital. Capital becomes stocks. Stocks become another layer of productive assets. And those assets can continue compounding the flywheel. CRAZY THING!!! The stocks you collect also appreciate in value. That’s how a token can begin behaving less like a static piece of speculation… …and more like a financial engine connected to economic activity. At sufficient scale, someone holding $INDEX could potentially accumulate stocks at a pace that rivals or even exceeds what some traditional investors accumulate over many years. The market doesn’t have to move in your direction for the machine to work. It simply needs people to keep moving. And markets have a funny habit of doing exactly that. The greatest financial machines don’t need to predict the future. They monetize the activity of everyone else. $INDEX

🚨 IF YOU HOLD $INDEX, READ THIS. You may not fully understand what you’re holding. AGAIN. You may not understand the financial machine sitting inside your wallet. Let me explain. $INDEX possesses something incredibly powerful: The ability to capture financial value from economic activity regardless of which direction the market moves. Think about what exchanges like Binance have understood for years. Markets can rise. Markets can fall. Markets can go sideways. But people keep trading. And when people trade, fees are generated. That means exchanges can continue extracting value from market activity through bull markets AND bear markets. Now imagine taking that same concept and turning it into a tokenized flywheel. That is what makes Index so interesting. You aren’t simply holding a token. You are holding a claim on a machine designed to convert trading activity into financial assets. And the timing? Potentially fascinating. THE BULL MARKET WITH MAXIMUM ACTIVITY IS ON THE HORIZON. If volatility increases and trading volume explodes, the machine has more activity to feed on. Let’s run the numbers. 📊 TODAY’S EXAMPLE $INDEX did approximately $714,000 in 24H trading volume. A 3% ETH fee hook on $714,000 generates: $714,000 × 3% = $21,420 That’s $21,420 worth of fees entering the flywheel. Now look at what different holdings represent: 50K INDEX = 0.005% of supply 0.005% × $21,420 = $1.071 in stocks 100K INDEX = $2.142 200K INDEX = $4.284 300K INDEX = $6.426 400K INDEX = $8.568 500K INDEX = $10.710 600K INDEX = $12.852 700K INDEX = $14.994 800K INDEX = $17.136 900K INDEX = $19.278 1 MILLION INDEX = $21.420 And this is from a $714K volume day. Now imagine what happens when the market awakens. ⸻ 🚀 NOW LET’S LOOK AHEAD Suppose $INDEX eventually experiences an $8.2 MILLION 24H volume day, similar to the volume $PONS achieved on the last 24H At a 3% fee: $8,200,000 × 3% = $246,000 That’s $246,000 worth of fees. Now the same ownership percentages produce: 50K INDEX = 0.005% = $12.30 in stocks 100K INDEX = $24.60 200K INDEX = $49.20 300K INDEX = $73.80 400K INDEX = $98.40 500K INDEX = $123.00 600K INDEX = $147.60 700K INDEX = $172.20 800K INDEX = $196.80 900K INDEX = $221.40 1 MILLION INDEX = $246.00 Read that again. A single $8.2M volume day could theoretically direct $246K through the fee mechanism. And here’s where the philosophy becomes interesting: The value isn’t only in the token. The value is in the activity the token can capture. Volume becomes fuel. Fees become capital. Capital becomes stocks. Stocks become another layer of productive assets. And those assets can continue compounding the flywheel. CRAZY THING!!! The stocks you collect also appreciate in value. That’s how a token can begin behaving less like a static piece of speculation… …and more like a financial engine connected to economic activity. At sufficient scale, someone holding $INDEX could potentially accumulate stocks at a pace that rivals or even exceeds what some traditional investors accumulate over many years. The market doesn’t have to move in your direction for the machine to work. It simply needs people to keep moving. And markets have a funny habit of doing exactly that. The greatest financial machines don’t need to predict the future. They monetize the activity of everyone else. $INDEX

Alexander Legolas

13,621 次观看 • 1 个月前