:Root Selector

A pseudo-class used to define custom CSS properties. The example below defines two color properties as variables.

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

Var() Function

A CSS function used to retrieve the value of a custom CSS property. The example below retrieves two color property variables.

body {
  background-color: var(--white);
  color: var(--blue);
}

Clip-path Property

A property used to restrict visbility of specified regions of an element. Useful for creating shapes in CSS.

div {
  width: 200px;
  height: 200px;
  clip-path: polygon(85% 0, 100% 15%, 100% 100%, 
  0 100%, 0 0);
  border: 5px solid var(--light-gray);
}

Transition: Opacity

A transition property used to animate smooth fade-in and fade-out effects.

.code-block {
  border: 5px solid var(--light-gray);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  user-select: all;
}

.code-block:hover {
  opacity: 1;
}

@Media Screen

A CSS rule used to apply styles based on screen features. The example below changes element width based on screen width.

@media screen and (max-width: 992px) {
  .card {
    width: 46%;
  }
}

Display: Flex

Creates a flex container, allowing alignment, spacing and layout of it's direct child elements.

/* Horizontal Layout with Space Between Items */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}