The calc() function enables mathematical operations directly in CSS. It allows combining values of different units, such as percentages and pixels, to create dynamic layouts.
.container {
width: calc(100% - 50px);
}
The var() function is used to access custom properties (CSS variables) that were previously defined in the CSS. This allows for more flexible and reusable styling.
:root {
--primary-color: #3498db;
}
.button {
background-color: var(--primary-color);
}
The rgb() function defines a color based on its red, green, and blue components. Each component can have values from 0 to 255, defining the color's intensity.
.header {
background-color: rgb(34, 193, 195);
}
The translate() function is used to move elements along the X and Y axes. It is commonly used in animations or when creating interactive designs.
.move {
transform: translate(50px, 100px);
}