CSS functions are used for many things in CSS. They can be used to create special types of processes such as creating animations or use custom fonts, or create visual effects like transparencies or transforming elements in both two-dimensional and three-dimensional planes.
Let's see what CSS functions are all about.
CSS filters allow us to manipulate the color of an element in different ways.
The
brightness() CSS function is used with the filter property, and it looks like this:
filter: brightness(20%);
The brightness() function modifies the illumination of an image. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%
A value of 100% leaves the element unchanged; a value of 0% makes the element completely black. Values over 100% are allowed and create a more intense effect. There is no limit to the value.
A value of 1 leaves the element unchanged; a value of 0 makes the element completely black. Values over 1 are allowed and create a more intense effect. There is no limit to the value. Also, negative values are not valid for either the percentage of the number.
CSS:
.element {
filter: brightness(20%);
}The
contrast() CSS function is used with the filter property, and it looks like this:
filter: contrast(10);
The contrast() function modifies the contrast of an element. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
A value of 100% leaves the element unchanged; a value of 0% makes the element completely black. Values over 100% are allowed and create a more intense effect. There is no limit to the value.
A value of 1 leaves the element unchanged; a value of 0 makes the element completely black. Values over 1 are allowed and create a more intense effect. There is no limit to the value. Also, negative values are not valid and decimal values are allowed for both.
CSS:
.element {
filter: contrast(10);
}The
grayscale() CSS function is used with the filter property, and it looks like this:
filter: grayscale(.8);
The grayscale() function converts an element to shades of black. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
A value of 0% leaves the element unchanged; a value of 100% makes the element grayscale. Values over 100% are not allowed.
A value of 0 leaves the element unchanged; a value of 1 makes the element grayscale. Values over 1 are not allowed. Also, negative values are not valid for either. Decimal values are allowed
The invert() CSS function is used with the filter property, and it looks like this:
filter: invert(1);
The invert() function inverts the color of the element. If used in an image, it makes the image look like a film negative.
A value of 100% completely inverts the element's color; a value of 0% leaves the element unchanged. Values over 100% are not allowed.
A value of 1 completely inverts the element's color; a value of 0 leaves the element unchanged. Values over 1 are not allowed. Also, negative values are not valid. Decimal values are allowed for both.
The
hue-rotate() CSS function is used with the filter property, and it looks like this:
filter: hue-rotate(80deg);
The hue-rotate() function applies a hue rotation to the element. It accepts an angle value.
The angle value defines the degrees around the color wheel that the element sample will be modified to.
There is no maximum value. However, if the value is larger than 360deg, the rotation will just go around. For example, if we declare 380deg, that would the same as 20deg.
The blur() CSS function is used with the filter property, and it looks like this:
filter: blur(10px);
The
saturate() CSS function is used with the filter property, and it looks like this:
filter: saturate(300%);
It affects the saturation levels of an element. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%
The default saturation value of an element is 100%, or 1 if using a unitless number.
A value of 0% completely desaturates the element (it removes all color leaving the element in grayscale); a value of 100% leaves the element unchanged. Values over 100% are allowed creating a more intense effect.
A value of 0 completely desaturates the element (it removes all color leaving the element in grayscale); a value of 1 leaves the element unchanged. Values over 1 are allowed creating a more intense effect.
The sepia() CSS function is used with the filter property, and it looks like this:
filter: sepia(100%);
The sepia() function converts an element to sepia. Think of a grayscale image but in shades of brown.
A value of 100% completely turns the element to sepia; a value of 0% leaves the element unchanged. Values over 100% are not allowed.
A value of 1 completely turns the element to sepia; a value of 0 leaves the element unchanged. Values over 1 are not allowed.
Also, for both, negative values are not valid.
CSS transforms have gained such popularity that it's rare not to see some sort of transformation in a website nowadays, for example, button shapes, animations, and layouts.
Let's see the transformation CSS functions.
The matrix() CSS function is used with the transform property, and it looks like this:
matrix(0.5, 0, 0.0881635, 0.5, 0, 0);
The matrix() function is the shorthand for all transformation properties, since they can be combined here. This function is used to define a two-dimensional transformation matrix.
This function requires a solid understanding of math, but in reality this function isn't something to be done by hand. Instead, we can use a tool like Eric Meyer's and Aaron Gustafson's The Matrix Resolutions (http://tiny.cc/eric-meyer-matrix).
The explanation of the advanced mathematics of the matrix() function are beyond the scope of this book. However, for very detailed explanations you can refer to any of these two articles:
- Understanding the CSS Transforms Matrix by Tiffany Brown (http://tiny.cc/css-matrix-1)
- The CSS3 matrix() Transform for the Mathematically Challenged by Zoltan Hawryluk (http://tiny.cc/css-matrix-2)
CSS:
/*This*/
.element { transform: skew(10deg) scale(.5); }
/*Is the same as this*/
.element { transform: matrix(0.5, 0, 0.0881635, 0.5, 0, 0); }The matrix3d() CSS function is used with the transform property, and it looks like this:
matrix3d(0.852825, 0.195593, -0.484183, 0, 0.0958426, 0.852825, 0.513326, 0, 0.513326, -0.484183, 0.708564, 0, 0.948667, 1.04842, 0.0291436, 1);
Just like the two-dimensional matrix() function, the matrix3d() function is a shorthand, but this one is for all transform 3D properties in a 4 x 4 grid.
This function requires a solid understanding of math, but in reality this function isn't something to be done by hand. Instead, we can use a tool like Eric Meyer and Aaron Gustafson's The Matrix Resolutions (http://tiny.cc/eric-meyer-matrix).
CSS:
/*This*/
.element { transform: rotate3d(10, 10, 1, 45deg) translate3d(1px, 1px, 0); }
/*Is the same as this*/
.element { transform: matrix3d(0.852825, 0.195593, -0.484183, 0, 0.0958426, 0.852825, 0.513326, 0, 0.513326, -0.484183, 0.708564, 0, 0.948667, 1.04842, 0.0291436, 1); }The rotate() CSS function is used with the transform property, and it looks like this:
rotate(10deg);
The rotate3d() CSS function is used with the transform property, and it looks like this:
rotate3d(1, 2, 1, 10deg);
The rotate3d() function rotates an element around a fixed position in a three-dimensional plane via the X, Y, and Z axes. It accepts four values: three unitless number values that correspond to the X, Y, and Z axes, and an angle value that defines the amount of rotation.
Positive values rotate the element clockwise in the corresponding axis. Negative values rotate the element counter-clockwise.
CSS:
.element {
transform: rotate3d(1, 2, .5, 10deg);
}The rotateX() CSS function is used with the transform property, and it looks like this:
transform: rotateX(25deg);
The previous code is similar to the following code:
transform: rotate3d(1, 0, 0, 25deg);
The rotateX() function rotates an element on the X axes in a three-dimensional plane. It accepts an angle value.
Positive values rotate the element clockwise. Negative values rotate the element counter-clockwise.
CSS:
/*This*/
.element { transform: rotateX(25deg); }
/*Is the same as this*/
.element { transform: rotate3d(1, 0, 0, 25deg); }The
rotateY() CSS function is used with the transform property, and it looks like this:
transform: rotateY(75deg);
The previous line is the same as this:
transform: rotate3d(0, 1, 0, 75deg);
The rotateY() function rotates an element on the Y axes in a three-dimensional plane. It accepts an angle value.
Positive values rotate the element clockwise. Negative values rotate the element counter-clockwise.
CSS:
/*This*/
.element { transform: rotateY(75deg); }
/*Is the same as this*/
.element { transform: rotate3d(0, 1, 0, 75deg); }The rotateY() CSS function is used with the transform property, and it looks like this:
transform: rotateZ(33deg);
Which is the same as this:
transform: rotate3d(0, 0, 1, 33deg);
The rotateY() function rotates an element on the Z axes in a three-dimensional plane. It accepts an angle value.
Positive values rotate the element clockwise. Negative values rotate the element counter-clockwise.
CSS:
/*This*/
.element { transform: rotateZ(33deg); }
/*Is the same as this*/
.element { transform: rotate3d(0, 0, 1, 33deg); }The
scale() CSS function is used with the transform property, and it looks like this:
.element { transform: scale(2); }Or:
.element { transform: scale(2, 3); }The scale() function changes the size of an element in a two-dimensional plane to make it larger or smaller. It supports one or two unitless number values, where the second value is optional. The number indicates the number of times the element should be scaled. For example, a value of 2 means the element is scaled (enlarged) 200%; a value of 0.5 means the element should be scaled (reduced) to 50%.
The first value represents a horizontal scale and the second a vertical scale. If a single value is declared, it means that both orientations will use the same value.
Negative values are allowed. However, when negative values are used, the element is flipped.
CSS:
/*Element is flipped in both directions and scaled to 200% its size*/
.element { transform: scale(-2); }
/*Element is scaled to 200% horizontally and 300% vertically*/
.element { transform: scale(2, 3); }The
scaled3d() CSS function is used with the transform property, and it looks like this:
transform: scale3d(2, 2, 2);
The scaled3d() function changes the size of an element in a three-dimensional plane via the X, Y, and Z axes to make it larger or smaller.
It supports three unitless number values which are required. Negative values are allowed. However, when negative values are used, the element is flipped.
CSS:
/*The element is twice the size*/
.element { transform: scale3d(2, 2, 2); }
/*Flipped element in both X and Y-axis while scaled to 300%, and 200% on the Z-axis*/
.element { transform: scale3d(-3, -3, 2); }The
scaleX() CSS function is used with the transform property, and it looks like this:
transform: scaleX(-2);
The scaleY() CSS function is used with the transform property, and it looks like this:
transform: scaleY(4);
The scaleZ() CSS function is used with the transform property, and it looks like this:
transform: scaleZ(3);
The skew() CSS function is used with the transform property, and it looks like this:
transform: skew(20deg);
Or you can also use the following code:
transform: skew(20deg, 25deg);
The skew() function skews or tilts an element on the X axes or both the X and the Y axes on a two-dimensional plane. For example, a parallelogram is a skewed rectangle.
It supports one or two angle values: the first one corresponds to the X axes and the second one to the Y axes. If only one value is declared, the element is skewed only on the X axes. Negative values are allowed.
It's recommended that you use either the skewX() or skewY() functions rather than skew(), because skew() has been removed from the spec (although most browsers still support it).
CSS:
/*One value only affects the element on the X-axis*/
.element { transform: skew(20deg); }
/*Two values affects the element on both X and Y-axis*/
.element { transform: skew(20deg, 25deg); }The @skewX() CSS function is used with the transform property, and it looks like this:
transform: skewX(40deg);
The @skewY() CSS function is used with the transform property, and it looks like this:
transform: skewY(36deg);
The steps() timing function is used with the transition-timing-function or the animation-timing-function properties, and it looks like this:
transition-timing-function: steps(3); animation-timing-function: steps(3);
The steps() timing function divides the transition or the animation into intervals of equal sizes. We can also specify if the steps of transition or animation happen at the start or the end of the interval. The end value is the default in case no argument is declared.
It supports one numeric value, or one numeric value and an optional value of either start or end.
The best way to understand how start or end works is with an example: the animation will begin right away when using start, and it will be delayed a bit when using end.
CSS:
/*The transition is divided in 3 equal size intervals*/
.element { transition-timing-function: steps(3); }
/*The transition is divided in 3 equal size intervals but it will delay a bit before it starts*/
.element { transition-timing-function: steps(3, end); }The translate() CSS function is used with the transform property, and it looks like this:
transform: translate(20px);
Or like this:
transform: translate(20px, -50%);
The translate() function affects the position of an element on the X axes or both the X and the Y axes on a two-dimensional plane.
It supports both length and percentage values. Negative values are allowed. It supports one or two length and percentage values; the first one corresponds to the X-axis and the second one to the Y-axis. If only one value is declared, the element is moved only on the X-axis. Negative values are allowed.
CSS:
/*One value, the element is moved on the X-axis only*/
.element { transform: translate(20px); }
/*Two values, the element is moved on the X and Y-axis*/
.element { transform: translate(20px, -50%); }The
translate3d() CSS function is used with the transform property and the perspective function, and it looks like this:
transform: perspective(100px) translate3d(75px, 75px, -200px);The translate3d() function is used to move an element on the X, Y, and Z axes on a three-dimensional plane.
It supports both length and percentage values. Negative values are allowed.
In order to be able to see this function work, we need to give the element in question a three-dimensional plane with the perspective function, otherwise the translate3d() declaration will have no effect.
CSS:
.element {
transform: perspective(100px) translate3d(75px, 75px, -200px);
}The
translateX() CSS function is used with the transform property, and it looks like this:
transform: translateX(99%);
The
translateY() CSS function is used with the transform property, and it looks like this:
transform: translateY(55px);
The
translateZ() CSS function is used with the transform property and with the perspective function, and it looks like this:
transform: perspective(100px) translateZ(77px);This is used to move an element on the Z axes on a three-dimensional plane. It supports both length and percentage values. Negative values are allowed.
In order to be able to see this function work, we need to give the element in question a three-dimensional plane with the perspective function; otherwise, the translateZ() declaration will have no effect.
CSS:
.element {
transform: perspective(100px) translateZ(77px);
}