
Show HN: CSSFX – Click-to-copy CSS effects - jolaleye
https://cssfx.dev/
======
dchest
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).

~~~
dinkleberg
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 design, this is a great resource. I'm sure there will be
haters as with most tools, but this will be useful for me.

~~~
commandlinefan
I accidentally clicked and noticed it. Must agree this is pretty amazing, too.

------
whytaka
As a UX person, I see good and bad when I see these sorts of websites.

The good I see is that the markup is absolutely minimal, although I'm
disappointed that the developer didn't give a unique name to the css in the
examples. I see so many developers complain about CSS but time and time again,
I see that the problem isn't that CSS is some terrible archaic language, it's
that developers create messy markup that forces CSS hacks to correct them.
Nevertheless, this website does a great job in not exactly showing the 'What'
but the 'How' which leads to my next point.

The bad I see is that unless these effects are edited to match a more complete
brand style guide, they just look like gimmicks and will do little to
'delight' any user.

~~~
Anonymous4C54D6
I especially dislike most of these because they don't actually feel very
responsive. The animations are so slow that quickly hovering something looks
jarring and waiting for the animation just feels wrong.

~~~
knd775
I don't mind that. The slower transitions help showcase exactly what the
animations are, and anyone should be able to change the css transition from
0.25s to whatever else they'd like it to be.

------
Wowfunhappy
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 middle of the animation.

~~~
slivanes
I'm starting to get the feeling that Safari is going to be left behind and
treated like ie6/8 in the near future.

~~~
dspillett
That is already happening.

I know a number of people including myself who pretty much ignore Safari for
small projects because they don't have iDevices to test on and Safari doesn't
run anywhere else. In that instance you just stick to the standards and either
hope Safari will cope or don't care if it doesn't.

Even on larger and/or professional projects I see it given second class
support: people make sure their project works on Safari, so no show stopper or
nasty UX bugs, but display glitches and non-major performance issues that are
Safari specific get very low priority, if they are addressed at all.

Currently the differences seen are far less stark than those seen between
IE6/8 and other browsers so this is a relatively minor issue, but it might not
remain so.

In projects aimed for a wide audience though and for which mobile is a key
platform, Safari support is forced much as old-IE support has been forced upon
those of us writing software for large institutions who are slow to update,
because nothing else runs on iOS. iDevice users can be pretty vocal and not
quick to blame their own devices, and even ignoring the noise they can
generate they tend to be people with disposable income so if your
project/product is commercial you probably can't go too far down the road of
ignoring Safari.

~~~
ricardobeat
That’s a terrible excuse since 1) there are plenty of remote/virtualisation
tools that let you easily test any browser or platform 2) same logic applies
to mobile 3) iPhone has up to 80% share in many locations, Macs up to 25%
share in some demographics

~~~
neurotrace
It may not be fair but it's true. Testing for Safari is such a hassle in my
Windows and Android dominated world.

~~~
TimTheTinker
That's a good argument for always supporting multiple platforms if you're a
browser developer.

In related news, the new Edge will be released for macOS. I think Apple should
follow suit with Safari on Windows again (shouldn't be too much work, since
they already have the build and toolchain from a while back).

~~~
Wowfunhappy
IIRC, Safari on Windows is a decade old or more. I'd bet mainline Safari has
changed a lot in that time. Would probably be a significant amount of work.

And, uh, Apple's programs for Windows have a history of being _really_ bad.
Possibly done intentionally, but even so...

------
brianzelip
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] [https://github.com/jolaleye/cssfx](https://github.com/jolaleye/cssfx) [1]
[https://horizontheme.com/](https://horizontheme.com/)

------
nestorherre
Something similar that could be useful for you guys:
[https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/)

~~~
hk__2
I don't understand why on Earth would someone include 56kb of CSS just for
bouncing text and other annoying animations. In which use-case does this bring
anything to the user?

~~~
nestorherre
You don't need to add the whole CSS, but instead just use the specific
animations that you need.

A lot of products are succesful because of the way they're presented, rather
than what they do, so animations like these could break it or make it for
some.

------
jolaleye
Thank you for all the feedback! The biggest issues I've heard so far are in
regards to clicking the effects and contrast. First, I've updated the hover,
button, and modal colors to help at least a little with the contrast issue.
This will still need some continued tuning. Next, I've fixed the clicking
issue. Clicking on the effects should now properly open the inspection modal
(except for inputs). This was an admittedly lazy design :/ Thanks again for
all the feedback!

------
cr0sh
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 background - at least, that's what I perceive.

So certain effects are very subtle (in my case, I had to look at the "pulse"
effect carefully to see it).

Maybe have a "light vs dark" setting? Or multiple color combos to try out?

------
spectramax
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 “Decoration” more so than a utilitarian
tool.

~~~
ThomPete
Sometimes. Mostly they create a feel and are more of an optimization tool.

However, a more complex set of animations do provide quite a lot of improved
usability because they can tie things together that would otherwise be
separate steps.

~~~
spectramax
I can see why the "loader" animations inform the user that "hey, we are
working on it please be patient and your browser isn't locked up!"

------
SamWhited
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 because they are almost the same color as the background. I
don't think my vision is particularly bad, but there's just not enough
contrast for me to see the buttons or backgrounds even on a nice monitor that
reproduces color well.

Thanks for the nice resource, but please up the contrast.

------
ricardobeat
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 nothing clickable?

~~~
johnday
I think your "issue" with the Shine animation is just what the Shine animation
is supposed to look like.

------
mrhappyunhappy
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 any value to a user. Other than a short burst
of dopamine you might get from that “oh neat!” feeling, I just don’t see the
point.

~~~
raviojha
I think it's meant to be a subtle addition to overall feel when user lands on
the page. I've not seen this happen in SaaS products, however, most product
marketing/landing pages have a certain "uniqueness" to create a brand/product
perception by employing such effects. One of the examples I can think of is
Stripe, all the mix of graphics and animations on their product landing pages
adds a bit to the overall feel. One other community platform that stands out
from design point of view is IndieHackers. Ofcourse, HN has its own charm.

------
Solvitieg
Focus on easy of use, however the author did not implement a :focus or :active
state.

Not trying to be rude, but quite literally a default unstyled button has
better easy of use than these stylized buttons.

------
nullandvoid
Just a UX point - I had to think twice on how to "copy" the CSS. on my screen
the background highlighting that exists outside the button is barely
noticeable.

Good work otherwise!

------
karanrajpal
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?

~~~
betenoire
Considering the effort involved in building all this, the $12 annual cost for
the domain name is probably insignificant. And static hosting is free.

------
lixtra
Related: [https://ianlunn.github.io/Hover/](https://ianlunn.github.io/Hover/)

~~~
spzb
I think that dev needs to revisit his licensing. He's used an MIT license and
then added some exclusions which sound a lot more like GPL.

~~~
lixtra
Yes, see
[https://github.com/IanLunn/Hover/issues/123](https://github.com/IanLunn/Hover/issues/123).

Last pure MIT version:
[https://github.com/IanLunn/Hover/commit/7b2597e011c3495511f9...](https://github.com/IanLunn/Hover/commit/7b2597e011c3495511f93cbca4e148308e0df1c7)

------
surfmike
When I click on “Bubble” in mobile Safari I don’t see anything. Should I be
looking somewhere else for the effect?

~~~
Wowfunhappy
It’s a hover animation, so it not really intended for mobile. (Mind, I _do_
see it on my iPhone when I tap the button, so not sure why it doesn’t appear
for you.)

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

------
nestorherre
This is really good, I hope you add more. Will use for use.

~~~
spectramax
Please add something useful to your comments. Just saying “This is great” is
not adding anything to the discussion and doing a disservice to the whole HN
community.

~~~
nestorherre
I get your point on not adding anything to the discussion, but I disagree on
doing a disservice to HN.

Sometimes you like a post/product/comment/:anything and just want to give a
pat on the back to the creator in a different way than giving a "like" (an
upvote in this case), without going too deep on the why. This can work as an
input for the author to keep contributing in the community.

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

~~~
Offpics
monokai

------
huhtenberg
First "Outline" is just superb. Unique, interesting and _simple_ at the same
time.

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

Shame on me.

~~~
humblebee
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 (if you can find it. Note: click outside of the
button in the almost zero contrasted background area).

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

------
AndrewStephens
Where was this last weekend when I was doing some simple CSS animation for a
personal project?

~~~
swyx
here's more, if it helps: [https://github.com/sw-yx/spark-
joy/](https://github.com/sw-yx/spark-joy/)

------
barbarbar
Yes very beautiful. Thank you for sharing.

------
86carr
This is very cool!

