Tessisamess

Information

Hey guys! This month was mostly going to be tutorials, but then I got sick and I'm slowly rebounding, so I've ditched even having a theme for the month and we're rolling with it haha. I'm super hype about these little definition cards! Super cute for an OOC contact entry. Enjoy! ♥

Coding: Inset

<lj-raw><div style="margin:0 auto;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);font-family:palatino linotype,georgia,sans-serif;font-size:17px;line-height:1.4;color:#111;text-transform:lowercase;overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/nYQit9a.png);mask:url(https://i.imgur.com/nYQit9a.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;margin:20px 0 0 0;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 10px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> <a href="http://tessisamess.insanejournal.com/" style="float:right;margin:0 -4px -4px 0;font-size:14px;text-decoration:none;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.2);border-radius:100%;color:#bbb;font-weight:bold;line-height:0;text-transform:uppercase;">C</a> </div></lj-raw>

Coding: Inset (Multiples)

<lj-raw><div style="display:flex;justify-content:center;flex-wrap:wrap;font-family:palatino linotype,georgia,sans-serif;font-size:17px;line-height:1.4;color:#111;text-transform:lowercase;"> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/nYQit9a.png);mask:url(https://i.imgur.com/nYQit9a.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;margin:20px 0 0 0;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/nYQit9a.png);mask:url(https://i.imgur.com/nYQit9a.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;margin:20px 0 0 0;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/nYQit9a.png);mask:url(https://i.imgur.com/nYQit9a.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;margin:20px 0 0 0;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> </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>

Coding: Flush

<lj-raw><div style="margin:0 auto;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);font-family:palatino linotype,georgia,sans-serif;font-size:17px;line-height:1.4;color:#111;text-transform:lowercase;overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/vvSV8Wy.png);mask:url(https://i.imgur.com/vvSV8Wy.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 10px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> <a href="http://tessisamess.insanejournal.com/" style="float:right;margin:0 -4px -4px 0;font-size:14px;text-decoration:none;width:25px;height:25px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.2);border-radius:100%;color:#bbb;font-weight:bold;line-height:0;text-transform:uppercase;">C</a> </div></lj-raw>

Coding: Flush (Multiples)

<lj-raw><div style="display:flex;justify-content:center;flex-wrap:wrap;font-family:palatino linotype,georgia,sans-serif;font-size:17px;line-height:1.4;color:#111;text-transform:lowercase;"> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/vvSV8Wy.png);mask:url(https://i.imgur.com/vvSV8Wy.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/vvSV8Wy.png);mask:url(https://i.imgur.com/vvSV8Wy.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> <!--CARD--> <div style="margin:10px;width:450px;background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);overflow:hidden;"> <div style="-webkit-mask:url(https://i.imgur.com/vvSV8Wy.png);mask:url(https://i.imgur.com/vvSV8Wy.png);-webkit-mask-size:auto 150px;mask-size:auto 150px;"> <div style="height:150px;background:#ddd url(YOUR_GIF);background-size:cover;"> </div> </div> <div style="padding:0 30px 30px 30px;"> <i style="display:block;font-weight:bold;font-size:24px;margin:0 0 10px 0;"> WORD </i> (n.) DEFINITION </div> </div> </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!

YOUR_GIF - Background image
WORD - Title
DEFINITION - Blurb text

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,georgia,sans-serif - Overall font

IMAGES

https://i.imgur.com/nYQit9a.png - Inset paper tear image
https://i.imgur.com/vvSV8Wy.png - Flush paper tear image

COLORS

#fff

Content background

#111

Text

rgba(0,0,0,0.1)

Container border and box shadow

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!