%h1 Single Element Pixel Art Mixin
.art
View Compiled
@import "compass/css3";

//set pixel size
$pixel-size: 10px;

//pallet
$p0: transparent;
$p1: white;
$p2: red;
$p3: #0000D1;

// Define pixel art by line
// Just list the colors in order
// and seperate lines with a ","
$ship: $p0 $p0 $p0 $p0 $p0 $p0 $p0 $p1,
       $p0 $p0 $p0 $p0 $p0 $p0 $p0 $p1,
       $p0 $p0 $p0 $p0 $p0 $p0 $p0 $p1,
       $p0 $p0 $p0 $p0 $p0 $p0 $p1 $p1 $p1,
       $p0 $p0 $p0 $p0 $p0 $p0 $p1 $p1 $p1,
       $p0 $p0 $p0 $p0 $p0 $p0 $p1 $p1 $p1,
       $p0 $p0 $p0 $p2 $p0 $p0 $p1 $p1 $p1 $p0 $p0 $p2,
       $p0 $p0 $p0 $p2 $p0 $p1 $p1 $p1 $p1 $p1 $p0 $p2,
       $p2 $p0 $p0 $p1 $p3 $p1 $p1 $p2 $p1 $p1 $p3 $p1 $p0 $p0 $p2,
       $p2 $p0 $p0 $p3 $p1 $p1 $p2 $p2 $p2 $p1 $p1 $p3 $p0 $p0 $p2,
       $p1 $p0 $p0 $p1 $p1 $p1 $p2 $p1 $p2 $p1 $p1 $p1 $p0 $p0 $p1,
       $p1 $p0 $p1 $p1 $p1 $p1 $p1 $p1 $p1 $p1 $p1 $p1 $p1 $p0 $p1,
       $p1 $p1 $p1 $p1 $p1 $p2 $p1 $p1 $p1 $p2 $p1 $p1 $p1 $p1 $p1,
       $p1 $p1 $p1 $p0 $p2 $p2 $p1 $p1 $p1 $p2 $p2 $p0 $p1 $p1 $p1,
       $p1 $p1 $p0 $p0 $p2 $p2 $p0 $p1 $p0 $p2 $p2 $p0 $p0 $p1 $p1,
       $p1 $p0 $p0 $p0 $p0 $p0 $p0 $p1 $p0 $p0 $p0 $p0 $p0 $p0 $p1;



// The mighty pixelmatic
@mixin pixelmatic($art, $size: 10px){
  display: block;
  height: $size;
  width: $size;
  $shadow: 0 0 transparent;
  @for $y from 1 through length($art){
    @for $x from 1 through length(nth($art, $y)){
      $shadow: $shadow
      + ", " + 
      ($x * $size)
      + " " + 
      ($y * $size) 
      + " " + 
      nth(nth($art, $y), $x) ;
    }
  }
  box-shadow: unquote($shadow);
}

.art{
  
  //BAM!
  @include pixelmatic($ship, $pixel-size);
  
  // (just moving it around)
  position:absolute;
  left:50%;
  top: 60%;
  margin-left:(( length($ship) * $pixel-size * -0.5 ) - $pixel-size );
  margin-top:(( length($ship) * $pixel-size * -0.5 ) - $pixel-size);
  animation: slide 3s ease-in-out infinite alternate;
  
}

html,body{
  height: 100%;
  background:  linear-gradient(180deg,#333, rgba(#222,0)), linear-gradient(90deg, black, #222, #222, black);
}

@import url(https://fonts.googleapis.com/css?family=VT323);
h1{
  font-family: 'VT323', cursive;
  color: white;
  font-size: 40px;
  text-align: center;
  text-shadow: 0 2px 2px black;
}

@keyframes slide{
  0%{ transform: translateX(-50px);}
  100%{transform: translateX(50px);}
}
View Compiled
/* 
To use, copy the mixin into your SCSS.
Then define your pixel art by adding colors
to a variable.  

Seperate each pixel with a space, and each line with a comma.

--EXAMPLE--
$PIXEL-ART: #FFF #F0F #000, #000 #000 #0F0;

Then add
@include pixelmatic($PIXEL_ART, $PIXEL-SIZE);
in any element, and it will create the pixel art in the box-shadow of the element.

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js