Search
- Because somebody hearted this demo I made 7 years ago on @codepen.io and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo codepen.io/thebabydino/...
- I turn 13 on @codepen.io in June, so here are my 13 most hearted demos: 1️⃣ 1092 ♥️ #CSS infinite #scroll gallery codepen.io/thebabydino/... my only one to ever get to 1K ♥️ without being in most hearted of the year mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
- Cross-browser, no image duplication reveal effects with real `img` elements on @codepen.io: codepen.io/thebabydino/... Made this because I saw a version duplicating each image and animating the `clip-path` of the one on top - it's not necessary to do this! #CSS
- I've opted not to use `initial-letter` here since it's not supported cross-browser. But you can shove a `supports` block in there and go wild! developer.mozilla.org/en-US/docs/W... #CSS
- Just in case anyone is wondering how to do this in a better, cross-browser, responsive way... here is a demo on @codepen.io: codepen.io/thebabydino/... I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap. #CSS
- A little helper/ explainer demo on @codepen.io: Polar (r, θ) ➞ Cartesian (x, y) coordinates codepen.io/thebabydino/... Drag the sliders to see how the result changes. #CSS #SVG #Maths #trigonometry
- Someone just hearted this demo I made on @codepen.io back in 2018 and I noticed it still said it only works in Blink browsers. codepen.io/thebabydino/... Not anymore! As of the summer of '24, Firefox also supports registering & animating custom properties! So this is now cross-browser! 🎉🥳 #CSS #3D
- A cool little pure #CSS background #pattern on @codepen.io codepen.io/thebabydino/... Can you figure out how it was made before checking the code? 😼
- Want gradient text? Confused about whether you still need a prefix for `background-clip: text`? Do you still need to use `-webkit-text-fill-color` or you can use it unprefixed or just use `color`? All answers here www.reddit.com/r/css/commen... complete with demos + animation + gradient glow. #CSS
- Pure #CSS #pattern on @codepen.io: connectors codepen.io/thebabydino/... Made with two grids of targets, one with black in the middle, the other one with white, offset by half a background-size. These targets touch diagonally, so their size within background box is computed as in the hand drawing.
- A cool little pure #CSS background attern on @codepen.io: codepen.io/thebabydino/... Can you figure out how it was made before checking the code? 😼
- A little pure #CSS looping animation I coded on @codepen.io in a few minutes years ago codepen.io/thebabydino/... CSS transforms + clip-path + blending. Never shared on bsky 🦋 before because there was no bsky 🦋 back then.
- A little pill shape. Because someone asked how to do this, I had to come up with a solution that uses no extra elements for the rounded side decorations, but also doesn't replace the 4 extra elements with at least just as many background layers. www.reddit.com/r/css/commen... #CSS
- Because someone asked for this on reddit: an image that shows when hovering a nav item, under that nav item, but above all others and follows the pointer motion www.reddit.com/r/css/commen... Uses a tiny bit of #JS until we can get the pointer position in pure #CSS.
- You know when you see an issue with a gradient and you take a screenshot to illustrate the problem, but the screenshot doesn't show the problem, even though you see it on the screen? Losing my mind over this. #CSS
- #CSS only with scroll driven animation rad work @donotfold.bsky.social try it codepen.io/donotfold/pe...
- Haven't been posting much coding stuff this past week as I've found it difficult to focus on it given the state of things in my country 😞 But... I have a new article out! Using Container Query Units Relative to an Outer Container frontendmasters.com/blog/using-c... #CSS
- I just learned how to make this hover effect and it was a bit harder than I expected #css
- Reanimating the #CSS Day Buttons: "These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides." frontendmasters.com/blog/reanima...
- Use #CSS reading-flow for logical sequential focus navigation: "Using layout methods such as grid and flex, it's very easy to create a situation where some users can encounter unexpected jumping around as they navigate around a page." developer.chrome.com/blog/reading...
- Just mistyped "flexbox" as "flexobox" and honestly that kinds of rocks. #CSS
- Practical challenges include managing Critical CSS for responsiveness, CSP compatibility issues, and avoiding Flash of Unstyled Content (FOUC). It adds layers of complexity. #CSS 5/6
- comiCSS #16: fast, faster, fastest comicss.art/comics/16/fa... I liked the idea of having recurring characters, and browsers with feelings and personalities seemed like a good idea (usually making fun of IE). This was the first time they popped up, combined with the Tokyo Olympics. #css #comic
- Check out the ACTING4DHH team in action in their CSI video: www.youtube.com/watch?v=aSod... #DHH #citizenscience #CSS
- The core of good #a11y is proper #HTML markup. I am less critical of controlling ::scroll-markers and ::scroll-button with #CSS. These, like scrollbars, are interactive browser artefacts associated with overflow resulting from visual layout. Concepts hardly transferable to the auditory domain.
- [New blog post] Are CSS Carousels accessible sarasoueidan.com/blog/css-car... In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec. #a11y
