you are in the earth of me ๐ฑ
- she/her
30 - dnd-player, future cat mom (aspirational), educator, arts and crafts appreciator
You must log in to comment.
in reply to @Kamu's post:
Yep! :) There are limitations on the CSS you can use but people have been coming up with some very ingenious CSS hacks!
if you're curious, here are a few hacks we can use:
- cohost allows the
style=attribute, so you can use CSS properties, but not selectors- there are a few tools to compile CSS with selectors to inline style by checking everything that applies to the elements and setting it in the
styleattribute of each explicitly, and you can post that to cohost
- there are a few tools to compile CSS with selectors to inline style by checking everything that applies to the elements and setting it in the
- you can freely use
transition, butanimationis hard because @-rules are not allowed either- there are a few animations that cohost uses internally that we can use too though, for example
spinandbouncewhich are used in the yeen post
- there are a few animations that cohost uses internally that we can use too though, for example
- if that isn't enough, you can embed an SVG with an tag and use full CSS there, but due to the sandboxing, you cannot make any requests, so you have to encode every external URL as a
data:[minetype],URL - and if you want to go even further, by abusing the link preview feature you can get an <iframe> element, and embed any HTML content that way
most of us only use inline styles and not SVG/iframe because a) they're a bit clunky and b) inline is more fun because it's a pretty good challenge :)
is there any way to like see a post without css I wanna look at what's going on behind the scenes
I write ugly spaghetti code and have no idea what I'm doing so you may regret inspecting element, but the code uses a <summary> tag CSS hack you can read about here [ https://cohost.org/blackle/post/31694-tutorial-how-to-mak ].
I moved the summary box across the screen using Cohost's deceptively powerful animation: spin that has the secondary ability to animate any CSS transform within the same element - in this case transform:translatex().
The jittery text in the laughter uses animation steps()
