Discoveries #20 - CSS & UI

Web interfaces are unthinkable without CSS. It has its pitfalls, but when used correctly it’s damn powerful. It’s always incredible what developers do with it. This month’s Discoveries is about the basics and the amazing.

• My Custom CSS Reset
• Defensive CSS
• 10 Useful CSS Tricks for Front-end Developers
• Animated Star Rating
• CSS Marquee Examples
• CSS Rolling Text
• Cool Hover Effects That Use CSS Text Shadow
• Solving 'The Dangler' Conundrum with Container Queries and :has()
• Conditionally Styling Selected Elements in a Grid Container
• Intersection Observer Scrolling Effects

---

My Custom CSS Reset

by Josh Comeau 
https://www.joshwcomeau.com/css/custom-css-reset/

Browsers behave differenly out of the box regarding CSS. Therefore it is always advisable to have a CSS reset. Josh shows us his approach. He also inspired Elly to her Gist.

---

Defensive CSS

by Ahmad Shadeed 
https://defensivecss.dev/

Ahmad is a master of CSS and one of his concerns, which he also points out repeatedly in his blog, is to use styles defensively. He has now made his own website out of this.

---

10 Useful CSS Tricks for Front-end Developers

by Alex Ivanovs 
https://stackdiary.com/useful-css-tricks/

Alex has some useful tips on writing better and smart CSS code. I have to try Shadow for transparent images as soon as possible …

---

Animated Star Rating|IMGFILE

by Jon Kantner 
https://codepen.io/jkantner/pen/BarvVNa

Star ratings are everywhere because they encourage the user to interact with the website and may give the following important clues about how good the product is. Jon has taken them to the next level visually with his animations.

---

CSS Marquee Examples

by Ryan Mulligan 
https://codepen.io/hexagoncircle/full/eYMrGwW

Marquee visualizations were all the rage in the 90s, but they still have their place today and are easier to implement than ever before.

---

CSS Rolling Text

by Marcello Lopes 
https://codepen.io/marcell0lopes/pen/oNemQmB

You have to tease something with more than one verb? Try this simple solution from Marcello on scrolling text with pure CSS.

---

Cool Hover Effects That Use CSS Text Shadow

by Temani Afif 
https://css-tricks.com/cool-hover-effects-that-use-css-text-shadow/

Hover effects are only useful on computers with mouse support, but how cool you can design them Temani shows us on CSS Tricks.

---

Solving 'The Dangler' Conundrum with Container Queries and :has()

by Dave Rupert 
https://daverupert.com/2022/07/solving-the-dangler-conundrum-with-has-and-container-queries

Grids are super cool, but there is the problem how to style leftovers that doesn’t fit in the matrix. Having a 3 column grid and 12 elements? Fine. But what is with the 13th element? Dave shows us how to deal it it in CSS.

---

Conditionally Styling Selected Elements in a Grid Container

by Preethi 
https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/

Elements in a grid have their style. Period. … Wait, no! It is possible to style an element regarding to its neighbour, as shown in this article, by a clever using of :nth-of-type.

---

Intersection Observer Scrolling Effects

by Jhey 
https://codepen.io/jh3y/pen/xxWyEBQ

Codepen’s user JHey shows us how to animate elements in 5 different ways on scrolling. Pretty neat…