~frontendfocus | Bookmarks (13)

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.

concrete.css: A Simple Classless CSS Stylesheet — Works like an opinionated extension for Normalize.css and includes a media query to switch to dark mode based on system settings.

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.

Accessible Forms with Pseudo Classes — How to create a simple contact form using semantic HTML and the :focus-within CSS class. (Sidebar: Nice to see CSS Tricks is back publishing again!)

css2wind: A Minigame for Learning Tailwind CSS — Test your Tailwind CSS know-how with this quick challenge. You’ve got eight properties to translate.

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.

An Interactive Guide to CSS :has() — A superb, extensive guide to everything that you practically need to know about the versatile :has() selector. It's packed with loads of code examples and interactive elements, and will no doubt help unlock some thoughts on how you can use this powerful selector in your own projects.

How I Solved My Font Rendering Problem — A quick fix for a variable font rendering issue on iOS.

CSSformalize: A CSS Framework for Effortless Customization of Native HTML Forms — Offers an interactive UI to allow you to set your CSS custom properties for just about every aspect of your form, with live preview of the form elements, and optional predesigned themes.

Getting Into Web Components: An Intro — 2024 looks like it might be a big one for web components. So, if you want to gain a deeper understanding of things this is a good place to start, as Brecht outlines some of the basics and lingo you’ll need to know.

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.

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.