Loading video...

Video Failed to Load

Go Home

Tip: *only* using CSS you can apply styles to a number input conditionally depending on whether its value is within our out of range 🤯

mgechev's profile picture

Minko Gechev

57,930 subscribers

108,671 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 views • 1 year ago

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔
0:17

Tailwind CSS Tip ✨ You can create a floating input form with Tailwind CSS using ":placeholder-shown" pseudo class. Live Demo & Code 👇 (8/30) follow for 22 more tips 🔔

Surjith S M ✪

173,050 views • 3 years ago

1/ Today, Veo 2, our state-of-the-art video model, is rolling out to Gemini Advanced + Whisk! You can create 8s, high-res videos from text prompts in Google Gemini with fluid character movement + lifelike scenes across a range of styles. Tip: the more detailed your description, the better.
0:16

1/ Today, Veo 2, our state-of-the-art video model, is rolling out to Gemini Advanced + Whisk! You can create 8s, high-res videos from text prompts in Google Gemini with fluid character movement + lifelike scenes across a range of styles. Tip: the more detailed your description, the better.

Sundar Pichai

295,405 views • 1 year ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,769 views • 8 months ago

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨
0:17

Complex UI: New web APIs in disguise 🥸 These balance sliders are basic input [type=range] with labels and some extra elements The magic comes from using a scroll animation on the range thumb and using it to drive a custom property that updates styles on the visuals ✨

jhey ʕ•ᴥ•ʔ

113,025 views • 2 years ago

💡 DevTools tip: You can make your console.log stand out by adding some CSS to it! 🎨
0:13

💡 DevTools tip: You can make your console.log stand out by adding some CSS to it! 🎨

bolt.new

32,471 views • 2 years ago

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:
0:17

💡 Do you know about the `clip` value? In CSS, we can clip a container along a single axis by using the `clip` value. Learn more in this interactive article about the `clip` value:

Ahmad Shadeed

10,451 views • 1 year ago

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 views • 3 years ago

In #Kotlin 1.9, instead of using the "until" infix function to create a range that's exclusive on its upper bound, you can use the new open-ended range operator... or as I like to call it, the alligator operator.
0:15

In #Kotlin 1.9, instead of using the "until" infix function to create a range that's exclusive on its upper bound, you can use the new open-ended range operator... or as I like to call it, the alligator operator.

Dave Leeds

34,165 views • 2 years ago

I made a version of this using only modern CSS. 👀
0:13

I made a version of this using only modern CSS. 👀

H. Kyle Foster

64,815 views • 7 months ago

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,561 views • 3 years ago

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan
0:16

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,617 views • 1 year ago

Offside according to yesterdays linesman, one of a number of questionable decisions. How can you get this that badly wrong 🤯🤯
0:10

Offside according to yesterdays linesman, one of a number of questionable decisions. How can you get this that badly wrong 🤯🤯

Bustleholme FC

77,138 views • 2 months ago

More of a fun fact than a tip but you can kill those pesky sentries on the towers using focus light to set the towers on fire 🔥
0:10

More of a fun fact than a tip but you can kill those pesky sentries on the towers using focus light to set the towers on fire 🔥

KJPlays

51,824 views • 2 months ago

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇
0:18

CSS Tip! 🤙 These buttons from Michaël are ace 🔥 But, how would you make them? 👀 You could use background-attachment: fixed and update a conic-gradient position depending on the interaction design 🤔 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

267,557 views • 3 years ago

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:
0:13

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:

Ali

12,980 views • 1 month ago

#RiseoftheRonin Weapons: Katana By freely combining these based on enemies' weapons and your own combat style, you can enjoy a wide range of tactics. Introducing the actions and techniques of the "katana" and its combat styles, "Mumyo-ryu" and "Hokushin Itto-ryu."
0:13

#RiseoftheRonin Weapons: Katana By freely combining these based on enemies' weapons and your own combat style, you can enjoy a wide range of tactics. Introducing the actions and techniques of the "katana" and its combat styles, "Mumyo-ryu" and "Hokushin Itto-ryu."

Team NINJA

31,447 views • 1 year ago

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!
0:17

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

149,788 views • 2 months ago

Amazing display of strength to pull out the boar using only its teeth.
0:13

Amazing display of strength to pull out the boar using only its teeth.

Damn Nature You Scary

57,698 views • 8 months ago