Skip to content

Instantly share code, notes, and snippets.

@deeGraYve

deeGraYve/Pixel-art-out-of-box-shadow-magicerizer.markdown

Forked from anonymous/Pixel-art-out-of-box-shadow-magicerizer.markdown
Created June 11, 2014 23:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save deeGraYve/59824ce8bc22d2be3128 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save deeGraYve/59824ce8bc22d2be3128 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 11, 2014.
    7 changes: 7 additions & 0 deletions Pixel-art-out-of-box-shadow-magicerizer.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Pixel art out of box shadow magicerizer
    ---------------------------------------
    SASS mixin that hands a maxtrix of lists to a function, to create a bit of pixel art out of box shadows. Co-made with @shadowmint. TODO - multiple colours!

    A [Pen](http://codepen.io/jackarmley/pen/LohqG) by [Jack Armley](http://codepen.io/jackarmley) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jackarmley/pen/LohqG/license).
    8 changes: 8 additions & 0 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    header.demo-header
    h1 Cross-stich
    p
    | Little bits of 8-bit goodness generated
    | from a clutch of sass lists.
    ul.icons
    each icon in ['hamburger','close','diamond','cross','heart','doublearr']
    li(class='icons--#{icon}')
    138 changes: 138 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,138 @@

    @function icon($matrix,$size,$color){
    $l: length($matrix);
    $sh: '';
    $i: $l;
    @for $i from 1 through $l{
    $row: nth($matrix,$i);
    @for $j from 1 through length($row){
    $item: nth($row,$j);
    @if $item == x{
    $sh: $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + $color;
    }@else{
    $sh: $sh + ($j*$size) + ' ' + ($i*$size) + ' ' + transparent;
    }
    @if not ($j == length($row) and $i == $l) {
    $sh: $sh + ',';
    }
    }
    }
    @return unquote($sh);
    }

    @mixin icon($matrix,$size,$color,$radius:0){
    position:relative;
    width:($size * length(nth($matrix,1)));
    height:($size * length($matrix));
    &:after{
    content:' ';
    position:absolute;
    top:(-$size);
    left:(-$size);
    width:$size;
    height:$size;
    border-radius:$radius;
    box-shadow:
    icon($matrix,$size,$color);
    }
    }

    $bodybg: #DFFF26;
    $iconcolor: #727F20;
    $textcolor: $iconcolor;
    $iconsize: 8px;
    $icons:(
    hamburger:(
    (x x x x x)
    (o o o o o)
    (x x x x x)
    (o o o o o)
    (x x x x x)
    ),
    close:(
    (x o o o x)
    (o x o x o)
    (o o x o o)
    (o x o x o)
    (x o o o x)
    ),
    diamond:(
    (o o x o o)
    (o x o x o)
    (x o o o x)
    (o x o x o)
    (o o x o o)
    ),
    cross:(
    (o o x o o)
    (o o x o o)
    (x x x x x)
    (o o x o o)
    (o o x o o)
    ),
    heart:(
    (o x o x o)
    (x x x x x)
    (x x x x x)
    (o x x x o)
    (o o x o o)
    ),
    doublearr:(
    (o o x o o)
    (o x o x o)
    (x o x o x)
    (o x o x o)
    (x o o o x)
    )
    );
    $headerfont:'Oswald';
    $bodyfont:'PT Sans';

    @import url(http://fonts.googleapis.com/css?family=Oswald:300,700|PT+Sans);html,
    body{
    height:100%;
    }
    html{
    background:$bodybg;
    }
    body{
    box-sizing:border-box;
    width:100%;
    max-width:600px;
    margin:auto;
    padding:60px;
    color:$textcolor;
    font:normal normal 120%/1.5em $bodyfont, sans-serif;
    }
    .demo-header{
    margin-bottom:2em;
    text-align:center;
    h1{
    margin:0;
    color:#fff;
    font:700 3em/1.5em $headerfont;
    text-shadow:3px 3px 0 $iconcolor;
    }
    }
    .icons{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    @at-root{
    [class^="icons--"]{
    display:inline-block;
    margin:20px;
    border:25px solid transparent;
    }
    }
    @each $key,$value in $icons{
    &--#{$key}{
    @include icon(
    $value,
    $iconsize,
    $iconcolor
    );
    }
    }
    }