Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: CSSFX – Click-to-copy CSS effects (cssfx.dev)
595 points by jolaleye on May 8, 2019 | hide | past | favorite | 87 comments

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

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.

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

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.

You're right, this was exactly why. It has been fixed now though :) I've also added "input" to the input effects to make their function a bit more clear. Thanks for the feedback!

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

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.

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

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 :)

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

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

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.

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.

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

I found this true as well.

However, the actual effects are nice. I did notice some flashing with the "bubble" animation on Mobile Safari (probably a browser quirk). Though others like "slide" appear smooth and sleek.

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.

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.

> fork it apply your ideas and request a pull request

exactly! it's open source, so make it your own if you're not satisfied with someone else's way of doing things. very cool demo.

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.

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.

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.

What browser/hardware did you try them with? I don't have a particularly fast computer and they run really smoothly on both Firefox and Chromium.

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.

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

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.

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

> 1) there are plenty of remote/virtualisation tools

For small/personal projects they need to be free and, for some of us, available offline (I often tinker locally while travelling through low/no signal areas). Do you know of any that fit that bill?

Even with free and convenient tools some will resent needing to test on an extra platform at all just because Safari is slow to adopt new ideas or implements them partially/buggyly.

> 2) same logic applies to mobile

Incorrectly, but yes it does. Which is why you often see "doesn't work on mobile" or "works badly on mobile" in comments here and elsewhere. Mobile is a more general thing than supporting Safari though and a battle in its own right: it is more about accounting for small screens, no physical keyboards, touch-only, low power CPUs, etc.

> 3) iPhone has up to 80% share in many locations,

If a project is not optimised for (or not working at all on) mobile generally, then iDevices having x% share of mobile for particular populations becomes irrelevant. 80% seems rather high for any given population though, could you state any for which this is definitely true?

> Macs up to 25% share in some demographics

You are not potentially cutting these people off by not supporting Safari though, as they have the option of using other UAs unlike users of iOS based devices.

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

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

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

Please share these tools for testing old safari, last time I checked I couldn't find any

Browserstack, crossbrowsertesting.com, sauce labs.

Given that we’re down to just three rendering engines of import, I really hope we don’t lose any more.

(Even if you consider Webkit and Blink largely the same, 2.5 engines is much better than 2.)

Not on iOS, since there is no alternative there.

^ This is true, although in context, all the stuff that didn't work were hover animations, and those don't really matter on iOS.

But it might suit your application to have an animation happen on tap, or on load, that looks like the hover ones. The trigger is probably the least important part of this demonstration site.

Especially Safari on iOS. It infuriates me that we still don't have a push notifications API, nor a roadmap for when it may be included.

I really don't live in that world

I use PWA, SPA, CSS, SVG, the works and don't have any issue with Safari and iOS rendering the way I expect it to alongside Chrome and Firefox

Odd thing to leave out since Safari runs on 100% of iOS devices.

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!

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/

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

Pretty cool, but feels so much like PowerPoint slide transitions

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?

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.

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!

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?

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.

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.

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.

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.

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!"

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.

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?

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

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.

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.

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

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.

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!

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?

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

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.

Yeah I'm also a little confused about the license. The website state it's MIT for personal use but not MIT for commercial. Given the MIT license for personal, couldn't I just fork it under MIT and re-license my fork for commercial under MIT as well? (I'm a license noob)

I wonder if those exclusions are even valid, because clicking on the "Read full license" gives a license which includes none of those exclusions. Surely the full license should have those exclusions specified.

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

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

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

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

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.

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.


I can empathize with your frustration. I love HN because of constructive comments that evoke different views of the topic at hand, arguments that uncover deep underlying aspects of a subject and expert opinions that make this place a unique gem on the internet. When one says "This is great" or "I hate this", the rest of the users do not benefit from it as it has no explanation as to why something is good or bad. "I dislike this because of A, B and C" would be totally acceptable here. Hope that makes sense and cheers!

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


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

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

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

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

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

Yes very beautiful. Thank you for sharing.

This is very cool!


> Please don't post shallow dismissals, especially of other people's work. A good critical comment teaches us something.


Why would you post this? You're not sorry - you're rude and have a shitty attitude.

While I don't agree with that, much like everyone's first program, you can use them to build something greater that would fit your tastes and expectations.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact