Skip to content

Instantly share code, notes, and snippets.

@cemre
Created March 1, 2012 04:23
Show Gist options
  • Save cemre/1947254 to your computer and use it in GitHub Desktop.
Save cemre/1947254 to your computer and use it in GitHub Desktop.
SASS Striped CSS3 background mixin
@mixin striped-background($stripe1, $stripe2, $angle: -45deg, $size: 40px, $other-backgrounds: false) {
@include background-image(linear-gradient($angle, $stripe1 25%, $stripe2 25%, $stripe2 50%, $stripe1 50%, $stripe1 75%, $stripe2 75%, $stripe2), $other-backgrounds);
background-repeat: repeat;
@include background-size(unquote("#{$size} #{$size}"));
}
// from twitter bootstrap
@-webkit-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
@-moz-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
.button {
@include striped-background(rgba(255,255,255,0.6), transparent, $other-backgrounds: $button-gradient);
@include _("animation", "progress-bar-stripes 2s linear infinite");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment