Created
May 1, 2011 00:08
-
-
Save ZenCocoon/950118 to your computer and use it in GitHub Desktop.
CSS3 Carbon Pattern inspired from subtlepatterns's Atle Mo, Micro Carbon
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* First Draft */ | |
background-size: 20px 20px; | |
background-position: 0px 5px, 10px 0px, 0px 10px, 10px 5px, | |
0px 15px, 10px 10px, 0px 20px, 10px 15px, | |
10px 5px, 0px 0px, 10px 10px, 0px 5px, | |
10px 15px, 0px 10px, 10px 20px, 0px 15px; | |
background-image: | |
linear-gradient(63deg, #131313 5px, transparent 5px), | |
linear-gradient(243deg, #131313 5px, transparent 5px), | |
linear-gradient(63deg, #242424 5px, transparent 5px), | |
linear-gradient(243deg, #242424 5px, transparent 5px), | |
linear-gradient(63deg, #1d1d1d 5px, transparent 5px), | |
linear-gradient(243deg, #1d1d1d 5px, transparent 5px), | |
linear-gradient(63deg, #1a1a1a 5px, transparent 5px), | |
linear-gradient(243deg, #1a1a1a 5px, transparent 5px), | |
linear-gradient(63deg, #1b1b1b 5px, transparent 5px), | |
linear-gradient(243deg, #1b1b1b 5px, transparent 5px), | |
linear-gradient(63deg, #1c1c1c 5px, transparent 5px), | |
linear-gradient(243deg, #1c1c1c 5px, transparent 5px), | |
linear-gradient(63deg, #151515 5px, transparent 5px), | |
linear-gradient(243deg, #151515 5px, transparent 5px), | |
linear-gradient(63deg, #222 5px, transparent 5px), | |
linear-gradient(243deg, #222 5px, transparent 5px); | |
/* First Draft reviewed by Lea Verou */ | |
background: | |
linear-gradient(63deg, #131313 5px, transparent 5px) 0 5px, | |
linear-gradient(243deg, #131313 5px, transparent 5px) 10px 0, | |
linear-gradient(63deg, #242424 5px, transparent 5px) 0 10px, | |
linear-gradient(243deg, #242424 5px, transparent 5px) 10px 5px, | |
linear-gradient(63deg, #1d1d1d 5px, transparent 5px) 0 15px, | |
linear-gradient(243deg, #1d1d1d 5px, transparent 5px) 10px 10px, | |
linear-gradient(63deg, #1a1a1a 5px, transparent 5px) 0 20px, | |
linear-gradient(243deg, #1a1a1a 5px, transparent 5px) 10px 15px, | |
linear-gradient(#1b1b1b 5px, #1c1c1c 5px, #1c1c1c 10px, transparent 10px, transparent 15px, #222 15px, #222 20px); | |
background-color: #151515; | |
background-size: 20px 20px; | |
/* Second Draft BIG */ | |
background: | |
linear-gradient(63deg, #151515 20px, transparent 20px) 0 20px, | |
linear-gradient(243deg, #151515 20px, transparent 20px) 40px 0px, | |
linear-gradient(63deg, #222 20px, transparent 20px) 0px 40px, | |
linear-gradient(243deg, #222 20px, transparent 20px) 40px 20px, | |
linear-gradient(0deg, #1b1b1b 40px, transparent 40px), | |
linear-gradient(#1d1d1d 20px, #1a1a1a 20px, #1a1a1a 40px, transparent 40px, transparent 60px, #242424 60px, #242424 80px); | |
background-color: #131313; | |
background-size: 80px 80px; | |
/* Second Draft */ | |
background: | |
linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, | |
linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, | |
linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, | |
linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, | |
linear-gradient(0deg, #1b1b1b 10px, transparent 10px), | |
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); | |
background-color: #131313; | |
background-size: 20px 20px; | |
*/ Second Draft, white alternative */ | |
background: | |
linear-gradient(63deg, #dfdddf 5px, transparent 5px) 0 5px, | |
linear-gradient(243deg, #dfdddf 5px, transparent 5px) 10px 0px, | |
linear-gradient(63deg, #e7e6e7 5px, transparent 5px) 0px 10px, | |
linear-gradient(243deg, #e7e6e7 5px, transparent 5px) 10px 5px, | |
linear-gradient(0deg, #efefef 10px, transparent 10px), | |
linear-gradient(transparent 50%, #dfdddf 50%, #dfdddf 75%, #e7e6e7 75%, #e7e6e7); | |
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
Best tried with @LeaVerou CSS3 Pattern Gallery http://leaverou.me/css3patterns