📌 Forget breakpoints! Use CSS clamp to size your... text based on the viewport width. Sandbox + details below 👇show more

Seems like a good opportunity to share a trick... I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉show more

One line of CSS. Perfectly responsive typography on every... screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!show more

Introducing Customizable Responsive Breakpoints for Divi 5. 🥳 Divi... 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. 👇show more

A 🔥 browser extension every CSS developer must have.... CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount👇show more

How i build with Claude👇 1. CSS blend-mode =... text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save thisshow more

Yes, you can optimize your viewport/render speed by reducing... the maximum size of each texture #b3dshow more

little details 👨‍🍳 tiny css transition-delay on :hover filters... noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }show more

✂️ Achieve optical balance with CSS text-box-trim → Chrome... 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.show more

love the new ebay playbook docs 👏 always good... to see fluid typography scaling in the wild details on how you can do it with CSS 👇show more

CSS Clamp function 🌟 -> clamp() is a function... in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))show more

is this size of soothu 🍑 is enough for... you to spank or else i wanna decrease the size drop your thoughts based on your irl girls soothu sizeshow more

An awesome CSS trick is to use :hover on... the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻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

⚡️ CSS ::highlight() + TreeWalker for dynamic text search:... - No DOM manipulation - Pure CSS ::highlight() styling - Efficient TreeWalker traversal [Code Snippet 👇]show more

Responsive magnetic link effect using CSS anchor positioning 🧲... nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }show more

✍️ New Article: Better fluid sizing with round() I... wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗show more

using css pow() you can create runtime-configurable fluid typography... that responds to viewport or container size 😉 for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px" all powered by pow() and custom propertiesshow more

Want some more sunshine to finish your weekend? You... might be in luck🤞 Find out the details of the #4cast below👇show more

Introducing Windfall - the 1st "Gaming based LST" built... on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below👇 (1/6)show more

What if I will tell you how we could... solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.show more