Inautilo#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
Ana Tudor 🐯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
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
N-gated Hacker News🚀 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
https://www.joshwcomeau.com/css/subgrid/ #CSSSubgrid #CSSLayout #WebDevelopment #BrowserSupport #GridDesign #HackerNews #ngated
Brand New Layouts with CSS Subgrid • Josh W. Comeau
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now. ✨
#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
Brand New Layouts with CSS Subgrid • Josh W. Comeau
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now. ✨
#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
