Skip to content

Instantly share code, notes, and snippets.

@knbknb
Created October 12, 2021 19:30
Show Gist options
  • Select an option

  • Save knbknb/3f4b201497ddf672ff290efd2e38ce16 to your computer and use it in GitHub Desktop.

Select an option

Save knbknb/3f4b201497ddf672ff290efd2e38ce16 to your computer and use it in GitHub Desktop.
Checkerboard Pattern mixin - from L. Verou's book "CSS Secrets", 2015
@mixin checkerboard($size, $base, $accent: rgba(0,0,0, 0.26)) {
background: $base;
background-image: linear-gradient(
45deg,
$accent 25%,
transparent 0,
transparent 75%, $accent 0
),
linear-gradient(
45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0);
background-position: 0 0, $size $size;
background-size: 2 * size 2 * $size;
}
}
// use as
// @include checkerboard(15px, #58am tan);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment