CSS shape() is now Baseline Newly Available → The... shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().show more

I've created a simple website that allows you to... play with squircles using modern CSS `corner-shape`show more

Good news for web typography: text-indent with each-line and... hanging keywords is now Baseline Widely Available → You can now create sophisticated, print-inspired layouts with CSS that work across all major engines.show more

💡 CSS Tip! Two circles, one arrow, and CSS... magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.show more

Create this responsive flex layout using just HTML and... CSS 🚀show more

💡 CSS Tip! Create a Sticky Header that "sticks"!... A fancy effect powered by Scroll-Driven Animations and shape().show more

Create responsive footer with subscribe form using CSS and... HTML 🚀 Code in the comments 🧑‍💻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

📌 2 lines of CSS to create a responsive Grid

Two ways to create responsive input fields in CSS ✨

"Learn CSS: Clipping with SVG, shape-outside, shape-margin" by Victor A

Responsive table with resizable columns using HTML, CSS and... JavaScript 🚀 Code in the comments 🧑‍💻show more

CSS Tip! ✨ Combine :has() and trig functions to... select previous siblings and create an Apple-style OS dock 🔥 CSS only, no JS! 🤯 .b:has(+ .b:hover), .b:hover + .b { flex: calc(0.2 + (sin(30deg) * 1.5)); translate: 0 calc(sin(30deg) * -75%); } CodePen.IO link below! 👇show more

extra detail: animate a CSS custom property from 0... to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);show more

Create responsive holy grail layout with CSS grid 💪🚀

#CSS sibling-index() and sibling-count() available Chrome Canary with experiments... enabled! easily stagger effects like: `transition-delay: calc(sibling-index() * .1s);` more info and a Codepen to fork ⤷show more

Create these burgers using HTML and CSS 🚀 Code... in the comments 👨‍💻show more

Create this layout using nested css grids and media... queries 💪show more

Use CSS custom properties and the sin() trigonometric function... to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }show more

Create this sidebar using HTML, CSS and JavaScript 🚀... Code in the comments 👨‍💻show more