entanglingrobobiology

@entanglingrobobiology

  • she/they

:eggbug-classic: :eggbug-classic: :eggbug-classic:

Thoughts on the Cohost shutdown (mine and others') can be found under #Shutdown Thoughts

log inask
entanglingrobobiology
@entanglingrobobiology
puppybytes
@puppybytes
exerian
@exerian

Stolen CSS CRIMES

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>

stolen from

 

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>

stolen from

 

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>

stolen from (also more info)

 

inline animation

eggbug
: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>

stolen from

 

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

@artemis
how to table

@oatmealine
how to tweak the built in animations
markdown plus generator (external site)

You must log in to comment.

in reply to @exerian's post:

exerian
@exerian

i am still working on my <summary> and <details> crime. i won't post it until i can figure out how to get it to let you cycle through both directions. i kind of gave up on it because it's so unreadable. with the idea of providing a simple generator function that can be pasted into the dev con in your browser to create a post, tho. that basically resurrects my idea. i can finally finish it now. i'll try to have it done this week sometime. i think you will like the result.

login to reply
exerian
@exerian

that's what we're here for.

i have updates i want to make.

can't decide if i should just make a new chost and add links between the chosts or add a "last updated" bit up top and then rechost every time i update it. it is pretty long already. i should probably break it up and chain them together with a TOC.

login to reply
Pinned Tags