Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 3 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 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

66,222 görüntüleme • 3 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 • 3 ay önce

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,941 görüntüleme • 2 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,804 görüntüleme • 3 ay ö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,904 görüntüleme • 1 yıl ö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 • 3 ay önce

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

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

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.
0:15

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

549,637 görüntüleme • 1 ay önce

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,153 görüntüleme • 1 yıl önce

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.
0:19

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

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates
0:13

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates

Ibelick

131,343 görüntüleme • 2 yıl önce

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
0:17

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

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.
0:12

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

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.
0:18

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,120 görüntüleme • 2 yıl önce

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!
0:15

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

“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?!”
0:15

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

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:
0:15

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

118,925 görüntüleme • 16 gün ö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,841 görüntüleme • 3 ay önce

How fvcking retarded must one be to believe in this horsesh*t? Harris IS STILL in the office and is not doing anything to bring the prices down or to fix economy but want you to believe that if you will vote for her she has the plan to fix it all.
0:13

How fvcking retarded must one be to believe in this horsesh*t? Harris IS STILL in the office and is not doing anything to bring the prices down or to fix economy but want you to believe that if you will vote for her she has the plan to fix it all.

I Meme Therefore I Am 🇺🇸

689,321 görüntüleme • 2 yıl önce