6 ms·
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).
by dchest 7y ago
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).
- _eric 7y agoYup, me too. I think clicking both on and around the elements should show the code behind that element.
- dinkleberg 7y agoIf 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 7y agoI accidentally clicked and noticed it. Must agree this is pretty amazing, too.
- ausjke 7y agoThank 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.
- tylfin 7y agoYeah I was about to post that it didn't work on firefox...
- _bxg1 7y agoAlso, 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.
- jolaleye 7y agoYou'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!
- kingludite 7y agoit should have check boxes so that one can combine them.
- andrewstuart 7y agoYeah its really not obvious how to get the code - there should be a "show css" link under the button.
- rectangletangle 7y agoI 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.
- deathanatos 7y agoThe 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.
- Cybernetic 7y agoThanks 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.
- jolaleye 7y agoThis 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 :)
- underwater 7y agoThis made it unusable on mobile. It's not possible to preview an effect without tapping, which means the code obscures the preview.