CSS Functions - 14 Functions (Reference)

Tech:
Css
Since:
1 year ago
Views:
7

In CSS there are some functions which can be used as a value for the CSS property. Here is a list of some of the most common functions used in CSS.

Functions:

var()

Inserts the value of a custom property.

var(name, fallback_value);


:root {
  --theme : red;
}

.xx {
  background-color: var(--theme,blue);
}

attr()

Getting element attribute value.

attr(attribute-name);

<div class="xx" name="some text"></div>

.xx:after {
  content: attr(name);
}

calc()

Allows to perform calculations to determine CSS property values.

calc(expression);

.xx {
  width: calc(100% - 100px);
}

cubic-bezier() 

// Defines a Cubic Bezier curve
// Used with transition

cubic-bezier(x1,y1,x2,y2);

.xx {
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

hsl()

Defines colors using the Hue-Saturation-Lightness model (HSL).

hsl(hue, saturation, lightness);

.xx {
  background-color:hsl(120,100%,50%);
}
.xx {
  background-color:hsl(120,100%,75%);
}
.xx {
  background-color:hsl(120,100%,25%);
}
.xx {
  background-color:hsl(120,60%,70%);
}
.xx {
  background-color:hsl(290,100%,50%);
}
.xx {
  background-color:hsl(290,60%,70%);
}

hsla()

Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA).

hsla(hue, saturation, lightness, alpha);

.xx {
  background-color:hsla(120,100%,50%,0.3);
}
.xx {
  background-color:hsla(120,100%,75%,0.3);
}
.xx {
  background-color:hsla(120,100%,25%,0.3);
}
.xx {
  background-color:hsla(120,60%,70%,0.3);
}
.xx {
  background-color:hsla(290,100%,50%,0.3);
}
.xx {
  background-color:hsla(290,60%,70%,0.3);
}

rgb()

Defines colors using the Red-Green-Blue model (RGB).

rgb(red, green, blue);

.xx {
  background-color:rgb(255,0,0);
}
.xx {
  background-color:rgb(0,255,0);
}
.xx {
  background-color:rgb(0,0,255);
}

rgba()

Defines colors using the Red-Green-Blue-Alpha model (RGBA).

rgba(red, green, blue, alpha);

.xx {
  background-color:rgba(255,0,0,0.3);
}
.xx {
  background-color:rgba(0,255,0,0.3);
}
.xx {
  background-color:rgba(0,0,255,0.3);
}

linear-gradient()

Sets a linear gradient as the background image.

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

.xx {
  background-image: linear-gradient(red, yellow, blue);
}

radial-gradient()

Sets a radial gradient as the background image.

background-image: radial-gradient(
  shape size at position,
  start-color,
  ...,
  last-color
);

.xx {
  background-image: radial-gradient(red, green, blue);
}

repeating-linear-gradient()

Repeats a linear gradient.

background-image: repeating-linear-gradient(
  angle | to side-or-corner,
  color-stop1,
  color-stop2,
  ...
);

.xx {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

repeating-radial-gradient()

Sets a radial gradient as the background image.

background-image: radial-gradient(
  shape size at position,
  start-color,
  ...,
  last-color
);

.xx {
  background-image: radial-gradient(red, green, blue);
}

repeat()

Used in grid. Repeated fragment of the track list.

/* values */
  repeat(4, 1fr)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] 1fr [col-end])
  repeat(4, [col-start] min-content [col-end])
  repeat(4, [col-start] max-content [col-end])
  repeat(4, [col-start] auto [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
  repeat(4, [col-start] min-content [col-middle] max-content [col-end])

  /* values */
  repeat(auto-fill, 250px)
  repeat(auto-fit, 250px)
  repeat(auto-fill, [col-start] 250px [col-end])
  repeat(auto-fit, [col-start] 250px [col-end])
  repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
  repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

  /* values */
  repeat(4, 250px)
  repeat(4, [col-start] 250px [col-end])
  repeat(4, [col-start] 60% [col-end])
  repeat(4, [col-start] minmax(100px, 1fr) [col-end])
  repeat(4, [col-start] fit-content(200px) [col-end])
  repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

minmax()

Used in grid. Defines a size range greater than or equal to min and less than or equal to max.

/* values */
  minmax(200px, 1fr)
  minmax(400px, 50%)
  minmax(30%, 300px)
  minmax(100px, max-content)
  minmax(min-content, 400px)
  minmax(max-content, auto)
  minmax(auto, 300px)
  minmax(min-content, auto)

  /* values */
  minmax(200px, 1fr)
  minmax(30%, 300px)
  minmax(400px, 50%)
  minmax(50%, min-content)
  minmax(300px, max-content)
  minmax(200px, auto)

  /* values */
  minmax(400px, 50%)
  minmax(30%, 300px)
  minmax(min-content, 200px)
  minmax(max-content, 200px)
  minmax(auto, 300px)
More Articles
CSS Background - 10 Properties and its Values (Reference)
1 year ago
2
CSS Font - 11 Properties and its Values (Reference)
1 year ago
3
CSS Text - 11 Properties and its Values (Reference)
1 year ago
7
CSS Flex - 13 Properties and its Values (Reference)
1 year ago
0
CSS Functions - 14 Functions (Reference)
1 year ago
7