CSS - Function

About

A css function is a function that can be used in a CSS property value to calculate complex styling requirement.

Example

:root {
  --space-unit: 1.5em
}
  • We use it then to define the padding of a note block
.note {
    padding : calc(1.5 * var(--space-unit));
    background-color: skyblue;
}
<div class="note">A note with a 1.5 padding of the space unit</div>
  • The output is:

List

Mathematics

Calc

The calc() 1) function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

Example:

section {
  width: calc(100%/3 - 2*1em - 2*1px);
}
p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

Others (min, max, …)

2)

  • Comparison Functions: min(), max(), and clamp()
  • Stepped Value Functions: round(), mod(), and rem()
  • Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()
  • Exponential Functions: pow(), sqrt(), hypot(), log(), exp()
  • Sign-Related Functions: abs(), sign()
  • Numeric Constants: e, pi

Image

Image Css function 3) are mainly css gradient functions that create images. See the Gradient functions section for example

  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • conic-gradient

Positioning / Transform

Inside a transform property 4)

transform: translate(100px, 200px);

Color Function

color-mix

The color-mix 6) function is the color mixture linear interpolation function . Supported only since the css level 5, check your target browser

#red {
  background-color: red; /* [255,0,0] */
}
#green {
  background-color: green; /* [0,255,0] */
}
#mix {
  background-color: color-mix(in lch, red 50%, green, 50%); /* [128,128,0] olive - half red - half green  */
}
.swatch {
  display: inline-block;
  width: 3em;
  height: 3em;
}
  • The HTML
<div id="red" class="swatch"></div>
<div id="green" class="swatch"></div>
<div id="mix" class="swatch"></div>

Other colors function

Attr

The attr() function 13) is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element.

Not supported fully

The attr function is for now supported only for the content property. See https://caniuse.com/?search=attr

Because:

  • In CSS2.1, the attr() expression always returns a string (no number)
  • In CSS3, the attr() expression can return many different types (ie may take number)

Example based on css2.1

  • The html
<span class="inline-note" data-content="Prefix: ">My Inline note with a prefix</span>
  • The css
.inline-note::before {
  content: attr(data-content);
}
  • output:





Discover More
CSS - Attr function (attribute)

The attr function select the value of an attribute where:
CSS - Gradient

Color gradient in CSS are created via gradient functions that creates an image. radial-gradient repeating-linear-gradient conic-gradient The definitions and whole list can be found in the...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - font-size property

CSS CSS font-size in CSS is a property that defines the length (size) of a font. font-size by himself is an element of typography. responsive typography The font-size uses generally a relative...
Color Value Without Color
Color - GreyScale Color Space

A greyscale is the lightness scale where: White is the highest possible value Black is the lowest value. Gray is the a medium value. The midpoint between black and white, neither dark nor light....
Monet Femme Ombrelle 1886 Logo
Color - Mixture / Composite (Mix / Blend)

Color mixtures are a mixture of two colors. There is a lot of way to mix (or blend) two colors. The most known is the addition of primary color that creates composite colors (secondary, ..) located at...
What is a css variable (also known as custom property or cascading variable)

CSS variables are variable that can be used in a css property value. They are also known as: * custom properties * cascading variables (in reference to the cascading processing of CSS They...



Share this page:
Follow us:
Task Runner