-
Notifications
You must be signed in to change notification settings - Fork 4
/
help.html
78 lines (77 loc) · 2.59 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Help - PIXAINT</title>
<style>
::selection {
background: #bdbdbd; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #bdbdbd; /* Gecko Browsers */
}
body{
background-color: #222;
font-family: Helvetica;
padding: 0;
margin: 0;
}
section{
width: 90%;
margin: auto;
margin-top: 3vh;
height: 90vh;
background-color: #eee;
padding: 2vh;
}
h1{
text-align: center;
padding-top: 20px;
}
a{
color: #000;
transition: all 0.2s;
}
a:hover{
color: #aaa;
}
</style>
</head>
<body>
<section>
<h1>Help</h1>
<h3>What is this?</h3>
<p>
Well, <i>this</i> is a paint for pixel art where you can convert you work into a css code you can later add in your website.
You just copy the code you downloaded anywhere in the code of you website and you will have what you painted. It has the great advantage
that, even if you zoom on it, your art will keep its quality.
</p>
<h3>What are those "X"?</h3>
<p>
Those squares show that there is just nothing there.
</p>
<h3>Color picker does not work?</h3>
<p>
You are probably in Internet Explorer (Edge) right now or in any other browser that does not support the HTML5 color picker.
So yeah, the only solution to this problem is to update you browser. I recommend Chrome, but Firefox and Opera work perfectly too.
</p>
<h3>How does the code work</h3>
<p>
Here is a <a href="https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4" target="_blank">tutorial</a> that explains how the box-shadow pixel art works (the one I use)
</p>
<h3>Can I change the size of my art?</h3>
<p>
Yes you can. So the code will be wrapped in a... well a wrapper :) and using the ascale option of the new <a href="http://www.w3schools.com/cssref/css3_pr_transform.asp" target="_blank">css3 transform</a> you can change
the size of what you have painted.Later on I might add something to change the size of the square, but right now you have to use the scale option.
</p>
<h3>More</h3>
<p>
For more information I recommend reading the README of <a href="https://github.com/manoletre99/Pixaint">the project</a>.
</p>
<br>
<hr>
<br>
<a href="index.html">Go back to PIXAINT</a>
</section>
</body>
</html>