Transformation Functions

Transformation functions are used to change the position, rotation, and scale of an element. Some of the common transformation functions include translate(), rotate(), and scale(). These functions can be used to create complex visual effects and animations in CSS styles.

translate()

The translate() function moves an element along the X and Y axes. You can specify the distance in pixels or any other length unit. Here’s an example:

div {
     transform: translate(20px, 40px);
}

This code moves the element 20 pixels to the right and 40 pixels down from its original position.

translateX()

The translateX() function moves an element along the X axis only. You can specify the distance in pixels or any other length unit. Here’s an example:

div {
     transform: translateX(20px);
}

This code moves the element 20 pixels to the right from its original position.

translateY()

The translateY() function moves an element along the Y axis only. You can specify the distance in pixels or any other length unit. Here’s an example:

div {
     transform: translateY(40px);
}

This code moves the element 40 pixels down from its original position.

translate3d()

The translate3d() function moves an element along the X, Y, and Z axes. You can specify the distance in pixels or any other length unit. Here’s an example:

div {
     transform: translate3d(20px, 40px, 60px);
}

This code moves the element 20 pixels to the right, 40 pixels down, and 60 pixels away from the screen from its original position.

rotate()

The rotate() function rotates an element by a specified number of degrees. You can specify the angle in degrees or any other angle unit. Here’s an example:

div {
  transform: rotate(45deg);
}

This code rotates the element 45 degrees clockwise from its original position.

rotate3d()

The rotate3d() function rotates an element along the X, Y, and Z axes. You can specify the angle in degrees or any other angle unit, and the direction of rotation. Here’s an example:

div {
  transform: rotate3d(1, 1, 1, 45deg);
}

This code rotates the element 45 degrees clockwise along the X, Y, and Z axes from its original position.

scale()

The scale() is used to scale elements in the x or y-axis or both. You can control the scaling by using values to specify the scaling factor. A factor of 1 will keep the element at its original size, while a factor of less than 1 will make it smaller and a factor of more than 1 will make it larger. The scale() can be used with both 2D and 3D transforms, and can be used in combination with other transformation functions.

For example, the following CSS code will scale an element by a factor of 1.5 in both the x and y-axis:

.element {
  transform: scale(1.5);
}

scale3d()

The scale3d() is an extension of the `scale` function and allows you to scale elements in the x, y, and z-axis. This can be useful for 3D transformations and can be combined with other transformation functions to create more complex effects. To use scale3d(), you need to specify the scaling factor for each axis using three values. The first value represents the x-axis, the second value represents the y-axis, and the third value represents the z-axis.

For example, the following CSS code will scale an element by a factor of 2 in the x-axis, 1.5 in the y-axis, and 0.5 in the z-axis:

.element {
  transform: scale3d(2, 1.5, 0.5);
}

skew()

The skew() is used to skew an element in the x or y-axis or both. You can control the skew angle using values to specify the angle in degrees. The skew() can be used with both 2D and 3D transforms, and can be used in combination with other transformation functions.

For example, the following CSS code will skew an element by 30 degrees in the x-axis and 15 degrees in the y-axis:

.element {
  transform: skew(30deg, 15deg);
}

skewX()

The skewX() is an extension of the skew() and allows you to skew an element in the x-axis only. The skewX() is used in the same way as the skew(), by specifying the angle in degrees as a value.

For example, the following CSS code will skew an element by 30 degrees in the x-axis:

.element {
  transform: skewX(30deg);
}

skewY()

The skewY() is an extension of the skew() and allows you to skew an element in the y-axis only. The skewY() function is used in the same way as the skew(), by specifying the angle in degrees as a value.

For example, the following CSS code will skew an element by 15 degrees in the y-axis:

.element {
  transform: skewY(15deg);
}

Layout Functions

Layout functions in CSS are used to control the size and position of elements on a web page. The repeat(), minmax(), and fit-content() functions are some of the key layout functions in CSS, and they play a crucial role in creating responsive and flexible layouts. These functions allow developers to specify the size of elements relative to their containers, as well as determine how elements should adjust in size and position based on the size of the viewport or the surrounding elements.

repeat()

The repeat() function in CSS is used to repeat a value multiple times within a property value. It can be used with various properties such as grid, grid-template-columns, and grid-template-rows to achieve a repeated pattern or texture. The repeat() function takes two arguments: the first is the value to be repeated, and the second is the number of times the value should be repeated. For example:

.container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(1fr 1fr 1fr);
}

In this example, the grid-template-columns property uses the repeat() function to create a 3-column grid, each with a width of 1 fraction unit 1fr. Both examples give exactly the same result.

minmax()

