Select Page

Category: custom properties

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

CSS Environment Variables

We were all introduced to the env() function in CSS when all that drama about “The Notch” and the iPhone X was going down. The way that Apple landed on helping us move content away from those “unsafe” areas was to provide us essentially hard-coded variables to use: padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); Uh ok! Weird! Now, nine months later, an “Unofficial Proposal Draft” for env() has landed. This is how specs work, as I understand it. Sometimes browser vendors push forward with stuff they need, and then it’s standardized. It’s not always waiting around for standards bodies to invent things and then browser vendors implementing those things. Are environment variables something to get excited about? Heck yeah! In a sense, they are like a more-limited version of CSS Custom Properties, but that means they can be potentially used for more things. CSS environment variables are getting standardized:https://t.co/QKFBM3WFT2Allow to get and use the browser- and author-defined variables: typography, colors, notch and other specific layout/device values.They work in Media Queries, where CSS Custom Properties cannot be used. pic.twitter.com/FWrPiBiAqp — Serg Hospodarets (@malyw) April 29, 2018 👀 Brand new spec for global env() variables in CSS: https://t.co/6YfXWFTyhN Forget notches, the important thing here is the ability to separate CSS variables from the cascade. Cool ① for perf/code organization ② because you might be able to use them in media queries! —...

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

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff...

Read More
  • 1
  • 2
000webhost logo