Search

Nalezeno "custom properties": 65

Using Absolute Value, Sign, Rounding and Modulo in CSS Today


For quite a while now, the CSS spec has included a lot of really useful mathematical functions, such as trigonometric functions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()), exponential functions (… The post Using Absolute Value, Sign, Rounding and Modulo in CSS Today appeared...

Of Course We Can Make a CSS-Only Clock That Tells the Current Time!


Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital” clock as well. All this with no JavaScript! Here’s a quick look at the clocks … The post Of Course We Can Make a CSS-Only Clock That Tells...

The Dilemma of Naming Font Size Variables


Normally, a project will have a set of pre-determined font sizes, usually as variables named in such a way that seeks some semblance of order and consistency. Any project of considerable size can use something like that. There are always … The post The Dilemma of Naming Font Size Variables...

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. The post Custom Property Brain Twisters appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter

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 … The post Are Custom Properties a “Menu...

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 … The post JSON in CSS appeared first on CSS-Tricks. You can support...

Dynamic CSS Masks with Custom Properties and GSAP


Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. The post Dynamic CSS Masks with Custom Properties and GSAP appeared first on Codrops

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. The post A Complete Guide to Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter

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 … The post Generating (and Solving!) Sudokus in CSS appeared...

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 … The post Image Fragmentation Effect With CSS Masks and Custom...

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, … The post Exploring @property and its Animating Powers appeared...

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 … The post How to Map Mouse Position in CSS appeared first on CSS-Tricks. You...

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 … The post A DRY Approach to Color Themes in CSS appeared first...

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 … The post CSS Switch-Case Conditions appeared first on CSS-Tricks. You can support...

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 … The post...

How to Play and Pause CSS Animations with CSS Custom Properties


Let’s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get … The post How to Play and Pause CSS Animations with...

Custom Properties as State


Here’s a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for “seasonal” colors (e.g. spring is greens, fall is oranges). You’d then use the values to theme your site, knowing that those … The post Custom...

Color Theming with CSS Custom Properties and Tailwind


Custom properties not only enable us to make our code more efficient, but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace