#csssubgrid — Public Fediverse posts

#Development #Techniques
Adventures in CSS subgrid · Lining up content across multiple columns https://ilo.im/16b6q4

_____
#Alignments #Content #Layouts #CssGrid #CssSubgrid #Browsers #WebDev #Frontend #CSS

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

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

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

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

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

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

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

So this got picked 🌟

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

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

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

🚀 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

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

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