Skip to content

Instantly share code, notes, and snippets.

@jdelibas

jdelibas/CSS-Dig-Dug-Sprites.markdown

Created March 8, 2014 10:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdelibas/9428639 to your computer and use it in GitHub Desktop.
Save jdelibas/9428639 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by James.
Raw
CSS-Dig-Dug-Sprites.markdown

CSS Dig Dug Sprites

SIngle element dig dug sprites made using box-shadow.

A Pen by James on CodePen.

License.

Raw
index.html
<div class="pooka"></div>
<div class="dug"></div>
<div class="fygar"></div>
Raw
style.scss
@import "compass";
//Palette
$white : #dedede;
$blue : #006fa7;
$red : #c11a22;
$black : #000000;
$yellow: #ffe300;
$green : #47a630;
//Adjust Size
$width : .5em;
body {
background:#cbced5;
}
@mixin dug{
box-shadow:
($width * 8) ($width * 1) 0 $white,
($width * 9) ($width * 1) 0 $white,
($width * 10) ($width * 1) 0 $white,
($width * 8) ($width * 2) 0 $white,
($width * 9) ($width * 2) 0 $white,
($width * 10) ($width * 2) 0 $white,
($width * 11) ($width * 2) 0 $white,
($width * 12) ($width * 2) 0 $white,
($width * 6) ($width * 3) 0 $white,
($width * 7) ($width * 3) 0 $white,
($width * 8) ($width * 3) 0 $white,
($width * 9) ($width * 3) 0 $white,
($width * 10) ($width * 3) 0 $white,
($width * 11) ($width * 3) 0 $white,
($width * 12) ($width * 3) 0 $white,
($width * 13) ($width * 3) 0 $white,
($width * 4) ($width * 4) 0 $white,
($width * 5) ($width * 4) 0 $white,
($width * 6) ($width * 4) 0 $white,
($width * 7) ($width * 4) 0 $white,
($width * 8) ($width * 4) 0 $white,
($width * 9) ($width * 4) 0 $white,
($width * 10) ($width * 4) 0 $white,
($width * 11) ($width * 4) 0 $white,
($width * 11) ($width * 4) 0 $white,
($width * 12) ($width * 4) 0 $white,
($width * 13) ($width * 4) 0 $white,
($width * 14) ($width * 4) 0 $white,
($width * 4) ($width * 5) 0 $blue,
($width * 5) ($width * 5) 0 $black,
($width * 6) ($width * 5) 0 $blue,
($width * 7) ($width * 5) 0 $black,
($width * 8) ($width * 5) 0 $blue,
($width * 9) ($width * 5) 0 $blue,
($width * 10) ($width * 5) 0 $blue,
($width * 11) ($width * 5) 0 $blue,
($width * 12) ($width * 5) 0 $white,
($width * 13) ($width * 5) 0 $white,
($width * 14) ($width * 5) 0 $white,
($width * 4) ($width * 6) 0 $blue,
($width * 5) ($width * 6) 0 $black,
($width * 6) ($width * 6) 0 $blue,
($width * 7) ($width * 6) 0 $black,
($width * 8) ($width * 6) 0 $blue,
($width * 9) ($width * 6) 0 $blue,
($width * 10)($width * 6) 0 $blue,
($width * 11) ($width * 6) 0 $blue,
($width * 12) ($width * 6) 0 $white,
($width * 13) ($width * 6) 0 $white,
($width * 14) ($width * 6) 0 $white,
($width * 4) ($width * 7) 0 $blue,
($width * 5) ($width * 7) 0 $black,
($width * 6) ($width * 7) 0 $blue,
($width * 7) ($width * 7) 0 $black,
($width * 8) ($width * 7) 0 $blue,
($width * 9) ($width * 7) 0 $blue,
($width * 10)($width * 7) 0 $blue,
($width * 11) ($width * 7) 0 $blue,
($width * 12) ($width * 7) 0 $white,
($width * 13) ($width * 7) 0 $white,
($width * 14) ($width * 7) 0 $white,
($width * 5) ($width * 8) 0 $blue,
($width * 6) ($width * 8) 0 $blue,
($width * 7) ($width * 8) 0 $blue,
($width * 8) ($width * 8) 0 $blue,
($width * 9) ($width * 8) 0 $blue,
($width * 10) ($width * 8) 0 $blue,
($width * 11) ($width * 8) 0 $white,
($width * 12) ($width * 8) 0 $white,
($width * 13) ($width * 8) 0 $white,
($width * 14) ($width * 8) 0 $white,
($width * 3) ($width * 9) 0 $red,
($width * 6) ($width * 9) 0 $white,
($width * 7) ($width * 9) 0 $white,
($width * 8) ($width * 9) 0 $white,
($width * 9) ($width * 9) 0 $white,
($width * 10) ($width * 9) 0 $white,
($width * 11) ($width * 9) 0 $blue,
($width * 12) ($width * 9) 0 $blue,
($width * 2) ($width * 10) 0 $red,
($width * 3) ($width * 10) 0 $red,
($width * 5) ($width * 10) 0 $white,
($width * 6) ($width * 10) 0 $white,
($width * 7) ($width * 10) 0 $white,
($width * 8) ($width * 10) 0 $white,
($width * 9) ($width * 10) 0 $white,
($width * 10) ($width * 10) 0 $white,
($width * 11) ($width * 10) 0 $blue,
($width * 12) ($width * 10) 0 $blue,
($width * 13) ($width * 10) 0 $white,
($width * 1) ($width * 11) 0 $red,
($width * 2) ($width * 11) 0 $red,
($width * 3) ($width * 11) 0 $red,
($width * 4) ($width * 11) 0 $red,
($width * 5) ($width * 11) 0 $red,
($width * 6) ($width * 11) 0 $red,
($width * 7) ($width * 11) 0 $red,
($width * 8) ($width * 11) 0 $blue,
($width * 9) ($width * 11) 0 $blue,
($width * 10) ($width * 11) 0 $blue,
($width * 11) ($width * 11) 0 $blue,
($width * 12) ($width * 11) 0 $red,
($width * 13) ($width * 11) 0 $red,
($width * 14) ($width * 11) 0 $red,
($width * 2) ($width * 12) 0 $red,
($width * 3) ($width * 12) 0 $red,
($width * 5) ($width * 12) 0 $white,
($width * 6) ($width * 12) 0 $white,
($width * 7) ($width * 12) 0 $white,
($width * 8) ($width * 12) 0 $blue,
($width * 9) ($width * 12) 0 $blue,
($width * 10) ($width * 12) 0 $blue,
($width * 11) ($width * 12) 0 $white,
($width * 12) ($width * 12) 0 $white,
($width * 3) ($width * 13) 0 $red,
($width * 6) ($width * 13) 0 $white,
($width * 7) ($width * 13) 0 $white,
($width * 8) ($width * 13) 0 $white,
($width * 9) ($width * 13) 0 $white,
($width * 10) ($width * 13) 0 $white,
($width * 11) ($width * 13) 0 $white,
($width * 12) ($width * 13) 0 $white,
($width * 13) ($width * 13) 0 $white,
($width * 7) ($width * 14) 0 $white,
($width * 8) ($width * 14) 0 $white,
($width * 12) ($width * 14) 0 $white,
($width * 13) ($width * 14) 0 $white,
($width * 5) ($width * 15) 0 $white,
($width * 6) ($width * 15) 0 $white,
($width * 7) ($width * 15) 0 $white,
($width * 8) ($width * 15) 0 $white,
($width * 10) ($width * 15) 0 $white,
($width * 11) ($width * 15) 0 $white,
($width * 12) ($width * 15) 0 $white,
($width * 13) ($width * 15) 0 $white
}
@mixin pooka{
box-shadow:
($width * 3) ($width * 4) 0 $red,
($width * 4) ($width * 4) 0 $red,
($width * 5) ($width * 4) 0 $red,
($width * 6) ($width * 4) 0 $red,
($width * 7) ($width * 4) 0 $red,
($width * 8) ($width * 4) 0 $red,
($width * 9) ($width * 4) 0 $red,
($width * 10) ($width * 4) 0 $red,
($width * 2) ($width * 5) 0 $yellow,
($width * 3) ($width * 5) 0 $yellow,
($width * 4) ($width * 5) 0 $yellow,
($width * 5) ($width * 5) 0 $yellow,
($width * 6) ($width * 5) 0 $yellow,
($width * 7) ($width * 5) 0 $yellow,
($width * 8) ($width * 5) 0 $yellow,
($width * 9) ($width * 5) 0 $yellow,
($width * 10) ($width * 5) 0 $red,
($width * 11) ($width * 5) 0 $red,
($width * 1) ($width * 6) 0 $yellow,
($width * 2) ($width * 6) 0 $yellow,
($width * 3) ($width * 6) 0 $white,
($width * 4) ($width * 6) 0 $white,
($width * 5) ($width * 6) 0 $white,
($width * 6) ($width * 6) 0 $white,
($width * 7) ($width * 6) 0 $white,
($width * 8) ($width * 6) 0 $white,
($width * 9) ($width * 6) 0 $yellow,
($width * 10) ($width * 6) 0 $yellow,
($width * 11) ($width * 6) 0 $red,
($width * 12) ($width * 6) 0 $red,
($width * 1) ($width * 7) 0 $yellow,
($width * 2) ($width * 7) 0 $white,
($width * 3) ($width * 7) 0 $black,
($width * 4) ($width * 7) 0 $white,
($width * 5) ($width * 7) 0 $white,
($width * 6) ($width * 7) 0 $black,
($width * 7) ($width * 7) 0 $white,
($width * 8) ($width * 7) 0 $white,
($width * 9) ($width * 7) 0 $white,
($width * 10) ($width * 7) 0 $yellow,
($width * 11) ($width * 7) 0 $yellow,
($width * 12) ($width * 7) 0 $yellow,
($width * 1) ($width * 8) 0 $yellow,
($width * 2) ($width * 8) 0 $white,
($width * 3) ($width * 8) 0 $black,
($width * 4) ($width * 8) 0 $white,
($width * 5) ($width * 8) 0 $white,
($width * 6) ($width * 8) 0 $black,
($width * 7) ($width * 8) 0 $white,
($width * 8) ($width * 8) 0 $white,
($width * 9) ($width * 8) 0 $white,
($width * 10) ($width * 8) 0 $yellow,
($width * 11) ($width * 8) 0 $yellow,
($width * 12) ($width * 8) 0 $yellow,
($width * 1) ($width * 9) 0 $yellow,
($width * 2) ($width * 9) 0 $white,
($width * 3) ($width * 9) 0 $white,
($width * 4) ($width * 9) 0 $yellow,
($width * 5) ($width * 9) 0 $white,
($width * 6) ($width * 9) 0 $white,
($width * 7) ($width * 9) 0 $white,
($width * 8) ($width * 9) 0 $white,
($width * 9) ($width * 9) 0 $yellow,
($width * 10) ($width * 9) 0 $yellow,
($width * 11) ($width * 9) 0 $red,
($width * 12) ($width * 9) 0 $red,
($width * 1) ($width * 10) 0 $yellow,
($width * 2) ($width * 10) 0 $yellow,
($width * 3) ($width * 10) 0 $yellow,
($width * 4) ($width * 10) 0 $yellow,
($width * 5) ($width * 10) 0 $yellow,
($width * 6) ($width * 10) 0 $yellow,
($width * 7) ($width * 10) 0 $yellow,
($width * 8) ($width * 10) 0 $yellow,
($width * 9) ($width * 10) 0 $yellow,
($width * 10) ($width * 10) 0 $red,
($width * 11) ($width * 10) 0 $red,
($width * 12) ($width * 10) 0 $red,
($width * 1) ($width * 11) 0 $red,
($width * 2) ($width * 11) 0 $yellow,
($width * 3) ($width * 11) 0 $yellow,
($width * 4) ($width * 11) 0 $red,
($width * 5) ($width * 11) 0 $red,
($width * 6) ($width * 11) 0 $yellow,
($width * 7) ($width * 11) 0 $yellow,
($width * 8) ($width * 11) 0 $yellow,
($width * 9) ($width * 11) 0 $red,
($width * 10) ($width * 11) 0 $red,
($width * 11) ($width * 11) 0 $red,
($width * 2) ($width * 12) 0 $red,
($width * 3) ($width * 12) 0 $red,
($width * 4) ($width * 12) 0 $red,
($width * 5) ($width * 12) 0 $red,
($width * 6) ($width * 12) 0 $red,
($width * 7) ($width * 12) 0 $red,
($width * 8) ($width * 12) 0 $red,
($width * 9) ($width * 12) 0 $red,
($width * 10) ($width * 12) 0 $red,
($width * 3) ($width * 13) 0 $red,
($width * 4) ($width * 13) 0 $yellow,
($width * 5) ($width * 13) 0 $red,
($width * 6) ($width * 13) 0 $red,
($width * 7) ($width * 13) 0 $red,
($width * 8) ($width * 13) 0 $red,
($width * 9) ($width * 13) 0 $yellow,
($width * 10) ($width * 13) 0 $red,
($width * 4) ($width * 14) 0 $yellow,
($width * 9) ($width * 14) 0 $yellow,
($width * 2) ($width * 15) 0 $yellow,
($width * 3) ($width * 15) 0 $yellow,
($width * 4) ($width * 15) 0 $yellow,
($width * 5) ($width * 15) 0 $yellow,
($width * 7) ($width * 15) 0 $yellow,
($width * 8) ($width * 15) 0 $yellow,
($width * 9) ($width * 15) 0 $yellow,
($width * 10) ($width * 15) 0 $yellow
}
@mixin fygar{
box-shadow:
($width * 3) ($width * 3) 0 $green,
($width * 4) ($width * 3) 0 $green,
($width * 5) ($width * 3) 0 $green,
($width * 6) ($width * 3) 0 $green,
($width * 7) ($width * 3) 0 $green,
($width * 8) ($width * 3) 0 $green,
($width * 2) ($width * 4) 0 $green,
($width * 3) ($width * 4) 0 $green,
($width * 4) ($width * 4) 0 $green,
($width * 5) ($width * 4) 0 $green,
($width * 6) ($width * 4) 0 $green,
($width * 7) ($width * 4) 0 $green,
($width * 8) ($width * 4) 0 $green,
($width * 9) ($width * 4) 0 $white,
($width * 10) ($width * 4) 0 $white,
($width * 2) ($width * 5) 0 $white,
($width * 3) ($width * 5) 0 $black,
($width * 4) ($width * 5) 0 $white,
($width * 5) ($width * 5) 0 $green,
($width * 6) ($width * 5) 0 $green,
($width * 7) ($width * 5) 0 $green,
($width * 8) ($width * 5) 0 $white,
($width * 9) ($width * 5) 0 $black,
($width * 10) ($width * 5) 0 $black,
($width * 11) ($width * 5) 0 $white,
($width * 1) ($width * 6) 0 $white,
($width * 2) ($width * 6) 0 $black,
($width * 3) ($width * 6) 0 $white,
($width * 4) ($width * 6) 0 $black,
($width * 5) ($width * 6) 0 $white,
($width * 6) ($width * 6) 0 $black,
($width * 7) ($width * 6) 0 $green,
($width * 8) ($width * 6) 0 $white,
($width * 9) ($width * 6) 0 $black,
($width * 10) ($width * 6) 0 $black,
($width * 11) ($width * 6) 0 $black,
($width * 12) ($width * 6) 0 $white,
($width * 1) ($width * 7) 0 $green,
($width * 2) ($width * 7) 0 $green,
($width * 3) ($width * 7) 0 $green,
($width * 4) ($width * 7) 0 $green,
($width * 5) ($width * 7) 0 $green,
($width * 6) ($width * 7) 0 $black,
($width * 7) ($width * 7) 0 $black,
($width * 8) ($width * 7) 0 $green,
($width * 9) ($width * 7) 0 $white,
($width * 10) ($width * 7) 0 $black,
($width * 11) ($width * 7) 0 $white,
($width * 12) ($width * 7) 0 $white,
($width * 2) ($width * 8) 0 $green,
($width * 3) ($width * 8) 0 $green,
($width * 4) ($width * 8) 0 $green,
($width * 5) ($width * 8) 0 $green,
($width * 6) ($width * 8) 0 $green,
($width * 7) ($width * 8) 0 $green,
($width * 8) ($width * 8) 0 $green,
($width * 9) ($width * 8) 0 $green,
($width * 10) ($width * 8) 0 $white,
($width * 11) ($width * 8) 0 $white,
($width * 12) ($width * 8) 0 $white,
($width * 4) ($width * 9) 0 $green,
($width * 5) ($width * 9) 0 $green,
($width * 6) ($width * 9) 0 $green,
($width * 7) ($width * 9) 0 $green,
($width * 8) ($width * 9) 0 $green,
($width * 9) ($width * 9) 0 $green,
($width * 10) ($width * 9) 0 $red,
($width * 11) ($width * 9) 0 $red,
($width * 12) ($width * 9) 0 $red,
($width * 6) ($width * 10) 0 $green,
($width * 7) ($width * 10) 0 $green,
($width * 8) ($width * 10) 0 $red,
($width * 9) ($width * 10) 0 $red,
($width * 10) ($width * 10) 0 $red,
($width * 11) ($width * 10) 0 $red,
($width * 12) ($width * 10) 0 $red,
($width * 13) ($width * 10) 0 $red,
($width * 5) ($width * 11) 0 $green,
($width * 6) ($width * 11) 0 $green,
($width * 7) ($width * 11) 0 $green,
($width * 8) ($width * 11) 0 $green,
($width * 9) ($width * 11) 0 $red,
($width * 11) ($width * 11) 0 $red,
($width * 13) ($width * 11) 0 $red,
($width * 1) ($width * 12) 0 $red,
($width * 3) ($width * 12) 0 $green,
($width * 4) ($width * 12) 0 $green,
($width * 5) ($width * 12) 0 $green,
($width * 6) ($width * 12) 0 $green,
($width * 7) ($width * 12) 0 $green,
($width * 8) ($width * 12) 0 $green,
($width * 9) ($width * 12) 0 $green,
($width * 1) ($width * 13) 0 $red,
($width * 3) ($width * 13) 0 $green,
($width * 4) ($width * 13) 0 $green,
($width * 5) ($width * 13) 0 $green,
($width * 6) ($width * 13) 0 $green,
($width * 7) ($width * 13) 0 $red,
($width * 8) ($width * 13) 0 $green,
($width * 9) ($width * 13) 0 $green,
($width * 14) ($width * 13) 0 $green,
($width * 2) ($width * 14) 0 $red,
($width * 3) ($width * 14) 0 $green,
($width * 4) ($width * 14) 0 $green,
($width * 5) ($width * 14) 0 $green,
($width * 5) ($width * 14) 0 $green,
($width * 6) ($width * 14) 0 $green,
($width * 7) ($width * 14) 0 $red,
($width * 8) ($width * 14) 0 $green,
($width * 9) ($width * 14) 0 $green,
($width * 10) ($width * 14) 0 $green,
($width * 11) ($width * 14) 0 $green,
($width * 12) ($width * 14) 0 $green,
($width * 13) ($width * 14) 0 $green,
($width * 14) ($width * 14) 0 $green,
($width * 2) ($width * 15) 0 $red,
($width * 5) ($width * 15) 0 $red,
($width * 6) ($width * 15) 0 $red,
($width * 7) ($width * 15) 0 $red,
($width * 8) ($width * 15) 0 $red,
($width * 10) ($width * 15) 0 $green,
($width * 11) ($width * 15) 0 $green,
($width * 12) ($width * 15) 0 $green
}
.dug {
position: absolute;
top: 40%;
left: 45%;
width: $width;
height: $width;
@include dug;
}
.pooka {
position: absolute;
top: 40%;
left: 20%;
width: $width;
height: $width;
@include pooka;
}
.fygar {
position: absolute;
top: 40%;
left: 70%;
width: $width;
height: $width;
@include fygar;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment