Pixel art to CSS

Developer
Marius Balaj
Size
4,772 Kb
Views
60,720
  1. Pixel art to CSS Previews
  2. Pixel art to CSS HTML Codes
  3. Pixel art to CSS CSS Codes
  4. Pixel art to CSS JS Codes

How do I make an pixel art to css?

What is a pixel art to css? How do you make a pixel art to css? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Pixel art to CSS Previews
IQ Test

Pixel art to CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixel art to CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://balajmarius.github.io/pixel-art-to-css/css/colorpicker.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="lightbox"> <div class="code"> <div class="close"></div> <div class="append-code"> <span class="class">.canvas</span> <span class="white">{</span> </br> <div class="static-properties" style='display:none'> width <span class="white">:</span> <i class="line first-line"> <span class="pixel_size">10</span><span class="unity">px</span><span class="white">;</span></i> <br/>height <span class="white">:</span> <i class="line first-line"> <span class="pixel_size">10</span><span class="unity">px</span><span class="white">;</span></i> <br/> </div> <div class="properties"> </div> <div class="white">}</div> </div> </div> </div> <div class="container"> <div class="playground"> <h1>Draw pixel art and convert to CSS</h1> <div class="pixels"></div> <div class="draw"></div> </div> <div class="dashboard"> <h1>Color picker</h1> <div class="widget border_bottom min_padding"> <div id="colorSelector"> <div style="background-color: #000"></div> </div> </div> <h1>Size</h1> <div class="widget border_bottom min_padding"> <input id="size" type="range" min="10" max="30" value="10" step="1" /> </div> <div class="widget border_bottom min_padding eraser_mode"> <h1>Eraser mode</h1> <input type="checkbox" value="1" id="input_2" /> <label for='input_2'> <span class="check"></span> </label> </div> <div class="widget"> <button id="clear">Clear</button> <button id="generate">Generate</button> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://balajmarius.github.io/pixel-art-to-css/js/colorpicker.js'></script>
<script src='http://balajmarius.github.io/pixel-art-to-css/js/eye.js'></script>
<script src='http://balajmarius.github.io/pixel-art-to-css/js/utils.js'></script>
<script src='http://balajmarius.github.io/pixel-art-to-css/js/paint.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixel art to CSS - Script Codes CSS Codes

body { background: #d7d7d7; font-family: Open Sans;
}
.container { width: 835px; margin: 150px auto; position: relative;
}
.playground { background: #fff; width: 590px; overflow: hidden; float: left;
}
.playground h1 { font-size: 13px; text-transform: uppercase; font-weight: 300; color: #b7b7b7; border-bottom: 1px solid #e5e5e5; margin: 0; padding: 15px 25px;
}
.playground .pixels { width:10px; height:10px; position:relative; top: 35px; left: 25px;
}
.playground .draw { margin: 25px; height: 540px; background-image: -webkit-linear-gradient(#d8eaf3 1px, transparent 1px), -webkit-linear-gradient(0deg, #d8eaf3 1px, transparent 1px), -webkit-linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(255, 255, 255, .3) 1px, transparent 1px); background-image: linear-gradient(#d8eaf3 1px, transparent 1px), linear-gradient(90deg, #d8eaf3 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px); background-size:10px 10px, 10px 10px; background-position: -1px -1px, -1px -1px; -moz-box-sizing:border-box; box-sizing:border-box; border:1px solid #d8eaf3; overflow: hidden;
}
.dashboard { background: #333333; float: right; width: 220px; top: 0;
}
.dashboard h1 { color: #929292; font-size: 11px; text-transform: uppercase; font-weight: 300; padding: 15px 20px 0; margin: 0;
}
.dashboard .widget { padding: 15px 20px; width: 100%; -moz-box-sizing:border-box; box-sizing:border-box;
}
.dashboard .widget:last-child { overflow: hidden; padding-bottom:20px;
}
.dashboard .border_bottom { border-bottom: 1px solid #494949;
}
.dashboard .min_padding { padding: 10px 20px 15px;
}
.dashboard .eraser_mode { overflow: hidden; line-height: 30px; padding: 15px 20px;
}
.dashboard .eraser_mode h1 { float: left; padding:0; margin-right: 21px;
}
.dashboard button { width: 48%; border: 0; position: relative; padding: 12px 0; margin: 0; outline: 0; border-radius: 2px; font-weight: 300; color: #fff; text-transform: uppercase; font-size: 11px; text-shadow: none; float: left;
}
.dashboard button:active { top: 1px;
}
.dashboard #clear { background: #df4931; margin-right: 2%;
}
.dashboard #generate { background: #7dd42f; margin-left: 2%
}
#colorSelector > div { height: 50px; border-radius: 5px; border:5px solid #494949; cursor: help; background: url('images/select.png') no-repeat right bottom;
}
/* _____ _ _ | __ \ | | | | | |__) |__ _ __ | | | |_ __ | ___/ _ \| '_ \ | | | | '_ \ | | | (_) | |_) | | |__| | |_) | |_| \___/| .__/ \____/| .__/ | | | | |_| |_|
*/ .lightbox { position: absolute; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: none;
}
.lightbox .code { top:50%; margin-top:-140px; position: absolute; background: #272822; width: 500px; left:50%; margin-left: -250px; -moz-box-sizing:border-box; box-sizing:border-box; padding: 30px 35px 30px 40px; color: #66d9ef; font-family: monospace;
}
.lightbox .code .close { position: absolute; right: 20px; top: 12px; cursor: pointer;
}
.lightbox .code .close::before, .lightbox .code .close::after { content:""; display: block; width: 3px; height: 15px; position: absolute; top: 0; background: #3e3d32; -webkit-transform-origin:50%; -webkit-transform:rotate(45deg); -webkit-transition:.2s all; transition:.2s all;
}
.lightbox .code .close:hover::before, .lightbox .code .close:hover::after { background: #757361;
}
.lightbox .code .close::before { -webkit-transform:rotate(-45deg);
}
.lightbox .code .append-code { overflow-x: hidden; height: 220px; overflow-y: scroll;
}
.lightbox .code .class { color: #a6e22e;
}
.lightbox .code .white { color: #dfdfd7;
}
.lightbox .code .properties { padding-left: 30px; border-left: 1px dotted #464741; margin-top:5px;
}
.lightbox .code .value { color: #ae81ff;
}
.lightbox .code .line.first-line { padding-left: 0; display: inline-block;
}
.lightbox .code .line { display: block; padding-left: 103px;
}
.lightbox .code .unity { color: #f92672;
}
.lightbox .code .numbers { position: absolute; left: 20px; top: 4px; list-style-type: none; text-align: right; padding:0; margin: 0; color: #868686;
}
.lightbox .code .copy { background: #181818; width: 500px; display: block; position: absolute; left: 0; padding:18px 25px 21px; cursor: pointer; text-decoration: none; color: #fff; -moz-box-sizing:border-box; box-sizing:border-box; bottom: -60px; font-family: Open sans; font-size: 12px; text-align: center;
}
.lightbox .code .copy i { display: inline-block; width: 17px; height: 17px; background: url('images/icon.png') no-repeat top; position: relative; top: 4px; margin-right: 5px; -webkit-transition:.4s all; transition:.4s all;
}
.lightbox .code .copy.coppied i { background-position: bottom;
}
input[type="range"] { -webkit-appearance:none; width:180px; height:20px; background: -webkit-linear-gradient(left, #494949 0%, #494949 100%); background: linear-gradient(to right, #494949 0%, #494949 100%); background-size:180px 10px; background-position:center; background-repeat:no-repeat; overflow:hidden; outline: 0;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; background:#df4931; position:relative; z-index:3; cursor: -webkit-grabbing; border-radius: 2px;
}
label { float: left
}
input[type=checkbox] { display: none;
}
input[type=checkbox] + label .check { cursor: pointer; width: 82px; height: 30px; position: relative; display: inline-block; vertical-align: top;
}
input[type=checkbox] + label .check:before, input[type=checkbox] + label .check:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; content:""; display: block; height: 30px; position: absolute; left: 0;
}
input[type=checkbox] + label .check:before { top: 0; border-radius: 2px; background: #494949; width: 82px; transition: border-width 0.3s, border-color 0.1s ease 0.3s;
}
input[type=checkbox] + label .check:after { top: 0; background: #df4931; border-radius: 2px; height: 30px; width: 30px; left: 0; right: 52px; transition: right 0.2s ease-in, left 0.2s ease-out, background 0.2s ease-in-out;
}
input[type=checkbox]:checked + label .check:after { left: 52px; right: 1px; background: #7dd42f; transition: left 0.2s ease-in, right 0.2s ease-out, background 0.2s ease-in-out;
}

