bespoke-theme-atomantic/lib/css/backgrounds.styl

A theme for Bespoke.js using x-gif

/*
 * backgrounds
 */
// http://lea.verou.me/css3patterns/#
// http://css3pie.com/demos/gradient-patterns/
.carbonfiber
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px
  background-color: #282828
  background-size: 16px 16px
.carbon
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #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
.seigaiha
  background-color: silver
  background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, 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(circle at 100% 50%, 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(circle at 0 50%, 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-size: 100px 50px
.cubes
  background-color: #556
  background-image: linear-gradient(30deg, #444455 12%, transparent 12.5%, transparent 87%, #444455 87.5%, #444455), linear-gradient(150deg, #444455 12%, transparent 12.5%, transparent 87%, #444455 87.5%, #444455), linear-gradient(30deg, #444455 12%, transparent 12.5%, transparent 87%, #444455 87.5%, #444455), linear-gradient(150deg, #444455 12%, transparent 12.5%, transparent 87%, #444455 87.5%, #444455), linear-gradient(60deg, #9999aa 25%, transparent 25.5%, transparent 75%, #9999aa 75%, #9999aa), linear-gradient(60deg, #9999aa 25%, transparent 25.5%, transparent 75%, #9999aa 75%, #9999aa)
  background-size: 80px 140px
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px
.paper
  background-color: #fff
  background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eeeeee 0.1em, transparent 0.1em)
  background-size: 100% 1.2em
.honeycomb
  background: radial-gradient(circle farthest-side at 0% 50%, #ffbb11 23.5%, rgba(240, 166, 17, 0) 0) 21px 30px, radial-gradient(circle farthest-side at 0% 50%, #bb7711 24%, rgba(240, 166, 17, 0) 0) 19px 30px, linear-gradient(#ffbb11 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #ffbb11 0) 0 0, linear-gradient(150deg, #ffbb11 24%, #bb7711 0, #bb7711 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #bb7711 0, #bb7711 76%, #ffbb11 0) 0 0, linear-gradient(30deg, #ffbb11 24%, #bb7711 0, #bb7711 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #bb7711 0, #bb7711 76%, #ffbb11 0) 0 0, linear-gradient(90deg, #bb7711 2%, #ffbb11 0, #ffbb11 98%, #bb7711 0%) 0 0 #ffbb11
  background-size: 40px 60px
.wave
  background: linear-gradient(white 50%, rgba(255, 255, 255, 0) 0) 0 0, radial-gradient(circle closest-side, white 53%, rgba(255, 255, 255, 0) 0) 0 0, radial-gradient(circle closest-side, white 50%, rgba(255, 255, 255, 0) 0) 55px 0 #4488bb
  background-size: 110px 200px
  background-repeat: repeat-x
.blueprint
  background-color: #269
  background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px)
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px
  background-position: (-2px) -2px, -2px -2px, -1px -1px, -1px -1px
.shippo
  background-color: #def
  background-image: radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%)
  background-size: 80px 80px
  background-position: 0 0, 40px 40px
// http://www.transparenttextures.com

/*
you will need to copy bespoke-theme-atomantic/lib/patterns/* to your dist/images/patterns/*
you can do this with gulp or just one time after installing the theme
*/
.blackthread
  background-image: url("images/patterns/black-thread-light.png")
.brickwalldark
  background-image: url("images/patterns/brick-wall-dark.png")
.brickwall
  background-image: url("images/patterns/brick-wall.png")
.diagmonds
  background-image: url("images/patterns/diagmonds-light.png")
.diamondupholstery
  background-image: url("images/patterns/diamond-upholstery.png")
.gplay
  background-image: url("images/patterns/gplay.png")
.gravel
  background-image: url("images/patterns/gravel.png")
.oldmath
  background-image: url("images/patterns/old-mathematics.png")
.purtywood
  background-image: url("images/patterns/purty-wood.png")
.bullseyes
  background-image: url("images/patterns/strange-bullseyes.png")
.escheresque
  background-image: url("images/patterns/escheresque.png")
.straws
  background-image: url("images/patterns/straws.png")
.littleboxes
  background-image: url("images/patterns/littleboxes.png")
.woodtilecolor
  background-image: url("images/patterns/tileable-wood-colored.png")
.woodtile
  background-image: url("images/patterns/tileable-wood.png")
.treebark
  background-image: url("images/patterns/tree-bark.png")
.washi
  background-image: url("images/patterns/washi.png")
.wood-pattern
  background-image: url("images/patterns/wood-pattern.png")
.xv
  background-image: url("images/patterns/xv.png")