Tessisamess

Information

Hey guys, let's add some flippable postcards to our mockups! This comes with a general postcard that you can add whatever text you like to (or delete the text to display only an image front) and a customizable city postcard with a 3D font effect! For added fun, check out some of the other mockups from this month (such as the movie poster or the album cover) and import the fancy text headings in place of your title div to give these even more customization. Enjoy! ♥

CODE BY TESSISAMESS

Coding: General

<lj-raw><div style="margin:0 auto;width:800px;height:500px;background:#999 url(POSTCARD_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;overflow:hidden;"> <!---POSTCARD FRONT---> <a name="front" href="#back" style="width:100%;height:100%;padding:30px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:flex-end;text-decoration:none;"> <div style="font-family:palatino linotype;color:#fff;font-size:40px;line-height:1;text-transform:uppercase;"> FRONT_TITLE </div> </a> <!---POSTCARD BACK---> <a name="back" href="#front" style="width:100%;height:100%;padding:30px;box-sizing:border-box;background:#fff;display:flex;font-family:courier new;font-size:14px;color:#222;text-decoration:none;"> <!---WRITTEN CONTENT---> <div style="width:60%;padding:0 30px 0 0;margin:0 30px 0 0;border-right:1px solid #ccc;line-height:1.7;"> <div align="right">DATE</div> CONTENT<br><br> <div align="right">— NAME</div> </div> <!---ADDRESS & POSTAGE---> <div style="width:40%;display:flex;flex-direction:column;line-height:2;"> <div style="align-self:flex-end;height:90px;width:70px;background:#ddd url(STAMP_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;"></div> <div style="margin:100px 0 0 0;"> <div style="border-bottom:1px solid #ccc;">Name</div> <div style="border-bottom:1px solid #ccc;">Address</div> <div style="border-bottom:1px solid #ccc;">City, ST ZIP</div> </div> </div> </a> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

CODE BY TESSISAMESS

Coding: City

<lj-raw><div style="margin:0 auto;width:800px;height:500px;background:#999 url(POSTCARD_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;overflow:hidden;"> <!---POSTCARD FRONT---> <a name="front" href="#back" style="width:100%;height:100%;padding:30px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:.9;text-transform:uppercase;"><div> <b style="font-family:century gothic;color:#fff;font-size:25px;text-shadow:1px 1px 0 #306584;">Hello from...</b> <div style="font-family:arial black;font-size:80px;-webkit-background-clip:text;-webkit-text-fill-color:#60A1B5;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:2px;text-shadow:1px 1px 0 #306584, 2px 2px 0 #306584, 3px 3px 0 #306584, 4px 4px 0 #306584, 5px 5px 0 #306584, 6px 6px 0 #306584;"> CITY_NAME </div> </div></a> <!---POSTCARD BACK---> <a name="back" href="#front" style="width:100%;height:100%;padding:30px;box-sizing:border-box;background:#fff;display:flex;font-family:courier new;font-size:14px;color:#222;text-decoration:none;"> <!---WRITTEN CONTENT---> <div style="width:60%;padding:0 30px 0 0;margin:0 30px 0 0;border-right:1px solid #ccc;line-height:1.7;"> <div align="right">DATE</div> CONTENT<br><br> <div align="right">— NAME</div> </div> <!---ADDRESS & POSTAGE---> <div style="width:40%;display:flex;flex-direction:column;line-height:2;"> <div style="align-self:flex-end;height:90px;width:70px;background:#ddd url(STAMP_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;"></div> <div style="margin:100px 0 0 0;"> <div style="border-bottom:1px solid #ccc;">Name</div> <div style="border-bottom:1px solid #ccc;">Address</div> <div style="border-bottom:1px solid #ccc;">City, ST ZIP</div> </div> </div> </a> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

POSTCARD_IMG - Front background
DATE - Date of letter
CONTENT - Your written letter
STAMP_IMG - Postage stamp background
FRONT_TITLE - Title (General only)
CITY_NAME - Title (City only)

Editing Guide

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

FONTS

palatino linotype - Front text (General only)
century gothic - Front text (City only)
courier new - Back text

COLORS

#fff

Container background; title text; city name outline

#ccc

All borders

#60A1B5

City name fill

#306584

City name drop shadow

#222

Back text

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!