Victor Loux — bookmarks tagged “css”

Next-level frosted glass with backdrop-filter • Josh W. Comeau

joshwcomeau.com/css/backdrop-filter/

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.

Resolution by iOS device — iOS Ref

iosref.com/res

New CSS that can actually be used in 2024 | Thomasorus

thomasorus.com/new-css-that-can-actually-be-used-in-2024.html

For example, a border placed on the left of a text would stay on the left if the text reading direction was reverted, instead of moving to the right to have a similar user experience. Logical properties avoid this issue by allowing setting properties on the X (called inline) and Y (called _block) axis.

css, tag
tips, tag
web, tag
8 months ago

Typeset

typeset.lllllllllllllllll.com/

CSS @property and the New Style

ryanmulligan.dev/blog/css-property-new-style/

Great Animations

emilkowal.ski/ui/great-animations

What it takes to craft great animations.

Modern Font Stacks

modernfontstacks.com/

System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

Poline — esoteric color palette generator

meodai.github.io/poline/

poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar coordinates to generate pleasing color palettes.

Fallback Font Generator

screenspan.net/fallback

Defensive CSS

defensivecss.dev/

Practical CSS and design tips that helps in building future-proof user interfaces.

systemfontstack

systemfontstack.com/

Adactio: Journal—Declarative design

adactio.com/journal/18982

Defining the inputs instead of trying to control the outputs.

Understanding Layout Algorithms

joshwcomeau.com/css/understanding-layout-algorithms/

As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties to calculate layouts. In this blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it effectively.

Right-to-left Styling

rtlstyling.com/posts/rtl-styling

Designing Beautiful Shadows in CSS

joshwcomeau.com/css/designing-shadows/

When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, I'll show you how.