Learn the principles behind the interface
From design to website
Build visually in Webflow, just like you design. Fine-tune typography, spacing, layout, and interactions until everything looks right, then publish your site live.
Manuel Matuzovic · Feb 2, 2023
The accent-color CSS property allows us to specify the accent color for user-interface controls generated by an element. Yeah, I know, yet another property that isn’t new at all, but Safari added support only recently (in 15.4) and I’ve never used it. Reason enough for me to include it in the series. We can use the pr.
Manuel Matuzovic · Feb 1, 2023
The lch() color function allows you to pick colors from the CIELAB color space , which is device-independant and covers the entire gamut (range) of human color perception. Currently, the CSS colors we can define are in the sRGB color space. For the longest time, professional monitors weren’t able to display all possib.
Salesforce UX · Jyoti Iyer · Jan 31, 2023
Good Bot Design Means Never Having to Say: ‘I’m sorry, I didn’t get that’ Hobbitfoot/AdobeStock I am sure you’re familiar with that moment when you’re talking to a bot and you say something — even just “hello” — only to get the reply: “I’m sorry, I didn’t get that.” This unfortunate moment is like a “sorry cliff”: the.
Scott O'Hara · Scott O'Hara · Jan 31, 2023
You may be familiar with ChatGPT. But if you’re not, it’s a very cool chat interface using artificial intelligence to provide human-like responses to the questions you ask it. It is, however, still rather new and depending on what you ask it… well… As the FAQ for ChatGPT explains:
Manuel Matuzovic · Jan 31, 2023
With the relative color syntax we can modify existing colors using color functions. If an origin color is specified, each color channel can either be directly specified, or taken from the origin color and modified. For example, we can take a HEX color and add opacity using the rgb() color function and the from keyword.
EightShapes · Dan Brown · Jan 27, 2023
Expositions, Illustrations, and Annotations to Scott Kubie’s 21 Small Thoughts on IA Scott Kubie wrote 21 thoughts on information architecture, perhaps because he’s too modest to call them truths about information architecture. Scott’s methodical approach to understanding and explaining information architecture appeal.
Manuel Matuzovic · Jan 27, 2023
Rules within a container query only apply to descendants of that container. If you write a media query and you put rules in the media block, the rules apply to the entire document. Apply rules @media (min-width: 1024px) { * { outline: 4px solid } } @media (min-width: 1024px) { .demo1, .demo1 * { outline: 4px solid } }.
Scott O'Hara · Scott O'Hara · Jan 26, 2023
Today, the HTML specification landed a very important change to the dialog element. One that resolves a multi-year discussion on how the dialog element should handle initial focus.
Manuel Matuzovic · Jan 20, 2023
Registering typed custom properties can be useful in container style queries. The following container style query matches because the computed value of both --bg and --color is “red”. html { --color: red; } .card { --bg: red; } /* Condition is true, styles applied */ @container style(--bg: var(--color)) { h1 { border:.
Manuel Matuzovic · Jan 18, 2023
On day 80 , I’ve explained that we can check whether a container has a specific property and value assigned and apply additional styles based on this condition. On day 82 , I’ve explained that the value of a property can come from different sources, undergo adjustments before it becomes the actual value, and take on d.
GOV.UK User Research · Paloma Jain · Jan 16, 2023
Good communication with participants is a foundation of user research. But how can you get meaningful insights when communicating isn't straightforward.
Manuel Matuzovic · Jan 13, 2023
Container style queries allow querying the computed values of a query container. No browser supports it yet, but we should be able to do something like this: .card { aspect-ratio: 1 / 1; } .card--wide { aspect-ratio: 16 / 9 } @container style(aspect-ratio: 16 / 9) { img { object-fit: cover; } } We can check whether a.
Manuel Matuzovic · Jan 12, 2023
You can use the @supports rule to check whether a browser supports a specified font technology or font format. font-tech() @supports font-tech(palettes) { .palette { display: block; } } @supports not font-tech(incremental) { .incremental { display: block; } } @supports font-format(woff2) { .woff { display: block; } }.
Manuel Matuzovic · Jan 12, 2023
I know I’m really late to the party, but I finally understood why people find color functions like hsl() , hwb() , or lab() so appealing. There are many reasons, but one of them is that in combination with custom properties, working with color functions is so much easier, cleaner, and understandable compared to workin.
Manuel Matuzovic · Jan 11, 2023
Container queries come with their own units. [data-sample] div { outline: 10px solid; overflow: auto; margin: 1rem; } .sample2 div { container-type: inline-size; } [data-sample] h2 { background-color: yellow; border: 5px solid; padding: 1rem; margin: 1rem; inline-size: 80cqi; } Container query units work the same as v.
Manuel Matuzovic · Jan 9, 2023
You can use the override-colors property to override colors in a font palette. Color fonts come with one or more predefined color palettes. You can select them by using the font-palette property. You can also define your own color palettes or change specific colors in a palette using the override-colors property. @fon.
Manuel Matuzovic · Jan 6, 2023
Apparently, multicolored typefaces on the web are a thing. You can use and modify them in CSS. @font-face { font-family: 'Rocher'; src: url('/blog/2023/100daysof-day76/RocherColorGX.woff2'); } @font-palette-values --pink { font-family: 'Rocher'; base-palette: 1; } @font-palette-values --green { font-family: 'Rocher';.
Manuel Matuzovic · Jan 3, 2023
If you’re creating a masonry layout, the packing algorithm puts items into the column with the most space by default. This can cause accessibility issues. The masonry-auto-flow property gives us control over the automatic placement of items in a masonry layout. In the following layout, you can see how the tile for “Da.
Manuel Matuzovic · Dec 29, 2022
In a media query, it’s obvious what width means. It always refers to the width of the viewport. With size container queries it’s not that obvious. /* Kicks in when the viewport has a minimum width of 500px */ @media (min-width: 500px) { body { background-color: hotpink; } } width in a size container query queries the.
Manuel Matuzovic · Dec 23, 2022
Relative units used in container queries work differently than relative units in media queries. If you use em in a media query, the font-size of the , , or any other element on the page doesn't matter. That's because relative length units in media queries are based on the initial value , which means that units are nev.
