CSS Variables + calc() + rgb() = Enforcing High Contrast Colors

As you may know, the recent updates and additions to CSS are extremely powerful. From Flexbox to Grid, and — what we’re concerned about here — Custom Properties (aka CSS variables), all of which make robust and dynamic layouts and interfaces easier than ever while opening up many other possibilities we used to only dream of.
The other day, I was thinking that there must be a way to use Custom Properties to color an element’s background while … Read article
The post CSS Variables + calc() + rgb() = Enforcing High Contrast Colors appeared first on CSS-Tricks.

Link: https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.

Sliced gradient disc.
The first thought was that this should be doable with border-radius, right? Well, no! The thing with border-radius is that it creates an elliptical corner whose ends are tangent to the … Read article
The post Slice and Dice a Disc with CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/slice-and-dice-a-disc-with-css/

DRY State Switching With CSS Variables: Fallbacks and Invalid Values

This is the second post in a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. The first installment walks through various use cases where this technique applies. This post covers the use of fallbacks and invalid values to extend the technique to non-numeric values.
The strategy of using CSS Variables to drive the switching of layouts and …
The post DRY State Switching With CSS Variables: Fallbacks and Invalid Values appeared first on CSS-Tricks.

Link: https://css-tricks.com/dry-state-switching-with-css-variables-fallbacks-and-invalid-values/

DRY Switching with CSS Variables: The Difference of One Declaration

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second post (coming tomorrow!) will cover the use of fallbacks and invalid values to extend the technique to non-numeric values.
What if I told you a single …
The post DRY Switching with CSS Variables: The Difference of One Declaration appeared first on CSS-Tricks.

Link: https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/

Super-Powered Grid Components with CSS Custom Properties

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level.

Grid is neither a substitute for flexbox nor vice versa. In …
The post Super-Powered Grid Components with CSS Custom Properties appeared first on CSS-Tricks.

Link: https://css-tricks.com/super-power-grid-components-with-css-custom-properties/

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!
AI got the following result down to a single HTML element …
The post Simple Interactive Pie Chart with CSS Variables and Houdini Magic appeared first on CSS-Tricks.

Link: https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.
They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting …
The post Switch font color for different backgrounds with CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn’t look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let’s see how I did that!
The post 1 Element CSS Rainbow Gradient Infinity appeared first on CSS-Tricks.

Link: https://css-tricks.com/1-element-css-rainbow-gradient-infinity/

Dark theme in a day

Marcin Wichary has written a great piece that dives into how he used CSS Variables to create a night mode and high contrast theme in an app. There’s so many neat tricks about how to use CSS Variables (Chris has also looked at theming) as well as how to organize them (Andras Galante has an interesting take on this) in here. Plus, Marcin shares some tricks about using filters to invert the color of an image.
I also …
The post Dark theme in a day appeared first on CSS-Tricks.

Link: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

A Strategy Guide To CSS Custom Properties

CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables") can do some of the same things, but are not the same.
Practical advice from Mike Riethmuller:
If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative …
The post A Strategy Guide To CSS Custom Properties appeared first on CSS-Tricks.

Link: https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/