Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
CSS functions

28 Articles
{
,

}
A vertical column of folders with labels on the right fanned out and curving towards the right.
Direct link to the article Abusing Customizable Selects
CSS functions html elements select

Abusing Customizable Selects

Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.
Image
Patrick Brosset on Mar 11, 2026
Image
Direct link to the article Spiral Scrollytelling in CSS With sibling-index()
CSS functions GSAP Scroll Driven Animation

Spiral Scrollytelling in CSS With sibling-index()

Lee accepts a challenge: arranging text in a spiral that animates as a vortex on scroll... all in CSS.
Image
Lee Meyer on Feb 17, 2026
A grid of hexagon shapes of equal size that alternate between blue and red. Each shape is labelled by it's order in the grid.
Direct link to the article Responsive Hexagon Grid Using Modern CSS
CSS functions math shapes

Responsive Hexagon Grid Using Modern CSS

A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
Image
Temani Afif on Jan 23, 2026
Image
Direct link to the article Creating Scroll-Based Animations in Full view()
CSS functions Scroll Driven Animation

Creating Scroll-Based Animations in Full view()

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline.
Image
Preethi on Dec 10, 2025
Image
Direct link to the article The Range Syntax Has Come to Container Style Queries and if()
container-queries CSS functions media queries Style Queries

The Range Syntax Has Come to Container Style Queries and if()

Being able to use the range syntax with container style queries — which we can do starting with Chrome 142 — means that we can compare literal numeric values as well as numeric values tokenized by custom properties or the attr() function.
Image
Daniel Schwarz on Nov 13, 2025
Image
Direct link to the article The “Most Hated” CSS Feature: tan()
CSS functions math

The “Most Hated” CSS Feature: tan()

Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed the “Most Hated” CSS feature.…

Image
Juan Diego Rodríguez on Nov 3, 2025
A series of six dits in a single row. Five are the same size and colored dark gray. The fifth item is scaled slightly smaller and colored gold.
Direct link to the article Sequential linear() Animation With N Elements
animation CSS functions

Sequential linear() Animation With N Elements

Let’s suppose you have N elements with the same animation that should animate sequentially. Modern CSS makes this easy and it works for any number of items!
Image
Temani Afif on Oct 15, 2025
Image
Direct link to the article The thing about contrast-color
color CSS functions

The thing about contrast-color

One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:

For my website design, I chose a dark blue background colour (#212E45) and light text (#d3d5da). This

…
Image
Geoff Graham on Oct 8, 2025
Image
Direct link to the article Quick Hit #59
CSS functions specifications

Quick Hit #59

A working draft for CSS Environment Variables is posted. Same concept as var(), but env() is a “global” variable at the document level for values the user agent is privy to.…

Image
Geoff Graham on Sep 25, 2025
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement