Archive for the ‘custom properties’ Category

The CSS attr() function got nothin’ on custom properties

Posted on: No Comments
Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn't know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is w...

Creating Yin and Yang Loaders On the Web

I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use thes...

Animating Single Div Art

When you dig deep with your tools, it is amazing what you can create out of the most basic of HTML. I have been constantly impressed with "Single Div Art" by Lynn Fisher and others where you take a single generic <div> to create a beautiful cactu...

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel... outdated and very WET. I thought I should do something to fi...

The Issue with Preprocessing CSS Custom Properties

CSS has Custom Properties now. We've written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don't have them and never will. I can see the appeal of authoring with "future CSS", and l...

CSS Custom Properties and Theming

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables...

Individual CSS Transform Functions

Posted on: No Comments
Dan Wilson documents a classic annoyance with transforms: button { transform: translateY(-150%); } button:hover { /* will (perhaps unintentionally) override the original translate */ transform: scale(.8); } The native (and WET) solution is list t...

Random Numbers in CSS

Posted on: No Comments
I stumbled into an interesting problem the other day. I wanted to animate an element with a random animation-duration. This was the non-randomized starting point: See the Pen Random numbers CSS #1 by Robin Rendle (@robinrendle) on CodePen. This is the...