Mockup: Store Receipt

[tesscodes]

GROCERY STORE Item $0.00 Item $0.00 Item $0.00 Item $0.00 Item $0.00 SUBTOTAL $0.00 TAX $0.00 TOTAL $0.00 # Items Sold 5 ║▌║█║▌│║▌║▌█▌│║█ 04/12/2022 21:22:07

Information

Hey guys! I've got a receipt mock-up for you guys today, at the request of a user. It was just too good of an idea to pass up!! You can edit the store logo without needing to grayscale it or worry about keeping the printer lines intact—as long as the image is transparent, you're all set. Enjoy! 💖

The Coding

<lj-raw><div style="margin:3px auto;width:275px;background:#fff;padding:40px 20px;box-sizing:border-box;box-shadow:inset 0 20px 15px 0 rgba(0,0,0,0.04),inset 0 -30px 15px 0 rgba(0,0,0,0.04),inset 0 0 15px 0 rgba(0,0,0,0.05),0 0 0 0 rgba(0,0,0,0.05),-1px -1px 2px 0 rgba(0,0,0,0.07),3px 3px 5px 0 rgba(0,0,0,0.05);display:flex;justify-content:space-between;flex-wrap:wrap;font-family:monospace;text-transform:uppercase;font-size:13px;line-height:1.2;color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to bottom,#000 0,#888 1px,#888 2px,#000 3px,#888 5px,#000 5px,#000 8px);background-size:auto 8px;transform:rotate(-0.5deg);backface-visibility:hidden;"> <!--STORE LOGO--> <div style="width:100%;height:70px;-webkit-mask:url(https://i.imgur.com/iXp5etU.png)center no-repeat;mask:url(https://i.imgur.com/iXp5etU.png)center no-repeat;-webkit-mask-size:auto 70px;mask-size:auto 70px;"> <div style="height:100%;background:linear-gradient(to bottom,#000 0,#888 1px,#888 1px,#000 3px,#888 4px,#000 4px,#000 7px)repeat;background-size:100% 7px;"></div> </div> <!--STORE NAME--> <center style="width:100%;margin:0 0 20px 0;font-size:16px;line-height:2;"> <b>STORE_NAME</b> </center> <!--ITEM--> <b style="width:50%;">Item</b> <span style="width:50%;text-align:right;">$0.00</span> <!--ITEM--> <b style="width:50%;">Item</b> <span style="width:50%;text-align:right;">$0.00</span> <!--ITEM--> <b style="width:50%;">Item</b> <span style="width:50%;text-align:right;">$0.00</span> <!--SUBTOTAL--> <b style="margin:15px 0 0 0;width:50%;text-align:right;">SUBTOTAL</b> <span style="margin:15px 0 0 0;width:50%;text-align:right;">$0.00</span> <!--TAX--> <b style="width:50%;text-align:right;">TAX</b> <span style="width:50%;text-align:right;">$0.00</span> <!--TOTAL--> <b style="width:50%;text-align:right;">TOTAL</b> <span style="width:50%;text-align:right;">$0.00</span> <!--FOOTER--> <center style="width:100%;margin:20px 0 0 0;font-size:16px;line-height:2;"> <b># Items Sold 1</b> ║▌║█║▌│║▌║▌█▌│║█ </center> <!--DATE--> <center style="width:100%;"> <b style="margin:0 20px 0 0;">00/00/2022</b> <b>00:00:00</b> </center> </div></lj-raw>

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

monospace - Body text

IMAGES

https://i.imgur.com/iXp5etU.png - Store Logo

TEXT CLIPPING

To remove printer lines replace the following with a HEX color: color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to bottom,#000 0,#888 1px,#888 2px,#000 3px,#888 5px,#000 5px,#000 8px);background-size:auto 8px;

LOGO CLIPPING

To use a color logo (with no printer lines) delete: -webkit-mask:url(https://i.imgur.com/iXp5etU.png)center no-repeat;mask:url(https://i.imgur.com/iXp5etU.png)center no-repeat;-webkit-mask-size:auto 70px;mask-size:auto 70px;

Then replace: <div style="height:100%;background:linear-gradient(to bottom,#000 0,#888 1px,#888 1px,#000 3px,#888 4px,#000 4px,#000 7px)repeat;background-size:100% 7px;"></div>

With: <img src="URL" style="height:100%;">

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!