Rob
@lloveras.info
Front End Web Dev
Love #CSS , #SASS , #SCSS , #Reactjs
https://www.sharemydevstack.dev/
https://lloveras.info
https://codepen.io/Sensiblemnd
https://github.com/Sensiblemnd/css-debug
Love #CSS , #SASS , #SCSS , #Reactjs
https://www.sharemydevstack.dev/
https://lloveras.info
https://codepen.io/Sensiblemnd
https://github.com/Sensiblemnd/css-debug
Reposted by Rob
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Reposted by Rob
Something we’re always looking for is usages of container queries and their units that you might not have thought of. Ryan has exactly that for you here.
ryanmulligan.dev/blog/transit...
ryanmulligan.dev/blog/transit...
Transition to the Other Side with Container Query Units
How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions.
ryanmulligan.dev
November 12, 2025 at 4:04 PM
Something we’re always looking for is usages of container queries and their units that you might not have thought of. Ryan has exactly that for you here.
ryanmulligan.dev/blog/transit...
ryanmulligan.dev/blog/transit...
Reposted by Rob
💡 CSS Tip!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
November 13, 2025 at 10:38 AM
💡 CSS Tip!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Using modern CSS to create a responsive list of stacked images. The overlap will automatically adjust based on the available space and the number of images.
css-tip.com/responsive-s...
No hardcoded values, no magic numbers, and the gap is transparent!
Reposted by Rob
"You don’t need to be a hot-shot developer to get this working. Anybody who has access to their website’s CSS can do it."
www.hustlersquad.net/words/fluid-...
www.hustlersquad.net/words/fluid-...
HUSTLERSQUADGRAFFICKS
I'm a visual designer specialising in web design, typography and layout. Approaching every project with a systematic mindset, I strive to make digital products and services straightforward for real…
www.hustlersquad.net
November 13, 2025 at 4:05 PM
"You don’t need to be a hot-shot developer to get this working. Anybody who has access to their website’s CSS can do it."
www.hustlersquad.net/words/fluid-...
www.hustlersquad.net/words/fluid-...
Reposted by Rob
Good news!
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
una.im
November 12, 2025 at 10:55 PM
Good news!
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Range syntax for style queries and if() functions has shipped in Chrome!
Check it out:
una.im/range-style-...
Reposted by Rob
“::details-content”: Style Expandable Content Without Wrapper Divs, by @trevorlasn.bsky.social:
https://www.trevorlasn.com/blog/details-content-pseudo-element
#disclosurewidgets #css #html
https://www.trevorlasn.com/blog/details-content-pseudo-element
#disclosurewidgets #css #html
::details-content: style expandable content without wrapp...
The ::details-content pseudo-element lets you style the expandable content of details elements separately from the summary, no divs needed.
www.trevorlasn.com
November 12, 2025 at 8:34 PM
“::details-content”: Style Expandable Content Without Wrapper Divs, by @trevorlasn.bsky.social:
https://www.trevorlasn.com/blog/details-content-pseudo-element
#disclosurewidgets #css #html
https://www.trevorlasn.com/blog/details-content-pseudo-element
#disclosurewidgets #css #html
Reposted by Rob
I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.
Thankfully, it doesn’t have to be complicated: cloudfour.com/thinks/simpl...
#HTML #CSS #JavaScript
Thankfully, it doesn’t have to be complicated: cloudfour.com/thinks/simpl...
#HTML #CSS #JavaScript
Simple One-Time Passcode Inputs
Fully functional OTP entry may be easier than you think.
cloudfour.com
November 11, 2025 at 4:46 PM
I’ve seen one-time passcode (“OTP”) interfaces cause undue stress in otherwise level-headed #WebDev teams.
Thankfully, it doesn’t have to be complicated: cloudfour.com/thinks/simpl...
#HTML #CSS #JavaScript
Thankfully, it doesn’t have to be complicated: cloudfour.com/thinks/simpl...
#HTML #CSS #JavaScript
Reposted by Rob
Staggered Animation with #CSS sibling-* Functions: "This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside." frontendmasters.com/blog/stagger...
Staggered Animation with CSS sibling-* Functions
The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.
frontendmasters.com
November 11, 2025 at 6:02 PM
Staggered Animation with #CSS sibling-* Functions: "This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside." frontendmasters.com/blog/stagger...
Reposted by Rob
#CSS Animations That Leverage the Parent-Child Relationship: "When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage." css-tricks.com/css-animatio...
CSS Animations That Leverage the Parent-Child Relationship | CSS-Tricks
When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage.
css-tricks.com
November 11, 2025 at 8:02 PM
#CSS Animations That Leverage the Parent-Child Relationship: "When we change an element’s intrinsic sizing, its children are affected, too. This is something we can use to our advantage." css-tricks.com/css-animatio...
Reposted by Rob
Using border-image, the blur seems to wash it out quite a bit, which is why I'm guessing you used 2? I switched it to a background image, and it seems to work okay with only one.
This is a bit of a quick and messy job, but I think it looks okay 🤷
codepen.io/kevinpowell/...
This is a bit of a quick and messy job, but I think it looks okay 🤷
codepen.io/kevinpowell/...
Fancy button
...
codepen.io
November 10, 2025 at 3:11 PM
Using border-image, the blur seems to wash it out quite a bit, which is why I'm guessing you used 2? I switched it to a background image, and it seems to work okay with only one.
This is a bit of a quick and messy job, but I think it looks okay 🤷
codepen.io/kevinpowell/...
This is a bit of a quick and messy job, but I think it looks okay 🤷
codepen.io/kevinpowell/...
Reposted by Rob
The @ scope CSS at-rule limits where styles apply by defining a scoped area within the DOM. It helps prevent style conflicts by containing selectors to a specific element and its descendants, improving modularity and component-based design.
#css
#css
November 10, 2025 at 9:11 AM
The @ scope CSS at-rule limits where styles apply by defining a scoped area within the DOM. It helps prevent style conflicts by containing selectors to a specific element and its descendants, improving modularity and component-based design.
#css
#css
Reposted by Rob
Magnificent SVGs With
Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties — Smashing Magazine
SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements…
www.smashingmagazine.com
November 10, 2025 at 6:01 PM
Magnificent SVGs With