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

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

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

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

💡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!show more

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

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

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

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

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

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

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

📝 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 Calderanshow more

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

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

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

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

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

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

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