CSS3 Carbon Background Patterns

css3_background_patterns.css.scss.erb

<% 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;
}