Skip to content

Instantly share code, notes, and snippets.

@vsecoder-old-account

vsecoder-old-account/pixel_art.html

Created May 8, 2020 16:27
Show Gist options
  • Save vsecoder-old-account/e3b38e74dd1e5efcf8f5d545ebee2fd4 to your computer and use it in GitHub Desktop.
Save vsecoder-old-account/e3b38e74dd1e5efcf8f5d545ebee2fd4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pixel_art.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>ПиксельАрт</title>
<style>
* {
box-sizing: border-box;
}
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
body {
margin: 0;
background-color: #333a48;
}
.controls {
margin-bottom: 24px;
font-family: "Courier New", monospace;
font-size: 18px;
line-height: 22px;
color: #eff1f5;
border-bottom: 2px solid #20262d;
background-color: #485671;
}
.container {
width: 326px;
height: 66px;
margin: 0 auto;
padding: 12px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.chosen-color {
display: flex;
padding: 8px 36px 8px 12px;
font: inherit;
color: inherit;
border: 2px solid #20262d;
border-radius: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-position: right 8px top 50%;
background-size: 14px auto;
background-color: #485671;
background-image: url("https://htmlcssphpjs.github.io/img/down-arrow.ico");
}
.chosen-color::-ms-expand {
display: none;
}
.chosen-color:focus {
outline: 2px dashed #6e86b3;
outline-offset: 2px;
}
.chosen-color:hover {
background-color: #304153;
}
.eraser-label {
position: relative;
padding: 8px 0 8px 40px;
cursor: pointer;
}
.eraser-label::before {
position: absolute;
content: "";
left: 6px;
top: 6px;
width: 20px;
height: 20px;
border: 2px solid #20262d;
}
.eraser:checked + .eraser-label::before {
background-color: #20262d;
background-position: center;
background-repeat: no-repeat;
}
.eraser:focus + .eraser-label::before {
outline: 2px dashed #6e86b3;
outline-offset: 2px;
}
.eraser-label:hover::before {
background-color: #304153;
}
.eraser-label:active::before {
background-color: #20262d;
border-color: #485671;
}
.eraser-label::after {
position: absolute;
content: "";
left: 6px;
top: 6px;
width: 24px;
height: 24px;
background: url("https://htmlcssphpjs.github.io/img/icon.svg");
background-repeat: no-repeat;
}
.main {
position: relative;
height: 50%;
width: 652px;
margin: 0 auto;
}
.main::before {
position: absolute;
content: "";
bottom: 0;
left: -120px;
width: 100px;
height: 105px;
background-image: url("https://htmlcssphpjs.github.io/img/keks.png");
background-repeat: no-repeat;
}
.canvas {
display: flex;
flex-wrap: wrap;
border: 3px solid #20262d;
}
.pixel {
width: 40px;
height: 40px;
border: 1px solid #333a48;
background-color: #ffffff;
}
</style>
</head>
<body>
<h1 class="visually-hidden">Редактор пиксельной графики от Всеволода html</h1>
<div class="controls">
<div class="container">
<select class="chosen-color" name="chosen-color">
<option value="black">Чёрный</option>
<option value="white">Белый</option>
<option value="grey">Серый</option>
<option value="pink">Розовый</option>
<option value="red">Красный</option>
<option value="darkorange">Оранжевый</option>
<option value="saddlebrown">Коричневый</option>
<option value="yellow">Золотой</option>
<option value="greenyellow">Салатовый</option>
<option value="forestgreen">Зелёный</option>
<option value="aquamarine">Аквамарин</option>
<option value="lightskyblue">Голубой</option>
<option value="lightsteelblue">Серо-голубой</option>
<option value="darkblue">Тёмно-синий</option>
<option value="indigo">Индиго</option>
<option value="mediumpurple">Фиолетовый</option>
<option value="purple">Пурпурный</option>
</select>
<input class="eraser visually-hidden" id="eraser-mode" type="checkbox" name="eraser">
<label class="eraser-label" for="eraser-mode">Ластик</label>
</div>
</div>
<div class="main">
<div class="canvas">
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
</div>
</div>
<script>
let pixel = document.querySelectorAll('.pixel');
let eraser = document.querySelector('.eraser');
let chosencolor = document.querySelector('.chosen-color');
for(let p of pixel) {
p.onclick = function() {
if(eraser.checked) {
p.style.backgroundColor='white';
}
else {
p.style.backgroundColor=chosencolor.value;
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment