Live and recent posts from across the Fediverse tagged #csslayout, aggregated by home.social.
Rotate & scale card on containing item `:hover` as all other items fade out behind. Using the pure #CSS magic 🪄 of `:has()`!
Bonus: menu that moves where you click on rotated card, taking into account its transform (https://en.wikipedia.org/wiki/Transformation_matrix)
Live on @codepen https://codepen.io/thebabydino/pen/JoExjEz
#Maths #geometry #cssTransforms #dev #web #code #webDev #coding #webDevelopment #frontend #cssGrid #cssLayout
Ever wanted to have a grid with a row that grows with content, but only within certain limits & if it goes above that, the element within should just get a scrollbar?
Think about it, how would you approach this?
Here's a minimal markup and #CSS solution on @codepen
https://codepen.io/thebabydino/pen/rajPMjX?editors=0100
#cssLayout #cssGrid #code #coding #web #dev #webDev #webDevelopment #frontend
A little responsive intro card layout solution on @codepen
https://codepen.io/thebabydino/pen/yygxwZy?editors=1100
#CSS #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout
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
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
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
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.
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
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
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
🚀 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
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
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/
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