[09] - misc; speech bubbles

[loupnoir]

What is this strange feeling I keep having? This cold... even now?

I AM LA REVACHOLIÈRE. I AM THE CITY.

What do you mean, you are the city?

I AM A FRAGMENT OF THE WORLD SPIRIT, THE GENIUS LOCI OF REVACHOL. MY HEART IS THE WIND CORRIDOR. THE BOTTOM OF MY AIR IS RED. I HAVE A HUNDRED THOUSAND LUMINOUS ARMS. COME MORNING, I CARRY INDUSTRIAL DUST AND LET IT SETTLE ON TREE LEAVES. I SHAKE THE DUST FROM THOSE LEAVES AND ONTO YOUR COAT. I'VE SEEN YOU, I'VE SEEN YOU! I'VE SEEN YOU WITH HER — AND I'VE SEEN YOU WITHOUT HER. I'VE SEEN YOU ON THE CRESCENT OF THE HILL.

She's speaking fast because she is afraid.

< isopods >
SPEECH BUBBLES

Simple speech bubbles for NPC dialogue, instant messaging, etc. This is kind of an old template that uses tables, so it might be a little janky in places. Feel free to modify and make it better (or worse?)

INSTRUCTIONS:

→ The image is meant to be 100 x 100, the same size as a Dreamwidth icon, but you can play around with this if you'd like.

→ The speech bubble resizes based on how much or how little you type!

→ Mobile-friendly! Kind of.

→ Need help or have any other questions? Let me know in the comments below!

COLOR PRESETS:

→ Default Color: #cccccc

LEFT ICON SPEECH BUBBLE:
<raw-code> <center> <!-- START OF LEFT ICON SPEECH BUBBLE --> <table style="border: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px;"> <tbody> <!-- BEGIN QUOTE BLOCK --> <tr style="margin-top: 10px; margin-bottom: 10px;"> <td style="vertical-align: top; width: 110px;"> <!--ICON HERE--> <img src="ICON URL HERE" style="float: left; border-radius: 20px; width: 100px;"> <!--ICON END--> </td> <td style="vertical-align: top;"> <div style="margin-left: -10px; margin-top: 25px; width: 0px; height: 0px; float: left; border-top: 10px solid transparent; border-right: 20px solid #cccccc; border-bottom: 10px solid transparent; position: relative; z-index: 25;"></div> <div style="margin-left: 9px; margin-top: -45px; padding: 20px; width: 100%; height: auto; float: left; background-color: #cccccc; color: #000; position: relative; border-radius: 20px; font-family: Georgia; font-size: 1.1em;"> <em> PUT SOME TEXT HERE </em> </div> </td> </tr> <!-- END QUOTE BLOCK --> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS UNDER HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS ABOVE HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> </tbody> </table> <!-- END OF LEFT ICON SPEECH BUBBLE --> <!---CREDIT, DO NOT DELETE--> <span style="padding: 5px; margin-right: 10px; color: white; font-size: 10px;"><a style="text-decoration: none;" href="https://isopods.dreamwidth.org/8408.html">< isopods ></a></span> </center> </raw-code>

RIGHT ICON SPEECH BUBBLE:
<raw-code> <center> <!-- START OF RIGHT ICON SPEECH BUBBLE --> <table style="border: 0px; width: 100%; margin-top: 10px; margin-bottom: 10px;"> <tbody> <!-- BEGIN QUOTE BLOCK --> <tr style="margin-top: 10px; margin-bottom: 10px;"> <td style="vertical-align: top;"> <div style="margin-right: -10px; margin-top: 25px; width: 0px; height: 0px; float: right; border-top: 10px solid transparent; border-left: 20px solid #cccccc; border-bottom: 10px solid transparent; position: relative; z-index: 25;"></div> <div style="margin-right: 9px; margin-top: -45px; padding: 20px; width: 100%; height: auto; float: right; background-color: #cccccc; color: #000; position: relative; border-radius: 20px; font-family: Georgia; font-size: 1.1em;"> <em> PUT SOME TEXT HERE </em> </div> </td> <td style="vertical-align: top; width: 110px;"> <!--ICON HERE--> <img src="ICON URL" style="float: right; border-radius: 20px; width: 100px;"> <!--ICON END--> </td> </tr> <!-- END QUOTE BLOCK --> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS UNDER HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> <!-- FEEL FREE TO PASTE MORE QUOTE BLOCKS ABOVE HERE, AS LONG AS THEY'RE FACING THE SAME DIRECTION--> </tbody> </table> <!-- END OF RIGHT ICON SPEECH BUBBLE --> <!---CREDIT, DO NOT DELETE--> <span style="padding: 5px; margin-right: 10px; color: white; font-size: 10px;"><a style="text-decoration: none;" href="https://isopods.dreamwidth.org/8408.html">< isopods ></a></span> </center> </raw-code>