I do a lot of relatively unconventional things with CSS at my current job to build out social data visualizations. Things like animations, transitions, and lots of absolute positioning and pseudo-elements. Every time I work on a project, I find myself referencing a few sites quite often to experiment with pieces of CSS. I thought I would just share them here.
The first is colorpicker.com. There are plugins to find hex values on existing sites, and I could open up something like Photoshop to find a hex or RGB value, but mostly I just use this site to quickly find colors I need. I’m sure there are others just like it, but they won the SEO battle, I think.
Related to color is the excellent SASS color resource by Jackie Balzer, which is an easy cheat sheet for all the different ways you can manipulate colors in SASS. Seriously, you should be using SASS if you haven’t tried it out yet. I hope her site convinces you to give it a shot.
Next is this gradient builder. It works just like Photoshop’s gradient builder and is very helpful for remembering all the vendor prefixes.
Ceaser, the CSS Easing Animation Tool is another extremely handy site. You can experiment with the animation curves of CSS transitions and visually see the result. Pull the handle above the square, for example, and see a nice bounce effect.
I use the CSSmatic’s box-shadow generator as well. I like that you can easily change the shadow from outline to inset, which is something other generators I’ve seen don’t have.
Finally, the ever-useful CSS Tricks page on keyframe animations is always my go-to reference for building out CSS keyframe animations.
I’m sure I’m missing some well-known resources, but these are sites I reference time and time again to build out visualizations and event displays in the web browser.