S | CSS-Tricks

Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.
The sepia() function changes an element’s color to a warmer brownish-yellow tint.
The sign() function takes a math expression and returns 1 if the result is positive, -1 if it’s negative or 0 if it’s zero.
The superellipse() function in CSS works with the corner-shape property to control the curvature of an element’s corners.
The CSS sin() function takes a calculation that resolves to either an <angle> or <number> and returns the result’s sine, 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 cos() function.
The CSS steps() function let us divide an animation/transition progress into a specified number of equal-length intervals or steps.
The CSS shape() function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path() function.
The CSS scroll() function provides an anonymous scroll timeline when used as a value for the animation-timeline property. Instead of explicitly setting up and referencing a named timeline using scroll-timeline-name, the scroll() function handles it for you. You simply tell it which scroll container to track (called the “scroller”) and which axis to follow, and it returns an anonymous scroll timeline.
The sibling-count() CSS function returns the total number of sibling elements an element has, including itself. Think of it sort […]
The sibling-index() CSS function returns the position of an element among its siblings, starting from 1. It’s similar to :nth-child(), but instead of using it in selectors, you can now use the index directly within CSS functions and calculations.
The saturate() function increases or decreases the saturation of an element.
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 →