~frontendfocus | Bookmarks (8)

Infinite-Scrolling Logos in Flat HTML and Pure CSS — Remember the long-deprecated HTML <marquee> element? If you need a horizontal auto-scrolling solution nowadays, you’ll no doubt turn to CSS. This post demonstrates one technique that uses as little HTML as possible.

Setting and Persisting Color Scheme Preferences with CSS and a “Touch” of JavaScript — Done via a combo of prefers-color-scheme, :has(), and JavaScript localStorage.

Modern CSS Tooltips and Speech Bubbles — Everyone knows what tooltips are, but despite their ubiquity, there’s no single, universal way to create them. The author of this post presents some modern techniques to create tooltips with the smallest amount of markup while retaining the most flexibility.

CSS Blurry Shimmer Effect — Yair shares a step-by-step explanation of how this curious blurry shadow effect comes together, using a combo of masks, gradients, and the backdrop-filter property. CodePen demo.

The Complex and Awesome border-image Property — If you’ve never reached for the powerful border-image property, Temani demonstrates some different approaches for using it to create clever decorative accents and shapes.

Top Frontend Tools of 2023 — An excellent collection of popular, useful frontend tools for both CSS and JavaScript developers. You'll no doubt find something here to help speed up your development workflow.

New CSS Viewport Units Don't Solve the Classic Scrollbar Problem — On the problem with 100vw, how browsers handle scrollbars, and what future solutions we may have to solve the issue.

07: The Top Front-End Tools of 2022 — It might feel a bit dated to share a 2022 round-up in 2024, but this collection of handy frontend tools remains relevant nonetheless with plenty of tools to help speed up your workflow.