Last time I got few handy and useful css tools for our audience, today I amassed some more useful css tools and web services that will help with your development tasks and increase your coding efficiency. Following tools will let you create css checkbox, buttons, css effects, icons, gradient generator and many more. I hope list of css tools will be useful and handy for you. Enjoy !
1. CSS Checkbox
Buttons is a CSS library for creating highly customizable, flexible and modern web buttons. It is built with Sass + Compass and has support for square, rounded or circular buttons that can be flat or not and having custom effects (like glow). The sizes, colors, effects and fonts used can all be changed with the help of variables and it can be extended easily.
With icon-fonts, it became clear that, soon, we’ll no longer be using any images for icons. Cikonss is a one more step further in icon usage as it uses no fonts but the items are created with pure CSS. Currently, there are 40+ items in the set, they are responsive-layouts-friendly and work cross-browser (no CSS3 properties are used).
Label.css is a simple-yet-useful set of CSS rules that provide a global label usage. Each label can be attached to any element, positioned how we want (right, left, top, bottom, inside, outside) and can be animated with float or fade effects. It works by adding pre-defined classes to the elements and the content of the labels are stored inside the data-label attributes of each element.
6. CSS Modal
7. Gallery CSS
8. CSS3 Patterns
CSS3 Patterns Gallery, a website by Lea Verou, displays creative and good-looking patterns built with CSS3. The gallery has a growing list of patterns and new ones can be submitted by everyone (once they meet a set of requirements). Such patterns, besides having a smaller size compared to images, are much more flexible in every way like the ability to change the colors, dimensions, etc. Such patterns, besides having a smaller size compared to images, are much more flexible in every way like the ability to change the colors, dimensions, etc.
CSSmatic is a non-profit ultimate CSS tools for web designers. There are four useful tools at the moment. You can use the Gradient Generator which supports multiple colors and opacity stops to get amazing gradients. By using the gradient tool you can create gradients with smooth color changing effects and subtle transparencies.
10. Diagnostic CSS
Diagnostic CSS can be installed via Rails or Sinatra, and will visually highlight a variety of problems with your HTML files, including inline styles, invalid links, empty elements, elements missing required attributes, and deprecated elements. Once it’s installed, it will be injected into an HTML page automatically.
CSSCSS analyzes your CSS files to see which rulesets have duplicate declarations. This makes your CSS lighter and easier to maintain. It’s simple to install as a ruby gem and runs in the command line.
13. CSS Ratiocinator
CSS Ratiocinator is a tool that will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site’s live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the last pixel. It addresses the problem of old CSS whose styles accumulate and contradict each other. The Ratiocinator wipes the slate clean and provides a harmonious new beginning.
14. Groundwork CSS
15. Bi-App-Less & Bi-App-Sass
Bi-App-Less and Bi-App-Sass allows you to write your stylesheets once, and have them compiled into 2 different stylesheets one for left-to-right layout, and the other for right-to-left layouts.
When using Bi-app-less & Bi-App-Sass, all you have to do is to write your stylesheets once using predefined mixins for those direction related properties, and once you compile your stylesheets, you’ll have two stylesheets for your bi-directional app.