Anchor Positioning Is Disruptive
New layouts will be possible
The more I play with it, the more convinced I am that anchor positioning is going to unlock some surprising new layouts.
Article
post type
Stripes Function
Copy permalink to “Stripes Function”Start by setting a variable to the colors you want:
$rainbow: red orange yellow green blue indigo violet;You could set individual variables for each color as well. You would still pass them all as a single argument, or join them into a single variable before passing, as you see fit.
Here’s the function:
// Returns a striped gradient for use anywhere gradients are accepted.
// - $position: the starting position or angle of the gradient.
// - $colors: a list of all the colors to be used.
@function stripes($position, $colors) {
$colors: if(type-of($colors) != 'list', compact($colors), $colors);
$gradient: compact();
$width: 100% / length($colors);
@for $i from 1 through length($colors) {
$pop: nth($colors,$i);
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
$gradient: join($gradient, $new, comma);
}
@return linear-gradient($position, $gradient);
}And how to use it:
.rainbow {
@include background-image(stripes(left, $rainbow));
}Jina has posted a demo and explanation on CodePen.
(The real lesson here is that all the colors of the rainbow are acceptable CSS color keywords. Go forth and queer the web.)
Recent Articles
Article post typeUpdates to the Most Desired CSS Feature You Can’t Use Yet
Performance, scope, and fallbacks for the anchor positioning polyfill
Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.
Article post typeWhat do survey demographics tell us?
Are we measuring what we meant to measure?
There’s been a lot of interest in the results of the annual State of CSS survey, but are we asking all the right questions?
