Rob's Avatar

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

124
Followers
355
Following
653
Posts
29.10.2024
Joined
Posts Following

Latest posts by Rob @lloveras.info

Preview
Lessons Learned from Failed Demos: Pure CSS Nav Thumb Flip on Scroll A list of items with thumbnails that flip into place as needed. Can we ditch the JavaScript?

#css

frontendmasters.com/blog/nav-thu...

06.03.2026 03:59 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
The Odometer Effect (without JavaScript) We can take a value set in an HTML attribute and use it in CSS, even extracting each individual digit in order to animate separately.

#css

frontendmasters.com/blog/the-odo...

06.03.2026 03:57 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
The Big Gotcha of Anchor Positioning As it stands, you have to think about the layout engine and whether an element is

#css #Anchor-Positioning

frontendmasters.com/blog/the-big...

06.03.2026 03:56 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Create a reflective glow effect with CSS
Create a reflective glow effect with CSS YouTube video by Kevin Powell

#css

www.youtube.com/watch?v=IXC8...

05.03.2026 01:10 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Video thumbnail

team i'm FIRED UP about these gnarly gotchas with Anchor Positioning in CSS.

02.03.2026 22:28 ๐Ÿ‘ 65 ๐Ÿ” 9 ๐Ÿ’ฌ 3 ๐Ÿ“Œ 3
Preview
GitHub - millionco/react-doctor: Let coding agents diagnose and fix your React code Let coding agents diagnose and fix your React code - millionco/react-doctor

#reactjs

github.com/millionco/re...

01.03.2026 16:15 ๐Ÿ‘ 1 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0

This got me riled up enough to make a video about why it might feel like CSS is now doing things that JS should be doing, but really, these modern features are allowing us to use CSS for what it should be used for, instead of hacking solutions with JS.

www.youtube.com/watch?v=GTCJ...

27.02.2026 17:42 ๐Ÿ‘ 36 ๐Ÿ” 5 ๐Ÿ’ฌ 2 ๐Ÿ“Œ 2
Frontend News #21: Multi-Column Layouts, :heading Pseudo-Class, Scaling Elements
Frontend News #21: Multi-Column Layouts, :heading Pseudo-Class, Scaling Elements YouTube video by CSS Weekly

#css

www.youtube.com/watch?v=ZlsF...

27.02.2026 22:31 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
CSS text-indent Keywords?
CSS text-indent Keywords? YouTube video by CSS Weekly

#css
@cssweekly.com

www.youtube.com/watch?v=rUOS...

26.02.2026 02:14 ๐Ÿ‘ 1 ๐Ÿ” 0 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 0
Create Responsive Grid Layout in 1 Line
Create Responsive Grid Layout in 1 Line YouTube video by Theo Soti

#css

www.youtube.com/watch?v=Ix_L...

26.02.2026 02:10 ๐Ÿ‘ 1 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
lloveras.info Rob Lloveras Blog The personal blog of Rob Lloveras, a software engineer sharing tutorials, projects on CSS, web development, JavaScript, React, TypeScript, and modern UI/UX. Learn best practices, performance tips, an...

www.lloveras.info

25.02.2026 22:59 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
CSS is too powerful now
CSS is too powerful now YouTube video by Kevin Powell

#css

www.youtube.com/watch?v=Y-3t...

25.02.2026 20:08 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0

When I started playing with it one year ago.

bsky.app/profile/css-...

20.02.2026 12:30 ๐Ÿ‘ 9 ๐Ÿ” 1 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 0
Preview
Is it scrolled? Is it not? Let's find out with CSS @container scroll-state() queries | utilitybend Learn how CSS @container scroll-state queries let you detect stuck, snapped, scrollable, and scrolled states without JavaScript. Available in Chrome 144.

#css

utilitybend.com/blog/is-it-s...

22.02.2026 19:01 ๐Ÿ‘ 1 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
A native way of having more than one thumb on a range slider in HTML | utilitybend Accessible and styled multi-handle range sliders in HTML? We should explore this option. And I need your help!

๐Ÿš€ There should be a native way to have more than one thumb on a range slider. For this, I need your help. I created a starting point and would love you all to talk about it and give some feedback. It still has a lot of room to grow. Let's slide! ๐Ÿ› ๐Ÿ‘

utilitybend.com/blog/a-nativ...

