#csslayout — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #csslayout, aggregated by home.social.
-
For everyone supporting me on Ko-fi and Patreon, a little pure #CSS #3D treat.
❇️ https://ko-fi.com/post/tiles-on-icosahedron-R3F224ZYR4
❇️ https://www.patreon.com/anatudor/posts/tiles-on-166570091
#cssGrid #code #coding #frontend #jade #sass #Maths #geometry #cssLayout #cssVariables #interaction #web #dev #webDev #webDevelopment
-
For everyone supporting me on Ko-fi and Patreon, a little pure #CSS #3D treat.
❇️ https://ko-fi.com/post/tiles-on-icosahedron-R3F224ZYR4
❇️ https://www.patreon.com/anatudor/posts/tiles-on-166570091
#cssGrid #code #coding #frontend #jade #sass #Maths #geometry #cssLayout #cssVariables #interaction #web #dev #webDev #webDevelopment
-
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
-
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
-
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
-
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
-
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
-
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
-
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.
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
🚀 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
-
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
-
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
-
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
-
I have a new article out!
Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier told me to be proud of it 😛
#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween
-
I have a new article out!
Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier told me to be proud of it 😛
#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween
-
Auch eine deutsche Version ist wie immer verfügbar: ich habe einen neuen Artikel verfasst! Er beschreibt, wie man ein CSS Grid erstellt, das ein klassisches mehrspaltiges Raster (z. B. 12 Spalten) mit Layout-Breakouts (Full Bleed) kombiniert.
CodePen-Demos des finalen Layouts und zwei Vorversionen sind im Tutorial verlinkt.
Ich freue mich sehr über Kritik!#frontend #css #cssGrid #gridLayout #cssLayout #webDev
https://www.sebkln.de/tutorials/css-layout-breakout-mit-multi-column-grid/
-
Auch eine deutsche Version ist wie immer verfügbar: ich habe einen neuen Artikel verfasst! Er beschreibt, wie man ein CSS Grid erstellt, das ein klassisches mehrspaltiges Raster (z. B. 12 Spalten) mit Layout-Breakouts (Full Bleed) kombiniert.
CodePen-Demos des finalen Layouts und zwei Vorversionen sind im Tutorial verlinkt.
Ich freue mich sehr über Kritik!#frontend #css #cssGrid #gridLayout #cssLayout #webDev
https://www.sebkln.de/tutorials/css-layout-breakout-mit-multi-column-grid/
-
I wrote a new article! It explains how to create a CSS Grid that combines a classic multi-column grid (e.g. 12 columns) with Layout Breakouts (Full Bleed positioning). Allows for flexible alignment of grid items.
CodePen demos for the final layout and two pre-versions are linked in the tutorial. Yes, there's a tl;dr. 😄
I am very interested in your feedback!#frontend #css #cssGrid #gridLayout #cssLayout #webDev
https://www.sebkln.de/en/tutorials/css-layout-breakout-with-multi-column-grid/
-
I wrote a new article! It explains how to create a CSS Grid that combines a classic multi-column grid (e.g. 12 columns) with Layout Breakouts (Full Bleed positioning). Allows for flexible alignment of grid items.
CodePen demos for the final layout and two pre-versions are linked in the tutorial. Yes, there's a tl;dr. 😄
I am very interested in your feedback!#frontend #css #cssGrid #gridLayout #cssLayout #webDev
https://www.sebkln.de/en/tutorials/css-layout-breakout-with-multi-column-grid/
-
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
-
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
-
There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.
Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/
Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq
#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables
-
There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.
Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/
Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq
#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables
-
Simple layout base https://codepen.io/thebabydino/pen/ZYQJWRd
A little start with the basics @codepen demo.
#CSS #cssGrid #cssLayout #coding #web #dev #webDevelopment #webDev #code #frontend
-
Simple layout base https://codepen.io/thebabydino/pen/ZYQJWRd
A little start with the basics @codepen demo.
#CSS #cssGrid #cssLayout #coding #web #dev #webDevelopment #webDev #code #frontend
-
Hey, look, this little thing got featured!
#CSS #cssGrid #cssLayout #borderImage #web #dev #webDevelopment #webDev #code #coding #frontend #fullBleed
-
Hey, look, this little thing got featured!
#CSS #cssGrid #cssLayout #borderImage #web #dev #webDevelopment #webDev #code #coding #frontend #fullBleed