Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CSS3 Carbon Background Patterns
<% vendor_prefixes = ['-moz-', '-webkit-', '-o-', '-ms-', ''] %>
@mixin carbon {
<% vendor_prefixes.each do |prefix| %>
<%= "background:
#{prefix}linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
#{prefix}linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
#{prefix}linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
#{prefix}linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
#{prefix}linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
#{prefix}linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);" %>
<% end %>
background-color: #131313;
background-size: 20px 20px;
}
@mixin white-carbon {
<% vendor_prefixes.each do |prefix| %>
<%= "background:
#{prefix}linear-gradient(63deg, #dfdddf 5px, transparent 5px) 0 5px,
#{prefix}linear-gradient(243deg, #dfdddf 5px, transparent 5px) 10px 0px,
#{prefix}linear-gradient(63deg, #e7e6e7 5px, transparent 5px) 0px 10px,
#{prefix}linear-gradient(243deg, #e7e6e7 5px, transparent 5px) 10px 5px,
#{prefix}linear-gradient(0deg, #efefef 10px, transparent 10px),
#{prefix}linear-gradient(transparent 50%, #dfdddf 50%, #dfdddf 75%, #e7e6e7 75%, #e7e6e7);" %>
<% end %>
background-color: #efefef;
background-size: 20px 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.