#csslayout — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #csslayout, aggregated by home.social.
-
My take on `box-sizing: border-box` https://www.reddit.com/r/css/comments/1tblbzy/comment/oliq6z6/
TL;DR unlearn adding it to the reset, as well as setting dimensions (width/ height) explicitly.
👋 to @kevinpowell for giving me a video to link to 😀
👋 to @mia for the cool article on `body` margin to reference 😎
#CSS #code #coding #cssLayout #web #dev #webDev #webDevelopment
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
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
-
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
-
RE: https://mastodon.social/@anatudor/115934384628757666
This is the thing that brought me to this question, live demo on @codepen: https://codepen.io/thebabydino/pen/XJKpYmr
#CSS #cssLayout #cssGrid #code #grid #web #dev #webDev #webDevelopment #coding #frontend
-
Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg
Just scroll-driven animation magic 🪄✨ - no other tricks.
#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout
-
Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg
Just scroll-driven animation magic 🪄✨ - no other tricks.
#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout
-
Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg
Just scroll-driven animation magic 🪄✨ - no other tricks.
#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout
-
Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg
Just scroll-driven animation magic 🪄✨ - no other tricks.
#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout
-
Clip element on #scroll - a little pure #CSS demo I made on @codepen https://codepen.io/thebabydino/pen/vEGBOrg
Just scroll-driven animation magic 🪄✨ - no other tricks.
#cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #cssClipPath #cssGrid #cssLayout
-
This is what I see browsers actually doing: what I want in my simple, no wrap use case.
Slightly different things in the hypothetical case.
Chrome, Firefox, Epiphany below.
Also, please don't make fun of my browser themes. I'm a visual person, so I use themes that visually differentiate one browser from another.
-
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
-
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR
#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend
-
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR
#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend
-
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR
#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend
-
Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇
Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR
#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend
-
Fit an integer number of columns of a certain minimum width within parent, overflow the rest - live on @codepen https://codepen.io/thebabydino/pen/EaPKmRq
Details on technique in this public Ko-fi post https://ko-fi.com/Post/Fit-an-integer-number-of-equal-columns-overflow-t-I2I81M09YY - if this helps you in any way, please remember praise doesn't keep me afloat financially... but you can! And consider supporting my work by becoming a monthly supporter or with a one time tip.
#CSS #grid #cssGrid #code #coding #web #dev #webDev #webDevelopment #frontend #cssLayout #layout
-
Remake of an old, old @codepen animation with 2025 #CSS https://codepen.io/thebabydino/pen/jOZPZL
Now using `conic-gradient()` + `mask` instead of an SVG segments ring image. CSS `grid` for layout. Container query units so ring sizes adapt to number of rings (passed to CSS via a var) & available space. And more, check it out! 🐱
Original code preserved in Pen description for web history.
#conicGradient #cssGradient #code #coding #frontend #cssGrid #cssLayout #web #dev #webDev #webDevelopment #containerQueries
-
A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP
Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.
#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
-
A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP
Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.
#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
-
A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP
Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.
#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
-
A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP
Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.
#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
-
A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP
Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.
#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
-
It's 2025 and here's a little @codepen demo illustrating the grid stacking concept: https://codepen.io/thebabydino/pen/RNabXqX
The base & hover image, the cart & fave button - all stacked up in the same grid cell on the 1st row. The images stretch to fill the grid cell, the buttons are in opposing corners. #CSS
https://mastodon.social/@anatudor/113774781963966085
#cssGrid #cssLayout #code #coding #web #dev #frontend #webDevelopment #webDev
-
I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/
It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries
-
I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/
It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries
-
I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/
It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries
-
I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/
It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries
-
I have a new article out on Frontend Masters: Non-Square Image Blur Extensions https://frontendmasters.com/blog/non-square-image-blur-extensions/
It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
#cssGrid #cssLayout #cssFunction #filter #cssFilter #SVG #svgFilter #code #coding #web #dev #webDevelopment #webDev #frontend #containerQueries
-
🚀 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 -
🚀 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 -
🚀 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 -
🚀 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 -
I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.
This is what subgrid was made for!
#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment