Show HN: CSSFX – Click-to-copy CSS effects

[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.

[_bxg1]

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). Presumably the reason you have to click outside the button to see the code is that the click events get consumed - because some of the effects require clicking. This was actually how I figured out that some of them require clicking.

[deathanatos]

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.

[_eric]

Yup, me too. I think clicking both on and around the elements should show the code behind that element.

[jolaleye]

This was an admittedly lazy design choice. The reason it worked this way was so that input effects could be clicked without opening the modal. The issue has been fixed so that now all effects aside from inputs can be properly clicked :)

[tylfin]

Yeah I was about to post that it didn't work on firefox...

[ausjke]

Thank you, I almost gave up.

The CSS trick is great, but I have to say the usage of that site is non-intuitive at all.

[Cybernetic]

Thanks for pointing this out... I was sure something was wrong with the site and it wasn't working - hover effects are 'invisible' on my MBP screen.

[andrewstuart]

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

[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.

[MrBoomixer]

I do think that is the kind of purpose for these demo/example sites. They represent a basic concept in a visually pleasing way and allow developers / UI / UX people to take them and integrate them into the brand they are working with. For personal projects it's probably easy enough to just grab and go without thinking about it to much.

I agree with you about CSS and markup, so making something like this a utility class/setup could help it integrate well. It is an open source github repo, fork it apply your ideas and request a pull request.

[chefandy]

As a graphic designer, I see no problem with this sort of thing. I'm guessing the author imagined these gizmos being used by people who are looking to publish something that isn't completely unstyled but doesn't have enough non-textual communication needs to justify getting someone with the expertise to make a real design, (let alone creating a complete visual identity.) For example, this sort of thing might be useful for someone rolling their own site for an open source python module. In these contexts, I see no problem with decoration for the sake of decoration as long as it doesn't significantly take away from the message.

[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.

[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.

[jolaleye]

Thanks for the notice. I'm not quite sure what is causing some of these bugs but I'll be sure to continue working on it. The project is fully open source so feel free to make a PR if you're interested!

[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 [1] https://horizontheme.com/

[nestorherre]

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

[dlivingston]

Pretty cool, but feels so much like PowerPoint slide transitions

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

[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.

[TazeTSchnitzel]

Animation can be useful to draw the user's attention to a change. For example, a subtle animation when focussing and defocussing fields 1) makes you notice the focus shifted, and 2) makes you able to see which fields the focus shifted between.

[mrhappyunhappy]

It depends on a lot of things including intended audience, function you are trying to achieve, brand perception, if this is meant to be part of a larger overall experience, users device etc...

Frankly, I agree with you. I design and I too find this on the opposite spectrum of what I’d consider useful or beneficial. I don’t say this to belittle the effort that went into creating this, speaking strictly from utility angle.

[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.

[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.

[nullandvoid]

I think there's plenty of value in a good looking loading bar, or a button that provides feedback when interacted with etc.

[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/

[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.

[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.

[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.