Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.

Handcrafted interactions focused on utility & beauty.

About Roel: https://pixelambacht.nl

Depending on whether the information is technical or not, you might want different font features.

29:20 - "Never grab a Monotype font"

font-variant-numeric: tabular-nums;

@font-face {
size-adjust: 110%;
}

https://wakamaifondue.com/
(what can my font do?)

https://pixelambacht.nl/

A look at text wrap balancing in CSS

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI.

A simple guide to building keyboard-activated layout grid overlays with JavaScript and CSS for web development projects.

Here’s my starting point for custom focus outlines:

*:focus-visible {
outline-color: currentColor;
outline-style: solid;
outline-offset: .25rem;
outline-width: .25rem;
}

In this guide, I describe the available Clojure web framework options and give my recommendations.

I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf t…

How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)

OpenFreeMap – Open-Source Map Hosting lets you display custom maps on your website and apps for free.

Who is behind this project and how can I follow it?
I’m Zsolt Ero (blog, email).

After 9 years of running my own map tile infrastructure for MapHub, I’ve open-sourced it and launched OpenFreeMap.

X: @hyperknot (for details)
X: @OpenFreeMapOrg (for announcements)

GitHub: openfreemap and openfreemap-styles

Little relatively unknown fact, if you have an id attribute on an element, you can reference it in this way:

<button id="yo">…</button>

yo.onclick = ...

Furthermore, child elements with a name attribute can be referenced in this way:

<form id="x"> 
  <input name="em"> 
</form>

x.em.onclick = ...

A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.

Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.

What it takes to craft great animations.

• Great animations feel natural
• Great animations are fast
• Great animations have a purpose
• Great animations are interruptible

So you think you know box shadows huh? I bet you didn't know they could do this.

About a year ago at Wix, we abruptly realized that, too often, we were not giving users the answers to these questions. When we got this wake-up call, we felt compelled to act swiftly, and not just to address the one error message that woke us up.

This is an example of a bad error message. It uses an inappropriate tone, passes the blame, speaks in technical jargon and is too generic.

https://medium.com/deliveroo-design/how-to-write-any-error-message-7a3348cce594

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

I get asked this question often, and my answer is always the same: Use SVG if you can! I have nothing against SVG. It’s just another approach for creating shapes using another syntax with another set of considerations. If SVG was my expertise, then I would be writing about that instead!