app icon generator

by tcghyit

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<div id='appGrid'></div>

CSS

.app {
    float: left;
    height: 180px;
    width: 180px;
    margin: 15px;
    border-radius: 20px 15px 15px 20px;
    position: relative;
    -moz-box-shadow: 5px 4px 5px rgba(0, 0, 0, .3);
    box-shadow: 0px 4px 15px -1px rgba(0, 0, 0, .5);
}
.app .appRibbon {
    content:"";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 44px;
    border-radius: 15px 0px 0px 15px;
    -webkit-box-shadow: inset 0 8px 6px -6px black;
    -moz-box-shadow: inset 0 8px 6px -6px black;
    box-shadow: inset -5px 0px 4px -5px black;
}
.app .appIcon {
    position: absolute;
    margin: 7px 5px;
    width:32px;
    height:32px;
}
.app .appTitle {
    font-size:26px;
    position: absolute;
    bottom: 46px;
    right: 6px;
    width: 70%;
    text-align: right;
    color: #57CBF0;
    font-family: Helvetica;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
}
.appGlimmerDiv {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    background-position: -100px -400px;
    background-repeat:no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(37%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0.7)), color-stop(50%, rgba(255, 255, 255, 0.0)));
    background-image: -moz-linear-gradient(0 0, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50%);
    -moz-background-size:250% 250%, 100% 100%;
    -o-background-size:250% 250%;
    background-size:250% 250%;
}
.appGlimmerDiv:hover {
    background-position: 25px 0px;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
}
body {
    background-color: grey;
}

JavaScript

function makeid() {
    var text = "<span>";
    var possible = "                 abcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < Math.floor(Math.random() * 10 + 15); i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text + '</span>';
}

var names = ['Audit', 'Admin ', 'Customer View ', 'Builds', 'Reports', 'Manage', 'Roles & Rights'];

var pics = ['http://static.squarespace.com/static/51dace95e4b07e302341f4e0/t/527abacae4b0982aa4abc03c/1383774922521/Flaticon_2772.png', 'http://www.stakstaustell.org.uk/wp-content/uploads/2013/11/Flaticon_14711.png', 'http://xmpolitical.com/wp-content/uploads/2014/02/Flaticon_3965.png', 'http://www.atscontainers.com/imgs/magnifier.png', 'http://www.wordpressfuel.com/assets/front/images/icons/lightbulb32.png', 'http://www.jquery-buttons.com/jhb-icons/arrowDown.png', 'https://cdn2.iconfinder.com/data/icons/flat-style-svg-icons-part-1/512/gear_settings_cog_preferences-32.png', 'build.png'];

for (var i = 0; i < 7; i++) {
    $('#appGrid').append('<div id="app-' + i + '" class="app"></div>');
    var name = names[i];
    var $app = $("#app-" + i);

    $app.html('<div class="appTitle">' + name + '</div><div class="appRibbon"></div><div class="appIcon"></div><div class="appGlimmerDiv"></div>');

    var hex = stringToColor(name);
    var cl = ColorLuminance;
    hex = cl(hex, '-.4');
    //hex = cl('2989d8','-.'+i);


    $app.css('background', '-webkit-linear-gradient(260deg, ' + cl(hex, 2.5) + ' 0%,' + cl(hex, .5) + ' 15%,' + cl(hex, .2) + ' 20%,' + cl(hex, 0) + ' 77%,' + cl(hex, -.4) + ' 98%)');

    $app.find('.appRibbon').css({
        'background': '-webkit-linear-gradient(-45deg, ' + cl(hex, 1) + ' 0%,' + cl(hex, .5) + ' 20%,' + cl(hex, .2) + ' 35%,' + cl(hex, 0) + ' 77%,' + cl(hex, -.3) + ' 100%)'
    });

    $app.find('.appIcon').css({
        '-webkit-mask-image': "url('" + pics[i] + "')",
            'background': '-webkit-linear-gradient(-45deg, rgba(0,0,0,.9)...