Select Page

Category: css variables

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 original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights… I finally had the result below: My version of the rainbow gradient infinity. 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...

Read More

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 also love this part of the article where Marcin writes: I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images… CSS is mighty powerful these days, and it’s posts like Marcin’s that remind me it wasn’t that long ago that theming an app like this would’ve been impossible. Direct Link to Article — Permalink The post Dark theme in a day appeared first on CSS-Tricks....

Read More

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired results. Well, this article is going to explain just how to do this and then also show how to make things fun by adding in some animation. CSS-ing the Gradient Rays The HTML is just one . In the CSS, we...

Read More

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML...

Read More

Everything you need to know about CSS Variables

This is by far the biggest deep dive I’ve seen on CSS Variables posted to the web and it’s merely Chapter One of complete e-book on the topic. Truth is, I’m still on the thick of reading through this myself, but had to stop somewhere in the middle to write this up and share it because it’s just that gosh-darned useful. For example, the post goes into great detail on three specific use cases for CSS Variables and breaks the code down to give a better understanding of what it does, in true tutorial fashion. Scoping, inheritance, resolving multiple declarations, little gotchas—there’s plenty in here for beginners and advanced developers alike. OK, back to reading. 🤓 Direct Link to Article — Permalink Everything you need to know about CSS Variables is a post from CSS-Tricks...

Read More
  • 1
  • 2
000webhost logo