baiyu

Gender Chaotic

combo Epic Divorce Man + Visual Novel Developer


Noto Gin's Laughing Sprite

Oh my god I think I figured it out kinda??? The CSS isn't pretty but it works and I'm living the dream. Who wants to open RP.

<div>
    <img src="your_image.png" alt="alternate text" width="150" height=auto/>
</div>
<div class="px-3  relative overflow-hidden" data-post-body="true">
<div class="prose my-4 break-words">
<p style="font-family: Comic Sans, Comic Sans MS, Chalkboard SE, Comic Shanns, Comic Mono, Comic Neue, cursive; background: #D3D3D3; color: black; padding: 16px 16px 32px 150px; min-height: 110px; margin: -160px 20px 20px 2px;">
text goes here
</p>
</div>
</div>

EDIT:

Noto Gin's Laughing Sprite
wait hang on I made it better
just gotta have a minimum amount of text I think
depending on your image or message

<img src="your_image.png" alt="alternate text" style="width: 150px; height: auto; overflow-wrap: break-word;" align="left">
<div style="padding: 16px 16px 16px 16px; margin:10px 20px 20px 160px;background: #D3D3D3;border: thick solid #ddd8;border-radius: 20px;">
<span style="color: #000000dd;text-shadow: 1px 1px 2px white, 0 0 0.1em white, 0 0 0.2em white;opacity:0.95;">
text goes here
</span> 
</div>

FINAL EDIT?

Noto Gin's Laughing Sprite.
Noto Gin
Shout-out to @snippid for working with me to get this just right! Now we stylin'~
Cohost really out here being superb af

<div style="display: flex; gap: 1em; margin: 2em 0 3em 0;">
  <div style="flex-shrink: 0;">
    <img src="your_image.png" alt="alternate text" style="display: block; max-width: 150px; height: auto; margin: 0;">
  </div>
  <div style="position: relative; flex-shrink: 1; align-self: flex-end; width: calc(100% - 150px - 1em);">
    <div style="min-width: 150px; padding: 5px 2px 5px 20px; position: absolute; top: -1.7em; left: 2em; background: #ebebeb linear-gradient(90deg, #ebebeb, #c7c7c7); border-radius: 20px; text-align: left;">
      <span style="color: #304057;">Name</span> 
    </div>
    <div style="padding: 1.5em 2em; background: #334350; border-radius: 40px; color: #f3ebe8; text-shadow: 1px 1px 2px #454d62, 0 0 0.1em #454d62, 0 0 0.2em #454d62; word-wrap: break-word;">
      Text goes here
    </div>
  </div>
</div>

You must log in to comment.

in reply to @baiyu's post: