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 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.
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.
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.
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.
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!
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.
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 :)
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.
That is correct. But what is the correct attitude when you don't like something? Is it nowadays only acceptable to give positive feedbacks only? The trend to be glorious about the project or shut up. This constant shutting up, makes some people think how great they are (because they only get possitive feedbacks), but real world experience will be shocking to them.
Apart from it and that differs me from you. I was not personal. I didn't said that author is shitty person, because those animations suck.
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.
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.
WTF? When I say I hate this, it's bad. When guy above say he love it, it's bad either. And who are you? That you can talk in name of HN community. The god of HN?
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!
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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
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...
> 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.
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!
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.)
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?
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!
91 comments
[ 3.3 ms ] story [ 155 ms ] threadThe 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 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.
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.
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.
The CSS trick is great, but I have to say the usage of that site is non-intuitive at all.
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.
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.
Last pure MIT version: https://github.com/IanLunn/Hover/commit/7b2597e011c3495511f9...
Apart from it and that differs me from you. I was not personal. I didn't said that author is shitty person, because those animations suck.
https://news.ycombinator.com/newsguidelines.html
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.
Thanks for the nice resource, but please up the contrast.
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.
Shame on me.
The same author made a warm dark VS Code theme[1].
[0] https://github.com/jolaleye/cssfx [1] https://horizontheme.com/
Good work otherwise!
As a non-designer, I find this to be “Decoration” more so than a utilitarian 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.
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.
(Even if you consider Webkit and Blink largely the same, 2.5 engines is much better than 2.)
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.
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).
And, uh, Apple's programs for Windows have a history of being really bad. Possibly done intentionally, but even so...
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.
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
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?
- “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?
Not trying to be rude, but quite literally a default unstyled button has better easy of use than these stylized buttons.