Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
custom properties

86 Articles
{
,

}
Direct link to the article Custom Property Brain Twisters
custom properties

Custom Property Brain Twisters

I am part of that 82% that got the answer to Lea Verou's quiz wrong. Stephen Shaw posted a similar quiz as well and it's a fun exercise sharpen your CSS chops.
Avatar of Chris Coyier
Chris Coyier on Jun 25, 2021
Direct link to the article Are Custom Properties a “Menu of What Will Change”?
custom properties

Are Custom Properties a “Menu of What Will Change”?

PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a …

Avatar of Chris Coyier
Chris Coyier on Jun 2, 2021
Direct link to the article JSON in CSS
custom properties json

JSON in CSS

Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom properties are quite liberal! So this looks for a CSS rule (e.g. a …

Avatar of Chris Coyier
Chris Coyier on May 20, 2021
Direct link to the article A Complete Guide to Custom Properties
custom properties

A Complete Guide to Custom Properties

Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not their real name.
Avatar of Chris Coyier
Chris Coyier on Apr 27, 2021 (Updated on Dec 20, 2021)
Direct link to the article Generating (and Solving!) Sudokus in CSS
custom properties game

Generating (and Solving!) Sudokus in CSS

I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you …

Avatar of Lee Meyer
Lee Meyer on Apr 26, 2021
Direct link to the article Image Fragmentation Effect With CSS Masks and Custom Properties
@property css animation custom properties mask

Image Fragmentation Effect With CSS Masks and Custom Properties

Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to …

Avatar of Temani Afif
Temani Afif on Mar 23, 2021
Direct link to the article Exploring @property and its Animating Powers
@property css animation custom properties

Exploring @property and its Animating Powers

Uh, what’s @property? It’s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we’ve never been able to do before.

While everything about @property is exciting, …

Avatar of Jhey Tompkins
Jhey Tompkins on Mar 4, 2021
Direct link to the article How to Map Mouse Position in CSS
cursor custom properties loops

How to Map Mouse Position in CSS

Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX and --positionY.

We could do this in JavaScript. If we did, we could do things like make make an element …

Avatar of Amit Sheen
Amit Sheen on Mar 1, 2021
Direct link to the article A DRY Approach to Color Themes in CSS
custom properties dark mode

A DRY Approach to Color Themes in CSS

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a …

Avatar of Christopher Kirk-Nielsen
Christopher Kirk-Nielsen on Feb 24, 2021
Direct link to the article CSS Switch-Case Conditions
custom properties keyframes

CSS Switch-Case Conditions

CSS is yet to have a switch rule or conditional if, aside from the specific nature of @media queries and some deep trickery with CSS custom properties. Let’s have a look at why it would be useful if we …

Avatar of Yair Even Or
Yair Even Or on Feb 17, 2021
Direct link to the article useStateInCustomProperties
custom properties state

useStateInCustomProperties

In my recent “Custom Properties as State” post, one of the things I mentioned was that theoretically, UI libraries, like React and Vue, could automatically map the state they manage over to CSS Custom Properties so we could use that state …

Avatar of Chris Coyier
Chris Coyier on Jan 21, 2021
  • Newer
  • 1
  • 2
  • 3
  • ...
  • 8
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top