Show HN: CSSFX – Click-to-copy CSS effects
cssfx.dev
cssfx.dev
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.
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.
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.
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 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.
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.
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.
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...
(Even if you consider Webkit and Blink largely the same, 2.5 engines is much better than 2.)
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
The same author made a warm dark VS Code theme[1].
[0] https://github.com/jolaleye/cssfx [1] https://horizontheme.com/
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.
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?
As a non-designer, I find this to be “Decoration” more so than a utilitarian tool.
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.
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.
Thanks for the nice resource, but please up the contrast.
- “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.
Good work otherwise!
Last pure MIT version: https://github.com/IanLunn/Hover/commit/7b2597e011c3495511f9...
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.
Shame on me.