Lmst

#CssSubgrid

The tiny details make the difference - check out those roundings in the cards demo!

Even cooler: the shape depends on the size of the sibling it wraps around, no magic numbers. If we need the shape to grow (for ex if we want it to have more content), there's no need to change any clip-path or mask.

#CSS #SVG #filter #svgFilter #cssSubgrid #cssLayout #cssGrid

Screenshot highlighting the card corner roundings around their round and pill-shaped siblings.

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

Screenshot of animated 3D carousel, where the items are placed on the inside of a cylinder approximation.

Screenshot of light blue to dark blue top to bottom gradient with a pixelated grain.

Screenshot showing cards smoothly wrapping around circular/ pill shaped elements.

Live demo on @codepen https://codepen.io/thebabydino/pen/WbxpKPQ

#CSS #SVG #filter #cssLayout #cssGrid #cssSubgrid #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend

Demo screenshot. Shows cards with smooth roundings around buttons.

So this got picked 🌟

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #svgFilter #frontend #coding #web #dev #webDev #webDevelopment #code

Screenshot of notification saying "CodePen picked your Pen Concave rounding shape depending on sibling content reflow!"

Wake up, wake up, wake up!

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published a massive post about an improved technique for flexible irregular shapes.

❇️ https://ko-fi.com/post/New-year-new-technique-S6S21RHL27

❇️ https://www.patreon.com/posts/new-year-new-147448951

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #containerQueryUnits #code #container #svgFilter #coding #frontend #web #dev #webDev #webDevelopment

A square image with cutouts depending on the dimensions of corner elements, dimensions that in turn depend on how the text in those corner elements reflows at different viewports.

Stepped shape with rounded corners on the right, step height depending on the height of the elements on the left, whose height is given by their content and how it wraps at different viewports.

Irregular shaped image with both convex & concave roundings. Shape depends on the dimensions and aspect ratio of other elements, how they scale/ wrap as the viewport changes.

Three cards wrap around buttons of different sizes in the bottom right corner. All corners of the card shapes, whether convex or concave, are rounded.

Super simple 🦌 profile cards, content aligned with subgrid - all essential layout in just 6 #CSS declarations!

Check it out on @codepen https://codepen.io/thebabydino/pen/gbMPXde

#cssLayout #cssGrid #cssSubgrid #code #web #dev #webDev #webDevelopment #coding #frontend

Demo screenshot with DevTools grid overlays on top.

🚀 Wow, get ready to revolutionize your layouts with CSS Subgrid! 🎉 Because who doesn't want to juggle more grid syntax while praying for browser support? 🙄 Dive into the thrilling peril of 'nested grid numbers' and 'subgrid gotchas'—sounds like a fun Saturday night, right? 😂
https://www.joshwcomeau.com/css/subgrid/ #CSSSubgrid #CSSLayout #WebDevelopment #BrowserSupport #GridDesign #HackerNews #ngated

#Development #Examples
Brand new layouts with CSS subgrid · “Subgrid unlocks exciting new layout possibilities.” https://ilo.im/168p12

_____
#CssGrid #CssSubgrid #Layouts #Grids #Browser #Design #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Building a multi-stage timetable · How modern CSS powers a cutting-edge layout https://ilo.im/168i5y

_____
#ModernCSS #CssGrid #CssSubgrid #ScrollDrivenAnimations #Calendar #Browser #WebDev #Frontend #HTML #CSS

Concave rounding header. Shape on the right depends on content on the left. Real transparency. Using #CSS subgrid and #SVG filters.

Live demo on @codepen https://codepen.io/thebabydino/pen/mdNeKwE

How would you do this? Try to think about it before checking my solution!

#cssGrid #cssLayout #cssSubgrid #coding #svgFilter #filter #frontend #code #web #dev #webDev #webDevelopment

Screenshot. Shows a page with a header having on the right and image shaped in steps depending on the size of the content on the left. The steps are rounded at both the convex and concave corners.

Real transparency behind text/ around scrollable image. Shape with both convex and concave roundings changes as the text reflows. No JS, text isn't split into a span per line.

Can you figure out how to do this before checking out my solution? https://www.reddit.com/r/css/comments/1ojp1da/comment/nm589sd/

Live on @codepen https://codepen.io/thebabydino/pen/wBMEdJp

#CSS #concave #cssLayout #cssGrid #web #cssSubGrid #SVG #filter #svgFilter #code #coding #dev #webDevelopment #webDev #frontend

#Development #Techniques
Tabs with ‘details’, grid, and subgrid · A modern HTML/CSS approach using no hacks https://ilo.im/167ye4

_____
#HtmlDetails #CssGrid #CssSubgrid #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

#Development #Techniques
Untangling nested interactive elements · How CSS subgrid helps solve a common issue https://ilo.im/166j78

_____
#Links #Buttons #CSS #CssSubgrid #Accessibility #WebDev #Frontend

#Development #Techniques
Enhancement of a simple layout · Smarter layout flow using CSS subgrid https://ilo.im/165g9x

_____
#Layout #Columns #Browser #FluidDesign #WebDesign #WebDev #Frontend #CSS #CssGrid #CssSubgrid

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

We add a `.shape` element which in also covers all of the 4 cells of its parent's grid and also inherits its `.back` parent grid via `subgrid`.

This element creates our shape via two pseudos positioned in the 1st grid cell (clipped) and across the 2nd column (avoiding heading).

#CSS #layout #cssLayout #cssGrid #cssSubgrid #code #coding #frontend #web #dev #webDev #webDevelopment

We create a 2×2 header grid with the height of the 2nd row and the width of the 1st column given by the dimensions of the element (the heading) in the cell where they meet.

We also have another `.back` element covering all 4 grid cells & inheriting parent grid via `subgrid`.

2×2 grid on header.

`.back` stretches across all grid cells & inherits this grid.

Heading just in bottom left cell.

#CSS #layout #cssLayout #cssGrid #cssSubgrid #frontend #code #coding #web #webDev #dev #webDevelopment

Screenshot showing the grids highlighted via DevTools. The width of the first column is given by the amount of text content inside the heading.

#Development #Techniques
How to align column rows with CSS subgrid · Aligning content of boxes that sit side by side https://ilo.im/15ydwz

_____
#Layout #WebDev #Frontend #CSS #CssGrid #CssSubgrid

If you're a $5+ patron on Patreon, I've just posted a very special and cool interactive demo. With explanations about the concepts it illustrates + the demo itself is heavily commented as the viewport-adaptive layout part is very interesting too.

https://www.patreon.com/posts/swap-channels-98985162

#svg #svgFilter #css #cssLayout #code #cssSubgrid #containerQuery #cssGrid #coding #webDev #webDevelopment #frontend