CSS To PNG-Help

I Had An Image I Drew But Lost And The Only Source I Have Is A CSS Code I Made From It By Accident, Is There A Way To Restore It Or Do I Have To See Each Possition And Put Manually?

If you have the html file and the css file, you could try opening the html file in your browser (Chrome, Firefox, Opera, Edge), then taking a screen shot.

Either paste or save & open the screen shot into Aseprite.

If you don’t have an html file for the css file, you can create one in a text editor. You could also create one in Aseprite, then edit it later. In the latter case, make sure that the alert for css files is turned on under Edit > Preferences > Alerts. It doesn’t matter if you make the html with a completely different image; all you want is the code.

For example, here is a css file generated by the sprite pictured below:

.pixel-art {
	position: relative;
	top: 0;
	left: 0;
	height: 1px;
	width: 1px;
	box-shadow:

1px 0px #262429,
2px 0px #39464F,
3px 0px #6B7F82,
4px 0px #ACB9B5,
5px 0px #EBEDE9,
0px 1px #172038,
1px 1px #293E60,
2px 1px #3C658B,
3px 1px #5890AE,
4px 1px #7FB6C4,
5px 1px #A4DDDB,
0px 2px #003D33,
1px 2px #1B6041,
2px 2px #3B8338,
3px 2px #6DA846,
4px 2px #9DC351,
5px 2px #D1DB91,
0px 3px #5A3439,
1px 3px #7C4F4B,
2px 3px #9C6D5D,
3px 3px #B68F76,
4px 3px #CFB193,
5px 3px #E7D5B3,
0px 4px #402029,
1px 4px #703132,
2px 4px #945139,
3px 4px #B27649,
4px 4px #CF9A5B,
5px 4px #E8C170,
0px 5px #3B0025,
1px 5px #5F0E34,
2px 5px #83233B,
3px 5px #A43B3E,
4px 5px #C45C3A,
5px 5px #DA863E,
0px 6px #2C1831,
1px 6px #4A284E,
2px 6px #6E3769,
3px 6px #9A4A84,
4px 6px #BF6594,
5px 6px #DF84A5;
}

Here is the html:

<html><head><link rel="stylesheet" media="all" href="path/to/test.css"></head><body><div class="pixel-art"></div></body></html>

The path/to/test.css part you would replace with the file path to your css file.

1 Like

Thank You Bro! It Works!

Just Not On Firefox It Works On Edge And Google Chrome

1 Like