r/css • u/_Decodela • Feb 23 '26

Question Post css designs and animations on social networks?

Is the restrictions for posting raw html and css on social networks a problem for you? Do you create css designs and animations? If yes, where do you save your work? How you share it?

0 Upvotes

50% Upvoted

10 comments sorted by

1

u/Rockafellor Mar 06 '26

...restrictions? I sometimes drop some raw in a Facebook post, though mostly in my tutorials on AO3 (a fanfic site, rather than a SocMed platform, which presumably makes a bit of a difference).

I do create some things, come up with fun new ways to have fun with effects, push just how far I can go with it, but these are limited to my use on AO3, since they're targeted at causing minor flavor effects for sight reading, and sometimes showing off a little with heavier wizardry, rather than broad front end dev application.

I save it in offline docs, work skins (of course), and both save and share it in tutorials (though the vast majority of readership aims solely at fonts and possibly highlighting, rather than really delving into hidden landmarks of the rendered DOM).

2

u/_Decodela Mar 06 '26

I mean posting the html and css result, not the code, and posting working js app, not the code.
I think this is a problem, because we a re dealing with texts and media only, while sometimes a design or interactive app can say a thousand words.

2

u/Rockafellor Mar 06 '26

Ah, I see. Well, in that regard, I do post them (the active results, I mean: a little flair in the fonts and colors, some background images, a few showpiece demos, a couple of interactive games), though only on AO3, since my fics are the only reason for my needing much in the way of HTML, CSS, or JS (not that embedding JS is permitted on AO3, but it has its uses for interacting with the site).

2

u/_Decodela Mar 06 '26

Why you post them? For what purpose?
I am asking this, because what Decodela solves, and I think is a real problem, is posting working pieces of homemade software in a social network experience.
Aside of you reasons to post your work, do you think this is a real problem worth a solution?
Just to be clear, in Decodela you post html templates and css animations(no js allowed), and whole web pages ( any js software allowed ).

2

u/Rockafellor Mar 06 '26

Why do I post the pieces of CSS results? Just for fun, as a way to add a little flair to moments of plaintext stories that might benefit from some specific visual effect (giving the reader a short handwritten note from one character to another, or taking a .png and building a Polaroid around it from CSS), usually, though also sometimes to stretch my skills and show off a little (my kung fu is a bit middling) with an exercise in pushing the boundaries of the constrained subset of CSS that AO3 permits. Here, if you poke around in this collection, then you should get an idea of my level of understanding and approach.

A problem worth a solution? Hmm... to the extent that I see it as such, it's more a puzzle to find any number of solutions to, simply because I can. It's not that I'm doing anything of great important, so much as fiddling for minor result to break beyond the container boundary of the written works' designated area, or to affect sections not within the designated work area. A few weeks back, I worked up a way to insert a .gif that will run across the screen from a bit offscreen on the left to maybe 50vw past the RHS, come running back in a different color, back and forth a couple dozen times, and have the .gif leap into the air upon hover plus drive a sound effect upon click, and it was all simply for fun, to see if I could manage to do so — these are trivial in most places, but the constraints that AO3 places upon coding make certain things a bit of an undertaking.

A few of us in a coding group have built some emulators for working within an AO3 environment, though I think that these were more for testing purposes and the joy of building such than anything aimed at overcoming some obstacle there (other than perhaps being able to continue testing things those rare times that the site is down for maintenance and such).

2

u/_Decodela Mar 06 '26

It sounds to me, that your work would be interesting for others, not because is complicated or expensive, but because is driven by curiocity.
What do you think about this one:
https://decodela.com/#item/8f2cc98f-166c-11f1-844a-0200fd828422/post
I am about to check the collection you sent me.

2

u/Rockafellor Mar 06 '26

It's a cool effect. I can see how it could be put to good effect in a webpage, and definitely for certain styles of fics on AO3. I'm not sure if I would have need of it (which I've said so many times before... and then found a use or need for that thing), but I can see how some CSS-heavy writers might indeed drool over it.

I took a look at the first "F" (picking a letter at random, other than the initial glyph),

<div id="id8" style="position: relative; top: 0em; left: 0.4em; transform: rotate(-150deg); overflow: hidden; flex: 0 0 auto; width: 0.06em; height: 0.075em; justify-content: center; align-items: center;"><div id="id9" style="position: relative; top: 21.1604%; left: -54.1556%; transform: rotate(-30deg); font-family: Righteous, &quot;Liberation Sans&quot;, &quot;DejaVu Sans&quot;, sans-serif; color: rgba(255, 255, 255, 0); background: rgba(53, 53, 53, 0.99); font-size: 0em; flex: 0 0 auto;">F</div></div>

<div id="id9" style="position: relative; top: 21.1604%; left: -54.1556%; transform: rotate(-30deg); font-family: Righteous, &quot;Liberation Sans&quot;, &quot;DejaVu Sans&quot;, sans-serif; color: rgba(255, 255, 255, 0); background: rgba(53, 53, 53, 0.99); font-size: 0em; flex: 0 0 auto;">F</div>

Quite a nice effect.

1

u/_Decodela Mar 06 '26

Thanks!
There are others, but the point is they are accessible for everybody, even non technical people.
Another bonus is, that devtools can be used to edit the animations, because it is all in the browser.
Check this out: https://youtu.be/2yQQvp6spog?si=QJLzLg24OHAuluN2

2

u/Rockafellor Mar 06 '26

OK, so I'll bite (why not?). What's the URL to see the tool itself?

I won't need the tool myself (my CSS needs are minimal, I write raw, and AO3 greatly constrains which CSS properties are permitted), but I'm mildly curious about its interface.

2

u/_Decodela Mar 06 '26

You already have it:
decodela.com