public

CSS3 Carbon Background Patterns

  • Download Gist
css3_background_patterns.css.scss.erb
HTML+ERB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<% 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;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.