Sunkanmi Fafowora

The lch() color function specifies colors in the CIELAB color space. Unlike the lab() function — which uses Cartesian coordinates — the lch() function uses polar coordinates to set color in terms of its hue and chroma, which is generally more intuitive.

The lab() color function represents colors in the CIELAB color space. It displays them according to their lightness, red/green axis position, blue/yellow axis position, and an optional alpha transparency value.

The CSS hsl() function represents color in the sRGB color space and displays it according to its hue, saturation, and lightness. We provide a value for each of those three channels to produce a color.

.element {
  color: hsl(90deg, 50%, 

…

The CSS rgb() color function represents color in the sRGB color space specifying their redness (r), greenness (g), and blueness (b), and an optional transparency value.

The CSS light-dark() function takes two color values — one for “light” mode and one for “dark” mode — and automatically switches between them depending on which mode is currently active. It works by following the user’s color-scheme value, which …

The random() function in CSS is an experimental feature (i.e., not supported in any browser) that returns a random numeric value or random choice among multiple values from a range you specify. It works the same as JavaScript’s Math.random function…

AVIF (AV1 Image File Format) is a modern image file format specification for storing images that offer a much more significant file reduction when compared to other formats like JPG, JPEG, PNG, and WebP. Version 1.0.0 of the AVIF specification …

The CSS border-image-outset property sets distance between an element’s border-image area and how far it goes beyond the element’s border-box.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

…

The CSS border-image-width property is used to determine the width of the border’s image file, as provided by the CSS border-image-source property.

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%;
  border-image-repeat: repeat; 
}

…