Pixel art to CSS
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 - 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); }); });
Developer | Marius Balaj |
Username | mariusbalaj |
Uploaded | July 07, 2022 |
Rating | 4.5 |
Size | 4,772 Kb |
Views | 60,720 |
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!
Name | Size |
Metro UI animations | 3,146 Kb |
Imperial March | 3,190 Kb |
Flat Turntable Icon and Animation in Pure CSS | 2,945 Kb |
JCalculator | 4,368 Kb |
Symphony of Math.PI | 2,355 Kb |
Angular Particles Explosion | 2,798 Kb |
Optical Illusion | 2,784 Kb |
Social Buttons Slide | 3,249 Kb |
Apple TV poster | 2,957 Kb |
One element Vinyl | 2,296 Kb |
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!
Name | Username | Size |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Under construction | GhostRider | 1,642 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!