A wealth of tools from Smashing Magazine
written by: Jeff McNearA wealth of tools from Smashing Magazine
All of us should be periodically checking on Smashing Magazine … a recent article describes 8 terrific CSS generating & analysis tools that I am glad to know about:
https://cssstats.com/
CSS Stats audits CSS files requested on a page providing a dashboard view of rules, selectors, declarations and properties. It breaks down all styles into groups, from layout and structure to spacing, typography, font stacks and colors.
https://yellowlab.tools/
Yellow Lab Tools, is a free tool for auditing web performance, but it also includes some very helpful helpers for measure the complexity of your CSS — and also provides actionable insights into how to resolve these issues.
https://isellsoap.github.io/specificity-visualizer/
CSS Specificity Visualizer Is a visual way to identify potentially problematic patterns and especially useful for analyzing very big and complex stylesheets.
https://shadows.brumm.af/
Automatically generate CSS code for really smooth, layered box-shadows & generates the code they need on the spot.
https://9elements.github.io/fancy-border-radius/
When we think about border-radius, we usually think about a few straightforward values — perhaps 8px or 11px, or maybe 16px. However, border-radius can be quite fancy, and fancy-border-radius generator allows you to generate them easily.
https://cubic-bezier.com/
Sometimes an animation just doesn’t feel right, does it? Perhaps the duration is off, or the easing is quirky, and figuring it out might take quite some time. With Lea Verou’s cubic-bezier, you can preview and compare animations, slow them down and even adjust them visually. And then copy-paste the CSS snippet to plug into your project right away.
https://larsenwork.com/easing-gradients/
With gradients, we often rely on linear gradients, transitioning from one color to another. However, linear gradients have hard edges where they start or end. There is a way to make the gradients slightly better, with easing functions. So Andreas Larsen has built a little editor, Easing Gradients Editor, that allows us to create and preview easing gradients in CSS.
https://learnui.design/tools/data-color-picker.html#palette
Sometimes you need very specific type of color for a very specific task. For example, if you are working on a data visualization project — e.g. pie charts, grouped bar charts, maps — you probably need a series of colors that are visually equidistant. That’s when LearnUI Data Color Picker can become very useful.