Pixel art to CSS - Script Codes JS Codes

 $(document).ready(function() { var paint = $(".draw").pixelpaint(10, 10); var size = 10; $("#size").change(function() { size = parseInt($(this).val()); var backgroundSize = '' + size + ' ' + size + ',' + size + ' ' + size + ''; $('.draw').css('background-size', backgroundSize); $('.pixels').css({	top: (25 + size) + 'px', width: size + 'px', height: size + 'px' }); $('.pixel_size').text(size); paint.resize(size); });	$("#input_2").change(function() { paint.eraser = $(this).is(':checked');	}); function generateDescription(shadows) { $(".numbers").empty(); for (var i = 1; i <= shadows.length + 5; i++) { $(".numbers").append("<li>" + i + "</li>"); } $(".properties").html($(".static-properties").html() + (shadows.length > 0 ? "box-shadow <span class='white'>: </span>" + $.map(shadows, function(el, idx) { return "<i class='line" + (idx == 0 ? ' first-line' : '') + "'>" + (el[0] * size) + "<span class='unity'>px</span> " + (el[1] * size) + "<span class='unity'>px</span> " + el[2] + "<span class='white'>" + (idx < shadows.length - 1 ? "," : ";") + "</span></i>"; }).join("") : "")); } paint.onUpdate(function(css, shadows) { generateDescription(shadows); $(".pixels").css("box-shadow", css); }); $('#colorSelector').ColorPicker({ color: '#000', onShow: function(colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function(colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function(hsb, hex, rgb) { $('#colorSelector div').css('backgroundColor', '#' + hex); paint.color = "#" + hex; } }); $('#generate').click(function() { $('.lightbox').fadeIn(400); }); $("#clear").click(function() { paint.reset(); }); $('.lightbox').click(function() { $(this).fadeOut(400); }); $('.code').click(function(e) { e.stopPropagation(); }); $('.close').click(function() { $('.lightbox').fadeOut(400); }); });
Pixel art to CSS - Script Codes
Pixel art to CSS - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4.5
Size 4,772 Kb
Views 60,720
Do you need developer help for Pixel art to CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marius Balaj (mariusbalaj) Script Codes
Name
Apple TV poster
JCalculator
Flat Turntable Icon and Animation in Pure CSS
Optical Illusion
Simple Parallax with jQuery
Follow Widget with Folding CSS3 Animation
Codepen CSS Illustration
Login with flip 3d animation
Angular Particles Explosion
Social buttons with hover
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!