17.10.2025 08:49 ๐Ÿ‘ 23 ๐Ÿ” 11 ๐Ÿ’ฌ 3 ๐Ÿ“Œ 1
Preview
An in-depth guide to customising lists with CSS Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

piccalil.li/blog/an-in-d...

19.02.2026 12:05 ๐Ÿ‘ 25 ๐Ÿ” 7 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 2
Preview
The corner cases of implementing CSS corner-shape in Blink ย |ย  Blog ย |ย  Chrome for Developers Learn about the complexity of implementing the corner-shape feature.

The math in this had my head spinning a bit, but I love reading about the types of things we'd never think of that come up when browser engineers have to implement new CSS features, like @nomster.bsky.social does in this post.

developer.chrome.com/blog/impleme...

19.02.2026 13:46 ๐Ÿ‘ 14 ๐Ÿ” 1 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
5 CSS fouls that I see way too often
5 CSS fouls that I see way too often YouTube video by Kevin Powell

Video is here if you're interested: youtu.be/J_cnZa6UzVI

19.02.2026 17:40 ๐Ÿ‘ 11 ๐Ÿ” 3 ๐Ÿ’ฌ 4 ๐Ÿ“Œ 0
Preview
Why is Anchor Positioning not working? Learn the edge cases that prevent anchor positioning from working correctly

#css

css-tip.com/anchor-issues/

20.02.2026 05:11 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0

Anchor positioning is supported in all major browsers and will soon be used widely. Learn how it properly works before you start hating this cool feature ๐Ÿ‘‡

19.02.2026 17:52 ๐Ÿ‘ 22 ๐Ÿ” 6 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 1

And the first one of them is out, curious what you think of it (especially if you're on mobile)

youtube.com/shorts/zJ3WE...

19.02.2026 20:44 ๐Ÿ‘ 25 ๐Ÿ” 3 ๐Ÿ’ฌ 4 ๐Ÿ“Œ 0
A funny dog picture

A funny dog picture

A flower shape looks better for that dog ๐Ÿ˜Ž

codepen.io/t_afif/pen/X...

I like the fact that I already have a bunch of shape() ready to be used by simply changing clip-path with border-shape ๐Ÿ˜

19.02.2026 22:38 ๐Ÿ‘ 7 ๐Ÿ” 1 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 0
Preview
CSS Animation Triggers: Playing animations on scroll without scrubbing. It's a match! | utilitybend CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience. A Valentine's special.

#css

utilitybend.com/blog/css-ani...

20.02.2026 04:58 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
Typographic Scales in CSS with :heading(), sibling-index(), and pow() Learn how to build flexible, mathematical typographic scales using :heading(), sibling-index(), and pow() for cleaner CSS design systems.

#css

www.alwaystwisted.com/articles/bui...

20.02.2026 04:43 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Video thumbnail

In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing).

Drag the nodes, and the shortest path will update in real-time!

css-tip.com/graph-theory/

A fun demo powered by all the modern & cool CSS features ๐Ÿคฉ

16.02.2026 15:30 ๐Ÿ‘ 122 ๐Ÿ” 23 ๐Ÿ’ฌ 9 ๐Ÿ“Œ 5
Preview
Nice Select ยท February 3, 2026 Building a modern custom select with base-select.

Does exactly what it says on the tin. The new <select> styling stuff is truly a game changer.

nerdy.dev/nice-select

16.02.2026 16:01 ๐Ÿ‘ 16 ๐Ÿ” 3 ๐Ÿ’ฌ 1 ๐Ÿ“Œ 0
Preview
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions โ€” Smashing Magazine Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to wri...

#css

www.smashingmagazine.com/2026/02/css-...

17.02.2026 03:40 ๐Ÿ‘ 1 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
CSS Bar Charts Using Modern Functions | CSS-Tricks CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

#css

css-tricks.com/css-bar-char...

17.02.2026 03:39 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Scaley Mask Image Hover ยท February 8, 2026 img :hover { scale : 1.2 ; clip-path : inset (10 % round 20 px ) ; } nice, n&#39; simple ( codepen )

#css

nerdy.dev/scaley-mask-...

14.02.2026 15:10 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0
Preview
Nice Select ยท February 3, 2026 Building a modern custom select with base-select.

#css #html

nerdy.dev/nice-select

14.02.2026 15:08 ๐Ÿ‘ 0 ๐Ÿ” 0 ๐Ÿ’ฌ 0 ๐Ÿ“Œ 0