%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.
*/
This Pen doesn't use any external CSS resources.