Example of usage of conic-gradient

object-fit: cover; is the one mostly used because it preserves the ratio of the image and it fits the dimension of the container.

There is multiple use cases:

• user avatars
• logos list
• article thumbnail
• hero background
• displaying videos

background-size is for the background and has 3 values: auto, contain and cover.

TL;DR;
apply every hover effect on devices that can not support the hover effect (smartphones, ...).

Use the @media (hover: hover) media query to target devices that have the :hover effect available, or @media (hover: none).

A state of the art library for vue components

I agree

An interactive gallery that demonstrated what's possible with just CSS gradients.

CSS variables that provoke invalid CSS declarations (for example --foo: ;) are set to unset.

Space toggle for numerical value: calc(1.5 var(--toggle-value, - .4))
with toggle value:

:root {
  --ON: initial
  --OFF: ;
}

Use variables for pure data, not CSS values as CSS values are often bound with a unit.

Relative values inherit as syntax tokens unless the property is registered. Registering a property as allows us to pass down ancestor font sizes.

Again CSS properties:

.box {
  padding: var(--py, 1rem) var(--px, 1rem);
}

.box--some-variant {
  --px: 2rem;
}

👍

• Think about the :empty selector, especially for message errors :)
• :target to select the node targeted by an achor.
• :only-child and :only-of-type selectors

Another minimalistic CSS framework that makes a webpage pretty

A pure CSS form plugin

TL;DR Nearly 50% of HWB possible values tends to grey shades.

In both HWB & HSL colors, we can describe white and black and a full scale of grays using any hue we want. It doesn’t matter what hue we provide in either table

Lucky for us, browsers don’t generally render gradients using naive HSL math: currently browsers convert everything to sRGB before mixing. Gradients in RGB can still get muddy at times

Without auto, the remains 4 / 3, and the image appears stretched. You can avoid the stretching with object-fit:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

Although, if the image isn't actually that aspect ratio, it'll either end up stretched (object-fit: fill), letter-boxed (object-fit: contain), or cropped (object-fit: cover). None of which are ideal.

Using clip-path to define custom shapes inside a container!
Percentages units has the benefit of keeping things responsive
There is many clip-path functions: inset, circle, ellipse, polygon and... path for maximum flexibility

clip-path: inset(x x x x) is useful for clipping blocks of an element and using it as a "controlled" overflow.
This clip-path value represents a thunderbolt: polygon(100% 0, 20% 50%, 35% 50%, 0% 100%, 70% 50%, 50% 50%)

We can transition or animate clip-path. There's one condition. The path must have a consistent structure. For example, if we transition a polygon, that polygon must have a consistent number of points.

Skewing effect: https://codepen.io/enbee81/pen/yLyrmyg

and cyberpunk buttons in CSS: https://jhey.dev/writing/css-cyberpunk-2077-buttons-taking-your-css-to-night-city/

Creating patterns for imgs

This size matches the dimensions of our SVG exports. This is important. This is the one drawback of using clip-path: path(). It's not responsive. The path definition is relative to the dimensions of your element.

Changing the shape:

.portrait {
  transition: clip-path 0.2s, transform 0.2s;
  transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
  clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
  --scale: 1.15;
  --rotate: 30deg;
  --clip: var(--splattier);
}
.portrait:active {
  --scale: 0.85;
  --rotate: -10deg;
  --clip: var(--splatted);
}