Water.css is a drop-in collection of CSS styles to make simple websites like this just a little bit nicer.

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

and 100 more bytes:

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

Ok why not ? But is this needed ?

To let the animation to the GPU in practice: will-change: transform.

will-change is a property that allows us to hint to the browser that we're going to animate the selected element, and that it should optimize for this case.

A lot of important notions about animations with the transition property!

There is a @media (prefers-reduced-motion: reduce) too.

👍

Research has shown that the ideal line length is about 65 characters. Anywhere between 45 and 85 is generally seen as acceptable, in the context of a roman alphabet.

The solution:

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

ch is a unit, like px or rem. It corresponds to the width of the 0 character in the current font, for the specified font size.

Why even use shadows ?

Shadows imply elevation, and bigger shadows imply more elevation. If we use shadows strategically, we can create the illusion of depth, as if different elements on the page are floating above the background at different levels.

Here's the first trick for cohesive shadows: every shadow on the page should share the same ratio. [...] To ensure consistency, each shadow should use the same ratio between these horizontal and vertical offsets.

By matching the hue and lowering the saturation/lightness, we can create an authentic shadow [same color style] that doesn't have that “washed out” grey quality.

Ideas are:

1. Creating a cohesive environment by coordinating our shadows.
2. Using layering to create more-realistic shadows.
3. Tweaking the colors to prevent “washed-out” gray shadows.

I will think about it the next time I will have an interface to build.

Display the content of possible issues with the

ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s tags.

A comparison of translate, scale, rotate (that can use the turn unit)

I am definitely not a fan of this.

Applying a tons of classes (i.e. one for every css rule) feels wrong to me ! 😱

🤣

🤣

❤️

About CSS

You are the visual translation of information. What good is all the information in the world if we can’t easily understand it? You hold the keys to hierarchy and contrast and layout, the keys to visual communication.

Using <wbr> where it can break. It is useful for URLs.

by the current maintainer of the CSS standard

It is KISS

CSS only alternative to Javascript !!! These patterns are .

One point is that some examples are using a tons of CSS (i.e. Todo List).
Quite are impressive such as the Twitter like animation.

And other are basic and simple such as the ripple effect: https://github.com/mladenplavsic/css-ripple-effect/blob/master/src/ripple.less
EDIT: this ripple effect is independant of the mouse position on click

All is in the name. A simple chart library. It uses CSS variables under the hood.

Apply a display; flex in the container of the <hr /> tag

Expressing px values as rem