LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lab: Pixel Art Maker

Choose Grid Size

Design Canvas

CSS
body {
    text-align: center;
    background-color: hsla(205, 59%, 37%, 1);
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em 0.2em 1em;
}

.container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.inner-container {
    box-shadow: 15px 15px 1px #20577E;
    border-radius: 10px;
    padding: 1em 1em 3em;
    min-width: 600px;
    background-color: #fff;
}

h2 {
  font-size: 20px;
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}


table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
  height: 22px;
  /* To make the table cells square add height to to compensate for the 1px border */
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}


/* h2 text coloring */
h1 span {
  color: #c44032;
  text-shadow: #863027 -4px 4px 0;
}
h1 .char1, h1 .char3, h1 .char4, h1 .char7 {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}
h1 .char2, h1 .char4, h1 .char5, h1 .char8 {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
h1 .char7, h1 .char5, h1 .char6, h1 .char9 {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}
h1 .char8, h1 .char6, h1 .char7, h1 .char10 {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}
h1 .char10, h1 .char14, h1 .char12{
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
h1 .char12, h1 .char1, h1 .char17 {
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  transform: rotate(-7deg);
}
h1 .char1, h1 .char13 {
  top: -2px;
}
h1 .char2, h1 .char15 {
  color: #e36b23;
    text-shadow: #9b4d1f -4px 4px 0;
}
h1 .char3, h1 .char16 {
  top:-3px;
  color: #e6c92e;
    text-shadow: #9c8b26 -4px 4px 0;
}
/* hover animation */{}
h1 .char5, h1 .char12 {
  color: #5da028;
    text-shadow: #427021 -4px 4px 0;
}
h1 .char6, h1 .char14 {
  top: -1px;
  color: #4584be;
    text-shadow: #2f597f -4px 4px 0;
}
h1 .char7, h1 .char17 {
  color: #7073cf;
  text-shadow: #4a4d88 -4px 4px 0;
}
h1 .char8, h1 {
  top: -2px;
  color: #7073cf;
  text-shadow: #4a4d88 -4px 4px 0;
}
h1 .char10 {
  color: #5da028;
    text-shadow: #427021 -4px 4px 0;
}

/* h1 text positioning */
h1 span {
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
h1 span:hover {
  top: 3px;
  -webkit-transform: rotate(5deg) !important;
  -moz-transform: rotate(5deg) !important;
  -ms-transform: rotate(5deg) !important;
  -o-transform: rotate(5deg) !important;
  transform: rotate(5deg) !important;
}

/* Other animation */
@keyframes wave {
  0%
}
JS
/*global jQuery */
/*!
* Lettering.JS 0.7.0
*
* Copyright 2010, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
*
* Date: Mon Sep 20 17:14:00 2010 -0600
*/
(function($){
  function injector(t, splitter, klass, after) {
    var text = t.text()
    , a = text.split(splitter)
    , inject = '';
    if (a.length) {
      $(a).each(function(i, item) {
        inject += ''+after;
      });
      t.attr('aria-label',text)
      .empty()
      .append(inject)

    }
  }


  var methods = {
    init : function() {

      return this.each(function() {
        injector($(this), '', 'char', '');
      });

    },

    words : function() {

      return this.each(function() {
        injector($(this), ' ', 'word', ' ');
      });

    },

    lines : function() {

      return this.each(function() {
        var r = "eefec303079ad17405c889e092e105b0";
        // Because it's hard to split a 
tag consistently across browsers, // (*ahem* IE *ahem*), we replace all
instances with an md5 hash // (of the word "split"). If you're trying to use this plugin on that // md5 hash string, it will fail because you're being ridiculous. injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); }); } }; $.fn.lettering = function( method ) { // Method calling logic if ( method && methods[method] ) { return methods[ method ].apply( this, [].slice.call( arguments, 1 )); } else if ( method === 'letters' || ! method ) { return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array } $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); return this; }; })(jQuery); // Select color input const color = $("#colorPicker"); // Select size input const width = $("#input_width"); const height = $("#input_height"); const form = $("#sizePicker"); const gridTable = $("#pixel_canvas"); // When size is submitted by the user, call makeGrid() function makeGrid(arr) { let output; for(var i=0; i
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv