code: cute stationery HTML

[10billionghosts]

thisismanx taught me the terrible secret of Cute Stationery and with her permission I have shared the code and my own tweaks here. Use it for all your owls, letters and invitations!

SALUTATION,

Body of Letter Goes Here. The items you want to change are BACKGROUND_URL and anything that mentions color you can replace with a hexcode. You'll want to keep all of those raw-code tags intact. If you delete them, it kinda messes up the border. Not sure why and too lazy to figure it out.

Closing,
Name

<raw-code><div style="max-width:600px; margin:auto;"><div style="padding:40px; border-radius:25px; background: url('BACKGROUND_URL')"><div style="background-color:BACKGROUND-COLOR; padding:4px; margin:auto; border-radius:25px;"> <div style="border-radius:25px; border: dotted 6px BORDER-COLOR-HEXCODE; padding:15px; text-align:left; font-family:Verdana; font-size:11px"> </raw-code>SALUTATION,<blockquote>Body of Letter</blockquote>Closing, Name<raw-code></div></div></div></div></raw-code>

A slight switch up:

SALUTATION,

By adding an "Opacity:XX" to the second div tag's style,
you can make the background a little more see-through. I have it set to 80% opacity for this particular background, but you could go as low as 50 - 75% for less contrasty color combos.

Closing,
Name

<raw-code><div style="max-width:600px; margin:auto;"><div style="padding:40px; border-radius:25px; background: url('BACKGROUND_URL')"><div style="background-color:BACKGROUND-COLOR; opacity:0.8; padding:4px; margin:auto; border-radius:25px;"> <div style="border-radius:25px; border: dotted 6px BORDER-COLOR-HEXCODE; padding:15px; text-align:left; font-family:Verdana; font-size:11px"> </raw-code>SALUTATION,<blockquote>Body of Letter</blockquote>Closing, Name<raw-code></div></div></div></div></raw-code>

Here's a more squared look with a different background, just to show off a few more things you can do with the base HTML.

SALUTATION,

By adding an "Opacity:XX" to the second div tag's style,
you can make the background a little more see-through. I have it set to 80% opacity for this particular background, but you could go as low as 50 - 75% for less contrasty color combos.

Closing,
Name

<raw-code><div style="max-width:600px; margin:auto;"><div style="padding:40px; background: url('https://78.media.tumblr.com/e1aad7d0ce867fac57671628361634d0/tumblr_ori9ybfAPH1sm3m9uo2_250.png')"><div style="background-color:white; padding:4px; margin:auto"> <div style="border: solid 3px #ff5500; padding:15px; text-align:left; font-family:Verdana; font-size:11px"> </raw-code>SALUTATION,<blockquote>By adding an "Opacity:XX" to the second div tag's style, you can make the background a little more see-through. I have it set to 80% opacity for this particular background, but you could go as low as 50 - 75% for less contrasty color combos.</blockquote>Closing, Name<raw-code></div></div></div></div></raw-code>

Comments

[thisismanx]

oh i forgot about these but we should def bring back cute stationary. (Letters from npcs, birthday cards, invitations, etc?? idk) you styled the third one really cute.