正在加载视频...

视频加载失败

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

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

Minko Gechev

57,951 subscribers

108,676 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

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 🔔

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 次观看 • 3 年前

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.

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

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

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 ✨

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 次观看 • 2 年前

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

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

bolt.new

32,637 次观看 • 2 年前

💡 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:

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

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 🔔

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 次观看 • 3 年前

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.

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 次观看 • 2 年前

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! 👇

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 次观看 • 3 年前

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

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

H. Kyle Foster

64,822 次观看 • 8 个月前

📝 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

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

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

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

Bustleholme FC

77,143 次观看 • 3 个月前

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 🔥

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

52,564 次观看 • 3 个月前

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! 👇

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 次观看 • 3 年前

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

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

Ali

12,980 次观看 • 1 个月前

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

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

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!

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

150,029 次观看 • 2 个月前

3d world abilities of AI models keep getting better, this is @Kling_AI 1.5 It can move around a space in 3d and you can steer its camera movements All based on a single input image

3d world abilities of AI models keep getting better, this is @Kling_AI 1.5 It can move around a space in 3d and you can steer its camera movements All based on a single input image

@levelsio

112,201 次观看 • 1 年前