Search

Nalezeno "custom properties": 60

Using Custom Property “Stacks” to Tame the Cascade


Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control...

Global CSS options with custom properties


With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward: $option: false; @mixin doThing { @if $option { do-thing: yep; } } .el { @include doThing; } Can we do that in native CSS with custom properties? Mark Otto shows...

@property


The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about! There is a draft spec and an “intent to ship” document. The code from that document shows: @property --my-property { syntax: "<color"; initial-value: green; ...

Creating Color Themes With Custom Properties, HSL, and a Little calc()


Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing in the world. Nowadays, though,...

Getting JavaScript to Talk to CSS and Sass


JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting...

A Complete Guide to calc() in CSS


CSS has a special calc() function for doing basic math. Here's an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } In this guide, let's cover just about everything there is to know about this very useful function. calc() is for values The only place you...

How to Make a Line Chart With CSS


Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG or a JavaScript chart library like Chart.js or a complex tool like D3 to create those charts, but what if you don't want to load yet another...

Custom Styling Form Inputs With Modern CSS Features


It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look. Here’s...

The Web in 2020: Extensibility and Interoperability


In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability. Let’s break those down. Extensibility Extensibility describes...

Multi-Thumb Sliders: General Case


The first part of this two-part series detailed how we can get a two-thumb slider. Now we'll look at a general multi-thumb case, but with a different and better technique for creating the fills in between the thumbs. And finally, we'll dive into the how behind the styling a realistic 3D-looking...

Multi-Thumb Sliders: Particular Two-Thumb Case


This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make my...

7 Uses for CSS Custom Properties


I find all seven of these quite clever and useful. I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of code. .some-element { background-color: hsla( var(--h, 120), var(--s, 50), var(--l...

Moving Rainbow Underlines


I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not scroll-jacking — it's just a minor design feature that uses scroll position to enact a little movement. To draw the rainbows...

The Power (and Fun) of Scope with CSS Custom Properties


You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like --size: 1em and use them as values like font-size: var(--size);, they differ from preprocessor variables...

Patterns for Practical CSS Custom Properties Use


I've been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so useful...

Using Custom Properties to Wrangle Variations in Keyframe Animations


Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS. Well, I found a way to account for variations within...

Logical Operations with CSS Variables


Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these...

Contextual Utility Classes for Color with Custom Properties


In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away. With that said, I am sure I am not alone when I say I'd like to style some links based on...

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