1. calc(), min(), max(), clamp()
CSS math functions let you perform calculations directly in styles.
calc()– calculations with+, -, *, /min()– chooses the smallest valuemax()– chooses the largest valueclamp()– sets min, preferred, max values
CSS Example
.math-box {
background: lightblue;
height: calc(50px + 20px);
width: clamp(150px, 50%, 400px);
padding: 10px;
text-align: center;
}2. var() for Custom Properties
Use var() with CSS custom properties (variables).
CSS Example
:root {
--main-color: teal;
--padding-size: 20px;
}
.var-box {
background: var(--main-color);
padding: var(--padding-size);
color: white;
text-align: center;
}3. attr()
The attr() function retrieves the value of an HTML attribute and displays it in CSS content.
CSS Example
.attr-box::after {
content: " (ID: " attr(data-id) ")";
color: gray;
font-size: 14px;
}4. url()
The url() function is used for images, fonts, and other assets.
CSS Example
.url-box {
width: 150px;
height: 100px;
background: url('https://picsum.photos/200') no-repeat center/cover;
border: 2px solid #333;
}5. hsl(), rgb(), etc.
CSS supports various color functions:rgb(), rgba(), hsl(),hsla().
CSS Example
.color-box {
width: 100px;
height: 100px;
display: inline-block;
margin: 5px;
}
.rgb { background: rgb(255, 0, 0); }
.rgba { background: rgba(0, 128, 0, 0.5); }
.hsl { background: hsl(200, 100%, 50%); }
.hsla { background: hsla(300, 100%, 50%, 0.7); }