%20banner%20by%20IntroIntroduction.png "Pixel anthropomorphic raccoon head with a blue hat. Art by introdile"){kind=tracking}
![[text ID: I sell trash and trash accessories end ID] Text is next to an amazing anthropomorphic raccoon trash merchant. He wears a blue hat and a blue hoodie. Art by Tornatics on Twitter.](https://staging.cohostcdn.org/attachment/b5ff0a3e-4238-4bab-b637-22f1b67d111e/Remmy%20Trash%20Sticker%20Animated%20Tornatics.gif "[text ID: I sell trash and trash accessories end ID] Text is next to an amazing anthropomorphic raccoon trash merchant. He wears a blue hat and a blue hoodie. Art by Tornatics on Twitter.")
a collection of stolen chosting tricks.
drop cap
it was the egg of times, it was the bug of times, it was the age of chosting, it was the age of waiting for an invite, it was the epoch of hiding CSS in SVGs, it was the epoch of no video uploads, it was the season of website, it was the season of no app, it was the spring of no ads, it was the winter of optional paid subscription.
<div style="font-family: Cambria, Georgia, serif; color: rgb(54, 7, 26); line-height: 1.2rem; margin: 0px auto; max-width: 22rem; text-align: justify;">
<span style="font-size: 6.2rem; font-weight: 900; float: left; margin: -0.4rem 0.2rem 0rem 0px; line-height: 5.2rem;">
cap goes here. you may need to tweak font-size, line-height, and/or margin
</span>
your text goes here
</div>
blurry text
ahhh fuck where did i put my glasses
<p style="font-size: 20px; color: transparent; text-shadow: black 0px 0px 5px;">ahhh fuck where did i put my glasses</p>
dithering effect
css gradient as div bg
regular color image
text
it was the egg of times, it was the bug of times, it was the age of chosting, it was the age of waiting for an invite, it was the epoch of hiding CSS in SVGs, it was the epoch of no video uploads, it was the season of website, it was the season of no app, it was the spring of no ads, it was the winter of optional paid subscription.
<div style="position: relative; margin: auto; height: 100%; background-color: white; filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGZpbHRlciBpZD0idGhyZXNob2xkIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+CiAgICAgICAgICAgIDxmZUNvbXBvbmVudFRyYW5zZmVyPgogICAgICAgICAgICAgICAgPGZlRnVuY1IgdHlwZT0iZGlzY3JldGUiIHRhYmxlVmFsdWVzPSIgMCAxIi8+CiAgICAgICAgICAgICAgICA8ZmVGdW5jRyB0eXBlPSJkaXNjcmV0ZSIgdGFibGVWYWx1ZXM9IiAwIDEiLz4KICAgICAgICAgICAgICAgIDxmZUZ1bmNCIHR5cGU9ImRpc2NyZXRlIiB0YWJsZVZhbHVlcz0iIDAgMSIvPgogICAgICAgICAgICA8L2ZlQ29tcG9uZW50VHJhbnNmZXI+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+Cjwvc3ZnPg==#threshold');"><div style="position: absolute; top: 0px; left: 0px; z-index: 100; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: overlay; background: rgba(0, 0, 0, 0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAGElEQVR4AWNhaFjQwHKg4UADS0GDAYQFAE68CFHWssiIAAAAAElFTkSuQmCC') repeat scroll left top; pointer-events: none;"></div>
put anything you want dithered here
</div>
inline animation
eggbug
has an excite!
<div>
opening text
<div style="position:relative;top:3px;display:inline-block;animation:1s ease-in-out 0s infinite normal none running bounce;font-size: 24px;">
text to animate
</div>
closing text
</div>
bounce with semi-realistic shadow
🥰
<div style="text-align: center; position: relative;">
<div style="position: absolute;inset: 0;top: 0px;transform: scale(1, -1) rotate3d(1, 0, 0, 290deg);top: 43rem;">
<span style="color: transparent;font-size: 20rem; text-shadow: 5px 5px 50px #a2a2;animation: position:relative;margin-top:10rem;display:inline-block;animation:1s ease-in-out 0s infinite normal none running bounce;">
<div style="transform: scale(1, -1);">🥰</div></span>
</div>
<span style="font-size: 20rem; animation: position:relative;margin-top:10rem;display:inline-block;animation:1s ease-in-out 0s infinite normal none running bounce;position: relative;z-index:2;">🥰</span>
</div>
generator
copy/paste into dev console. most browsers open this with F12
genTextShadowBounce = (t, s, um) => console.log(`<div style="text-align: center; position: relative;">
<div style="position: absolute;inset: 0;top: 0px;transform: scale(1, -1) rotate3d(1, 0, 0, 290deg);top: ${s*2.15}${um};">
<span style="color: transparent;font-size: ${s}${um}; text-shadow: 5px 5px ${s/10}${um} #a2a2;animation: position:relative;margin-top:10rem;display:inline-block;animation:1s ease-in-out 0s infinite normal none running bounce;">
<div style="transform: scale(1, -1);">${t}</div></span>
</div>
<span style="font-size: ${s}${um}; animation: position:relative;margin-top:10rem;display:inline-block;animation:1s ease-in-out 0s infinite normal none running bounce;position: relative;z-index:2;">${t}</span>
</div>`)
genTextShadowBounce("🥰", 20, 'rem');
plaque with gradient background
it was the egg of times, it was the bug of times, it was the age of chosting, it was the age of waiting for an invite, it was the epoch of hiding CSS in SVGs, it was the epoch of no video uploads, it was the season of website, it was the season of no app, it was the spring of no ads, it was the winter of optional paid subscription.
<div style="text-align: justify;padding: 10%;margin:10%;background: #fff4 linear-gradient(45deg, #ebb8, #ecb8, #eeb8, #beb8, #bbe8, #cbe8, #ebe8);border: thick solid #ddd8;border-radius: 20px;box-shadow: 5px 5px 15px #0004;opacity:0.9;">
enter your text here
</div>
i stole this one from myself.
gradient text
it was the egg of times, it was the bug of times, it was the age of chosting, it was the age of waiting for an invite, it was the epoch of hiding CSS in SVGs, it was the epoch of no video uploads, it was the season of website, it was the season of no app, it was the spring of no ads, it was the winter of optional paid subscription.
<div style="font-family: Cambria, Georgia, serif; text-align: center;">
<div style="display: inline-block;font-weight: 799;color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;font-size: 36px;line-height: 48px;width: 80%;text-align: justify;">
<span style="color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;font-size: 12.2rem; font-weight: 900; float: left; margin: -1.4rem 0.4rem 0rem 0px; line-height: 10.2rem;">
e
</span>
nter your text here
</div></div>
i stole this one from myself.
gradient text with drop shadow
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
<div style="font-family: Cambria, Georgia, serif; text-align: justify;padding: 7% 10%;font-weight: 799;font-size: 26px;line-height: 36px;position: relative;">
<div style="color: transparent;">
<span style="font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
<div style="display: inline-block;color: #fff8;text-shadow: 2px 2px 10px #0004;position: absolute; inset: 10%">
<span style="font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
<div style="display: inline-block;color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;position: absolute;inset: 10%">
<span style="display: inline-block;color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
</div>
i stole this one from myself.
all together now
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
gradient text with a drop shadow is extra tricky. you need to enter it three times. the first time is transparent. it's just a rough sizing thing. the second time is for the drop shadow. the third time is the gradient.
<div style="font-family: Cambria, Georgia, serif;text-align: justify;font-weight: 799;font-size: 26px;line-height: 36px;position: relative;padding: 7% 10%;margin:5%;background: #fff4 linear-gradient(45deg, #ebb8, #ecb8, #eeb8, #beb8, #bbe8, #cbe8, #ebe8);border: thick solid #ddd8;border-radius: 20px;box-shadow: 5px 5px 15px #0004;opacity:0.9;">
<div style="color: transparent;">
<span style="font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
<div style="display: inline-block;color: #fff8;text-shadow: 2px 2px 10px #0004;position: absolute; inset: 10%">
<span style="font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
<div style="display: inline-block;color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;position: absolute;inset: 10%">
<span style="display: inline-block;color: transparent;background: #000c linear-gradient(-45deg, #f44, #f64, #bb4, #4b4, #44f, #b8f, #b4f);-webkit-background-clip: text;background-clip: text;font-size: 14.2rem; font-weight: 900; float: left; margin: -5.4rem 0.4rem 0rem 0px; line-height: 16.5rem;">
y
</span>
our text here
</div>
</div>
i stole this one from myself.
copy editing marks
Velit minus vero fugiat asperiores distinctio natus vel. Praesentium adipisci saepe accusantium impedit est temporibus voluptatem. Delectus autem praesentium amet nemo quia eos deleniti repellendus. Unde cum Vreplace remove quaerat ex voluptatem aut. Autem quaerat perspiciatis soluta dolores ullam minima. Vitae cumque quo neque eum beatae aut ut dolore.
<span style="position:relative;top:-0.35rem;left:0.25rem;color:darkred;"><sub style="transform:rotate(-10deg);display:inline-block;">V</sub><span style="position:absolute;top:-0.75rem;left:-1.5rem;">
replace
</span></span> <span style="text-decoration-color:darkred; text-decoration-line:line-through;">
remove
</span>
i stole this one from myself.
items i'm not going to rework...
additional reading
@oatmealine
how to tweak the built in animations
markdown plus generator (external site)
