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.
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
Ana Tudor ๐ฏ