The minmax() CSS function is used in grid and flexbox layout to specify the size range of grid or flexbox items. The function takes two arguments, the minimum and maximum size. The minimum size is the smallest the grid or flexbox item can be, and the maximum size is the largest it can be. The grid or flexbox item will take up the minimum size if there’s enough space, and it will take up the maximum size if the space is limited.

.item {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

fit-content()

The fit-content() CSS function is similar to minmax(), but instead of a minimum and maximum size, it takes a maximum size. The grid or flexbox item will take up the maximum size if there’s enough space, and it will take up the size required by its content if the space is limited. The size of the grid or flexbox item will not be smaller than the size required by its content.

.item {
  grid-template-columns: fit-content(200px);
}

Shape Functions

Shape Functions are CSS functions that define the shape of an element or multiple elements in a web page. These functions are used to create custom shapes that can be applied to elements through the shape-outside and clip-path properties. They include the rect(), polygon(), circle(), ellipse(), path() and inset().

rect()

The rect() CSS function is used to specify a rectangle shape in CSS, and can be used in conjunction with the shape-outside and clip-path properties to define the shape of elements. This allows you to create interesting, rectangular shapes for your HTML content, or to clip elements to custom shapes.

For example, to create a rectangular shape for an image, you could use the following code:

img {
  shape-outside: rect(0, 50%, 100%, 0);
  float: left;
  width: 200px;
  height: 200px;
}

In this example, the rect() function is used to define a rectangular shape by specifying the coordinates of its four corners. The shape-outside property then applies this shape to the image, causing the text to wrap around it. Note that the float property is used to allow the text to flow around the image, while the width and height properties specify the dimensions of the image.

Similarly, the clip-path property can be used to clip elements to a custom shape. For example:

div {
  clip-path: rect(0, 50%, 100%, 0);
  width: 200px;
  height: 200px;
  background-color: blue;
}

In this example, the rect() function is used to define a rectangular shape for a div element, and the clip-path property clips the element to that shape. The resulting clipped element is a rectangular shape with a blue background color.

polygon()

The polygon() CSS function creates a polygon shape that can be used as the value for properties such as shape-outside, clip-path and others. The polygon shape is defined by providing a list of coordinate pairs separated by commas. The polygon is created from a series of connected line segments defined by the specified coordinate pairs.

For example, to create a triangle shape using polygon() you would specify the coordinate pairs for each of the three vertices:

.element {
  shape-outside: polygon(50% 0, 0 100%, 100% 100%);
}

In this example, the shape-outside property is set to a polygon that has its first vertex at the center-top of the element, the second vertex at the left-bottom of the element, and the third vertex at the right-bottom of the element. The polygon creates a triangle shape that will wrap text around it.

Similarly, you can use the polygon() function to create shapes for the clip-path property. For example:

.element {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

In this example, the clip-path property is set to the same polygon as in the previous example, causing the element to be clipped to the triangle shape.

To use the polygon() function, simply provide a list of comma-separated coordinate pairs. The coordinate pairs should be provided in the form of x y, where x is the horizontal position and y is the vertical position. The polygon will be created by connecting the specified coordinate pairs with line segments.

circle()

The circle() function is used to create a circular shape in CSS. It can be used in conjunction with properties such as shape-outside and clip-path to create unique layouts and visual effects on an element.

The radius value represents the size of the circle, while the position value defines the center of the circle. The position can be specified using either keyword values (such as center) or other values (such as 20px 50px or 50% 60%).

For example, if we want to create a circle with a radius of 100px centered at the center of an element, the following code could be used:

.circle {
shape-outside: circle(100px at center);
}

If we want to clip an image in a circle with a radius of 200px centered at the 50% 60% of an element, the following code could be used:

.circle {
shape-outside: circle(200px at center);
}

ellipse()

The ellipse() CSS function is used to create an elliptical shape that can be used as a value for various CSS properties such as shape-outside and clip-path. The function is defined by two radii values, the first for the horizontal axis and the second for the vertical axis, and a center point specified by the x and /y coordinates.

For example, the following CSS code will create an elliptical shape with a horizontal radius of 50px, a vertical radius of 25px, and a center point located at 100px from the left and 50px from the top:

.ellipse {
  shape-outside: ellipse(50px 25px at 100px 50px);
}

In this example, the elliptical shape will be used as the wrapping area for the content inside the element with the class element. The shape-outside property can be used to wrap text around an irregularly shaped object, such as an elliptical shape created with the ellipse() function.

path()

The path() CSS function creates a shape based on a specified path data. It is used to define shapes in CSS for the shape-outside and clip-path properties. The path() function is a powerful way to create complex shapes, as it allows you to define shapes by using a series of commands to move and draw lines, arcs, and curves. The function is defined with a string of path data, which is a series of instructions that specify the shape of the path.

For example, you could use the path() function to create a custom shape for a rounded image or for a curved design element in your layout. Here’s an example of how you can use the path() function to create a custom shape for the clip-path property:

.element {
  clip-path: path("M10 10 L90 10 L90 90 Q 90 90, 50 50 L10 90 Z");
}

In this example, the M command specifies the start point of the path, the L command draws a straight line to the specified point, and the Q command draws a quadratic curve. The Z command closes the path, connecting the end point of the path back to the starting point. These commands can be combined to create complex shapes for your design.

inset()

The inset() function in CSS is used to define a rounded rectangle shape, that can be used in shape-outside and clip-path properties to create complex and visually appealing layouts. The inset() function takes four values to specify each corner of the rectangle, and can accept either length or percentage values.

The inset() function provides greater control and flexibility over the shape of elements on a page, allowing developers to create intricate shapes that are not possible with other CSS shape functions such as rect() or circle().

.element-1 {
  shape-outside: inset(10% 10% 10% 10% round 10px);
}

.element-2 {
  clip-path: inset(10% 10% 10% 10% round 10px);
}

In the above example, the inset() function is used to create a rounded rectangle shape with 10% rounding on each side, and a 10pxrounding radius. This shape is then used in the shape-outside and clip-path properties to give the elements a custom and visually appealing shape.

Text Functions

Text functions are used to manipulate and format text in CSS styles. Some of the common text functions include counter() and counters() . These functions allow you to format text in a dynamic and flexible way, making it easy to create custom text styles for your web pages.

counter()

The counter() function is a CSS function used to retrieve and display the value of a CSS counter. CSS counters are used to keep track of elements in a web page and are incremented every time the counter is referenced. The counter() function is commonly used to display numbered lists, to number headings, and to number elements within a document.

The default style for a counter value is decimal. The counter function can be used in the content property of a CSS pseudo-element, such as :before or :after, to display the counter value. For example, the following code displays a numbered list:

ol {
  list-style-type: none;
  counter-reset: item;
}

li:before {
  content: counter(item) ".";
  counter-increment: item;
}

counters()

The counters() function is a CSS function used to retrieve and display the value of a CSS counter, and to concatenate a string with the counter value. The function is similar to counter(), but it can be used to concatenate a string with the counter value, allowing for more control over the display of the counter value.

The counters() function can be also used in the content property of a CSS pseudo-element, such as :before or :after, to display the concatenated value. For example, the following code displays a numbered list with a custom string concatenated with the counter value:

ol {
  list-style-type: none;
  counter-reset: item;
}

li:before {
  content: counters(item, ".", ") ");
  counter-increment: item;
}

Gradient Functions

Gradient functions are used to create gradient backgrounds and visual effects in CSS styles. Some of the common gradient functions include linear-gradient(), radial-gradient(), and conic-gradient(). These functions allow you to create complex gradient backgrounds and visual effects in CSS styles.

Section has been moved to a page, where much more design insight is provided: Gradients

Filter Functions

Filter functions are used to apply visual effects and filters to images and other elements in CSS styles. Some of the common filter functions include blur(), brightness(), contrast(), and drop-shadow(). These functions allow you to control the visual appearance of images and other elements, making it easy to create custom visual effects in CSS styles.

Section has been moved to a page, where much more design insight is provided: Filters

Animation Functions

CSS animation functions allow you to create animated effects on web pages. They provide the ability to specify keyframes that control the animation’s progression and timing, as well as various animation properties such as duration, delay, and iteration count. CSS animation functions can be used to animate elements on a page, such as changing their size, position, or color over time, or to create more complex effects such as bouncing, rotating, or moving in a path.

Section has been moved to a page, where much more design insight is provided: Animations

Image Functions

Image functions are used to manipulate images in CSS styles. Some of the common image functions include image-set(), url() and element(). These functions allow you to control the position and size of images and other elements in a flexible and dynamic way, making it easy to create custom visual effects in CSS styles.

image-set()

The image-set() CSS function allows you to define multiple versions of an image and choose which one to use based on the screen resolution. This helps to optimize the performance of your website and reduce the size of images that are loaded. The syntax for the image-set() function is as follows:

.container {
  background-image: image-set(
  url(high-res.jpg) 2x,
  url(low-res.jpg) 1x
  );
}

In this example, the high-res.jpg image will be used on screens with a resolution of 2 or more device pixels per CSS pixel, and the low-res.jpg image will be used on screens with a resolution of 1 device pixel per CSS pixel.

element()

The element() CSS function allows you to use an element as an image in your stylesheet. This can be useful for creating image masks or for displaying an element as an image. An example for the element() function is as follows:

.container {
  background-image: element(#id);
}

In this example, the background image of the element with the ID of #id is used as the background image for the current element.

url()

The url() CSS function allows you to reference an external resource, such as an image, in your stylesheet. An example for the url() function is as follows:

.container {
  background-image: url(image.jpg);
}

In this example, the image located at image.jpg is used as the background image for the current element.

Calculation Functions

Calculation functions are used to perform mathematical calculations in CSS styles. Some of the common calculation functions include calc(), max(), min(), and clamp(). These functions allow you to perform complex calculations and transformations in CSS styles, making it easy to create dynamic and flexible styles for your web pages.

calc()

The calc() CSS function can be used to perform arithmetic operations within CSS styles. The operations can include addition, subtraction, multiplication, and division between length values and percentage values. This makes it possible to perform complex calculations when defining CSS styles, such as determining the size of an element based on the size of another element. To use the calc() function, you pass in a mathematical expression inside the parentheses, and the result of the calculation will be used as the value of the CSS property.

Example 1: Setting width and height of an element to half the screen size:

.element {
  width: calc(50% - 20px);
  height: calc(100vh / 2 - 40px);
}

Example 2: Setting a font size based on the viewport width:

body {
  font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}

Example 3: Centering an element horizontally with a fixed width:

.element {
  width: 400px;
  margin: 0 auto;
  left: calc(50% - 200px);
  position: absolute;
}

Example 4: Setting the height of an element based on the width of another element:

.element-1 {
  width: 50%;
}

.element-2 {
  height: calc(100% - 2em);
}

In these examples, the calc() function is used to perform mathematical calculations to dynamically set various CSS properties such as width, height, font-size, margin, left, and height based on other values or viewport dimensions.

min()

The min() CSS function is used to determine the smallest of multiple values. It can be used in place of a CSS property value and will return the smallest of the specified values. This function is particularly useful when you need to set a minimum value for a CSS property, such as ensuring a minimum width for an element, while still allowing it to grow larger if necessary. To use the min() function, you pass in a list of values separated by commas and the function will return the smallest of those values.

.element-1 {
  width: min(500px, 90%);
}
.element-2 {
  height: min(300px, 50vh);
}

max()

The max() CSS function is used to determine the largest of multiple values. It can be used in place of a CSS property value and will return the largest of the specified values. This function is particularly useful when you need to set a maximum value for a CSS property, such as ensuring a maximum width for an element, while still allowing it to shrink smaller if necessary. To use the max() function, you pass in a list of values separated by commas and the function will return the largest of those values.

.element-1 {
  width: max(500px, 90%);
}

.element-2 {
  height: max(300px, 50vh);
}

clamp()

The clamp() CSS function is used to restrict a value between a minimum and a maximum value. This function is particularly useful when you want to set a range for a CSS property value, such as ensuring that an element’s width remains between a minimum and maximum value. To use the clamp() function, you pass in three values separated by commas: the minimum value, the preferred value, and the maximum value. The function will return the preferred value if it is within the minimum and maximum values, otherwise it will return the closest of the two values.

.element-1 {
  width: clamp(500px, 90%, 700px);
}

.element-2 {
  height: clamp(200px, 50vh, 800px);
}

Variable Functions

Variable function is used to store and manipulate variables in CSS styles. ‘King of all CSS Functions’ as crowned it – var(). This function allows you to store and manipulate values in a flexible and dynamic way, making it easy to create custom styles for your web pages that are based on variables and other dynamic values.

The var() CSS function is used to insert the value of a custom property (also known as CSS variables) into a property value. It allows you to store a value in one place, and then reuse it throughout your stylesheet, making it easier to maintain and update your styles. Here are some real-life examples of how you can use the var() function:

Example 1: Setting a base color value:

:root {
  --base-color: #F5A623;
}
body {
  color: var(--base-color);
}

Example 2: Using variables for media queries:

:root {
  --tablet-width: 768px;
}
@media (min-width: var(--tablet-width)) {
  /* styles for tablet and larger screens */
}

Example 3: Setting font-size based on element width:

:root {
  --element-width: 200px;
}

.element {
  width: var(--element-width);
  font-size: calc(10px + (20 - 10) * ((100vw - var(--element-width)) / (1920 - var(--element-width))));
}

Example 4: Creating a scalable padding value:

:root {
  --spacing-unit: 1rem;
}

.element {
  padding: var(--spacing-unit);
}

In these examples, you can see how var() makes it easier to manage values that are used in multiple places in your stylesheet. The custom property can be set once, and then referenced using var() wherever you need to use its value. This reduces the amount of repetitive code, and makes it easier to make changes to your styles without having to hunt down every instance of a value in your stylesheet.