CSSFX

If you hadn't posted this comment I wouldn't have realized that even existed. But to OP, thanks for making this. As someone who hates writing complicated CSS but loves good…

As someone who's rather terrible at CSS I absolutely love this! Please make more :)

First "Outline" is just superb. Unique, interesting and simple at the same time.

Those inputs and loaders are great! Nice nuxt app w/ single file vue components to boot - well organized and clear[0]. The same author made a warm dark VS Code theme[1]. [0]…

Took me some time to figure out that I should click slightly outside of the buttons to get the code (highlighting is barely visible on my MBP screen).

Yeah its really not obvious how to get the code - there should be a "show css" link under the button.

Took me a while to figure out that these CSS effects are not used to copy the content of the buttons. Shame on me.

That was my thought. "Beautifully simple click-to-copy CSS effects " is a terribly misleading title for this. These are hover effects that you can click-to-copy the css-source…

The highlighting is barely visible on anything. Without hover: rgb(9, 8, 33) With hover: rgb(13, 11, 38)¹ ¹After blending. The hover actually adds rgba(24, 21, 55, .2) to the box.

Some of the effects are nice, but I couldn't actually tell where to click both for the reasons other people on here have said, and because I can't tell where the buttons are…

In case it hasn't been said yet - the color scheme for the page needs work. On my MBP it looks/feels like "dark on dark"; that is, the buttons are a dark blue on a darker blue…

Honest question: do they effects do anything in terms of UI/UX principles and helping users for signaling state, evoking an action, etc? As a non-designer, I find this to be…

As a UX person I really don’t get why people try so hard to ruin a good experience by adding animations. This stuff is great for ego building but terrible in terms of providing…

This made it unusable on mobile. It's not possible to preview an effect without tapping, which means the code obscures the preview.

Mobile issues: - “shine” has a visible slanted block travelling across - impossible to scroll the modal showing the code snippets - no idea how I even opened that as there is…

I am on mobile, the effect is behind the code popup I guess so it is not visible

Heads up, a number of these effects don't appear to work correctly in Safari. For instance, the first, second, fourth, and fifth in the top row have a distracting flash in the…

Also, a couple of the effects only happen on click, not hover. Would be great to have better messaging about which is which (cursor change, a badge of some kind, or otherwise).…

Yeah its really not obvious how to get the code - there should be a "show css" link under the button.

Some of the effects are nice, but I couldn't actually tell where to click both for the reasons other people on here have said, and because I can't tell where the buttons are…

In case it hasn't been said yet - the color scheme for the page needs work. On my MBP it looks/feels like "dark on dark"; that is, the buttons are a dark blue on a darker blue…

it should have check boxes so that one can combine them.

Loved the effects. As a developer, I'm curious as to hear your motivations behind paying out-of-pocket and maintaining a specific domain for it?

What's the color scheme used for displaying the code snippet? Is it borrowed from an official theme (Sublime maybe?) -- would love to know.

Something similar that could be useful for you guys: https://daneden.github.io/animate.css/

Related: https://ianlunn.github.io/Hover/

here's more, if it helps: https://github.com/sw-yx/spark-joy/