Tuesday, 24 April 2012

css3 patterns

body {background-color:hsl(34,53%,82%);
background-image:-webkit-repeating-linear-gradient(45deg,transparent 5px,hsla(197,62%,11%,0.5) 5px,hsla(197,62%,11%,0.5) 10px,hsla(5,53%,63%,0) 10px,hsla(5,53%,63%,0) 35px,hsla(5,53%,63%,0.5) 35px,hsla(5,53%,63%,0.5) 40px,hsla(197,62%,11%,0.5) 40px,hsla(197,62%,11%,0.5) 50px,hsla(197,62%,11%,0) 50px,hsla(197,62%,11%,0) 60px,hsla(5,53%,63%,0.5) 60px,hsla(5,53%,63%,0.5) 70px,hsla(35,91%,65%,0.5) 70px,hsla(35,91%,65%,0.5) 80px,hsla(35,91%,65%,0) 80px,hsla(35,91%,65%,0) 90px,hsla(5,53%,63%,0.5) 90px,hsla(5,53%,63%,0.5) 110px,hsla(5,53%,63%,0) 110px,hsla(5,53%,63%,0) 120px,hsla(197,62%,11%,0.5) 120px,hsla(197,62%,11%,0.5) 140px
),-webkit-repeating-linear-gradient(135deg,transparent 5px,hsla(197,62%,11%,0.5) 5px,hsla(197,62%,11%,0.5) 10px,hsla(5,53%,63%,0) 10px,hsla(5,53%,63%,0) 35px,hsla(5,53%,63%,0.5) 35px,hsla(5,53%,63%,0.5) 40px,hsla(197,62%,11%,0.5) 40px,hsla(197,62%,11%,0.5) 50px,hsla(197,62%,11%,0) 50px,hsla(197,62%,11%,0) 60px,hsla(5,53%,63%,0.5) 60px,hsla(5,53%,63%,0.5) 70px,hsla(35,91%,65%,0.5) 70px,hsla(35,91%,65%,0.5) 80px,hsla(35,91%,65%,0) 80px,hsla(35,91%,65%,0) 90px,hsla(5,53%,63%,0.5) 90px,hsla(5,53%,63%,0.5) 110px,hsla(5,53%,63%,0) 110px,hsla(5,53%,63%,0) 140px,hsla(197,62%,11%,0.5) 140px,hsla(197,62%,11%,0.5) 160px
);
background-image:-o-repeating-linear-gradient(45deg,transparent 5px,hsla(197,62%,11%,0.5) 5px,hsla(197,62%,11%,0.5) 10px,hsla(5,53%,63%,0) 10px,hsla(5,53%,63%,0) 35px,hsla(5,53%,63%,0.5) 35px,hsla(5,53%,63%,0.5) 40px,hsla(197,62%,11%,0.5) 40px,hsla(197,62%,11%,0.5) 50px,hsla(197,62%,11%,0) 50px,hsla(197,62%,11%,0) 60px,hsla(5,53%,63%,0.5) 60px,hsla(5,53%,63%,0.5) 70px,hsla(35,91%,65%,0.5) 70px,hsla(35,91%,65%,0.5) 80px,hsla(35,91%,65%,0) 80px,hsla(35,91%,65%,0) 90px,hsla(5,53%,63%,0.5) 90px,hsla(5,53%,63%,0.5) 110px,hsla(5,53%,63%,0) 110px,hsla(5,53%,63%,0) 120px,hsla(197,62%,11%,0.5) 120px,hsla(197,62%,11%,0.5) 140px
),-o-repeating-linear-gradient(135deg,transparent 5px,hsla(197,62%,11%,0.5) 5px,hsla(197,62%,11%,0.5) 10px,hsla(5,53%,63%,0) 10px,hsla(5,53%,63%,0) 35px,hsla(5,53%,63%,0.5) 35px,hsla(5,53%,63%,0.5) 40px,hsla(197,62%,11%,0.5) 40px,hsla(197,62%,11%,0.5) 50px,hsla(197,62%,11%,0) 50px,hsla(197,62%,11%,0) 60px,hsla(5,53%,63%,0.5) 60px,hsla(5,53%,63%,0.5) 70px,hsla(35,91%,65%,0.5) 70px,hsla(35,91%,65%,0.5) 80px,hsla(35,91%,65%,0) 80px,hsla(35,91%,65%,0) 90px,hsla(5,53%,63%,0.5) 90px,hsla(5,53%,63%,0.5) 110px,hsla(5,53%,63%,0) 110px,hsla(5,53%,63%,0) 140px,hsla(197,62%,11%,0.5) 140px,hsla(197,62%,11%,0.5) 160px
);}
view raw gistfile1.css hosted with ❤ by GitHub
#pattern-24{background-color:#def;
background-image:-webkit-radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%),-webkit-radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%);
background-image:-moz-radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%),-moz-radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%);
background-image:radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0,40px 40px;}
view raw gistfile1.css hosted with ❤ by GitHub
#pattern-26{background-size:100px 50px;
background-color:silver;
background-image:-webkit-radial-gradient(100% 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),-webkit-radial-gradient(0 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),-webkit-radial-gradient(50% 100%,circle,white 10%,silver 11%,silver 23%,white 24%,white 30%,silver 31%,silver 43%,white 44%,white 50%,silver 51%,silver 63%,white 64%,white 71%,transparent 71%,transparent),-webkit-radial-gradient(100% 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent),-webkit-radial-gradient(0 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent);
background-image:-moz-radial-gradient(100% 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),-moz-radial-gradient(0 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),-moz-radial-gradient(50% 100%,circle,white 10%,silver 11%,silver 23%,white 24%,white 30%,silver 31%,silver 43%,white 44%,white 50%,silver 51%,silver 63%,white 64%,white 71%,transparent 71%,transparent),-moz-radial-gradient(100% 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent),-moz-radial-gradient(0 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent);
background-image:radial-gradient(100% 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(0 150%,circle,silver 24%,white 25%,white 28%,silver 29%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(50% 100%,circle,white 10%,silver 11%,silver 23%,white 24%,white 30%,silver 31%,silver 43%,white 44%,white 50%,silver 51%,silver 63%,white 64%,white 71%,transparent 71%,transparent),radial-gradient(100% 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent),radial-gradient(0 50%,circle,white 5%,silver 6%,silver 15%,white 16%,white 20%,silver 21%,silver 30%,white 31%,white 35%,silver 36%,silver 45%,white 46%,white 49%,transparent 50%,transparent);}
view raw gistfile1.css hosted with ❤ by GitHub
#pattern-56{background:-webkit-linear-gradient(-45deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px),-webkit-linear-gradient(225deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px)0 64px;
background:-moz-linear-gradient(-45deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px),-moz-linear-gradient(225deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px)0 64px;
background:-o-linear-gradient(-45deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px),-o-linear-gradient(225deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px)0 64px;
background:-ms-linear-gradient(-45deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px),-ms-linear-gradient(225deg,#708090 22px,#d9ecff 22px,#d9ecff 24px,transparent 24px,transparent 67px,#d9ecff 67px,#d9ecff 69px,transparent 69px)0 64px;
background-color:#708090;
background-size:64px 128px}
view raw gistfile1.css hosted with ❤ by GitHub
#pattern-6{background:-webkit-radial-gradient(black 15%,transparent 16%) 0 0,-webkit-radial-gradient(black 15%,transparent 16%) 8px 8px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-webkit-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
background:-moz-radial-gradient(black 15%,transparent 16%) 0 0,-moz-radial-gradient(black 15%,transparent 16%) 8px 8px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,-moz-radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
background:radial-gradient(black 15%,transparent 16%) 0 0,radial-gradient(black 15%,transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%,transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;}
view raw gistfile1.css hosted with ❤ by GitHub
#pattern-28{background-image:-webkit-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-webkit-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-webkit-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-webkit-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-webkit-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a),-webkit-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a);
background-image:-moz-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-moz-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-moz-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-moz-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-moz-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a),-moz-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a);
background-image:-ms-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-ms-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-ms-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-ms-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-ms-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a),-ms-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a);
background-image:-o-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-o-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-o-linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-o-linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),-o-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a),-o-linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a);
background-image:linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(-60deg,#445 12%,transparent 12.5%,transparent 87%,#445 87.5%,#445),linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a),linear-gradient(30deg,#99a 25%,transparent 25.5%,transparent 75%,#99a 75%,#99a);
background-size:80px 140px;
background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px;
background-color:#556;}
view raw gistfile1.css hosted with ❤ by GitHub

No comments:

Post a Comment