📌 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

CSS SVH Viewport Unit. 👇

long text in cards or lists needs truncation —... JS slicing works but requires state + recalc on resize. `line-clamp` (or `-webkit-line-clamp;`) does it natively in pure CSS. One class, no code. Cleaner for responsive UIs.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

Seedance 2.0 pro + Blender viewport style transfer below 👇

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

Dropdown using HTML and CSS 🔥 Code in the... comments below👇show 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

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

MiniMax H3 Anime Daily Routine Updated the old prompt.... You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.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

Reminder to use barble clamp

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