C | CSS-Tricks

The counter() function takes the number (or symbol) of a list item and makes it available to display outside the list. In other words, it makes things that aren’t lists look like lists. For example, we can take the current list number of an existing list counter, format it as a Roman numeral, then display it in front of a heading:
The contrast() filter function increases or decreases the contrast of an element.
The CSS cos() function takes a calculation that resolves to either an <angle> or <number> and returns the result’s cosine, which is always a number between -1 and 1. It’s incredibly good for drawing waves or laying things out in waves, inverse of the sin() function.
The CSS calc() function performs math between values, whether that’s addition, subtraction, division, or multiplication, along with any other math function.
The cross-fade() function lets you blend more than one image at a specified transparency value.
The CSS conic-gradient() function creates a color gradient that places the colors around a circle, making them smoothly transition across its circumference in a cone-like shape.
The color-mix() function lets us mix two colors across a particular color space in CSS.
The CSS circle() function allows you to create, you guessed it, circles when used with the shape-outside, clip-path, and offset-path […]
The cubic-bezier() function lets you define custom timing curves for CSS animations and transitions. It gives you precise control over how elements […]
The CSS clamp() function locks a value between a minimum and maximum, using a preferred value within that range.
The CSS color() function allows you to use a color directly from a color space, either an existing color space or a custom one.
The CSS calc-size() function enables us to perform calculations using intrinsic size values such as auto, min-content, max-content, and fit-content. […]
The CSS counters() function can combine multiple lists into a single list. So, if you have two active counters on the page, counters() can be used to combine them so that the list numbers are used to count the items in both lists together.
The contrast-color() function takes a <color> and returns either black or white, whichever is the most contrasting color for that value.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →