Wonderful CSS Tools • Web Fonts & CSS
Secondly, and more importantly, if all designers were to simplify the coding of the CSS and add the new CSS3 properties to the mix we would become closer to having a universal compliance for all developers. This post is a collection of tools to help with your CSS skills. They will help to make your code more efficient and may even teach you some new cool CSS3 properties that we should be incorporating as designers that care about their profession.
CSS Lint
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. There are tons of tools on the web that looks through your code and shrink it, validate it, and so on. But CSS Lint is one of the few that teaches you at the same time. By pasting a large amount of code into CSS Lint it will find inefficiencies and syntax errors. Instead of fixing the issues for you, it shows the problems that it finds. The benefit of this particular tool over tools that automate the code-cleaning is that it teaches you as a CSS programmer to be more efficient in your coding and to simplify your website designs.
The Web Font Combinator
With the use of web font usage web designers needed a tool that would allow fonts to be viewed next to each other. There have been many printed collections of font examples that the end user can combine in order to see how a header, body, footer, menu font will work together. However, there were no tools on the web that replicated this using the current web font technologies. Here are some of its features. A reverse button shows the difference for a dark background compared to a light background. The header and body text are both editable. You can hide each of the three elements by selecting the “hide this” selection in each of the drops down menus. Currently, this tool will only use fonts supplied by the Google Font Directory as well as common system fonts.
Layer Styles
Layer Styles is a web-based alternative for the creation of CSS. It makes a graphical representation of the style you are trying to produce. By using this tool you choose that style from the many that are already provided and then tweak it with colors and opacity until you get what you need. There is much more to this tool and it is worth your time to take a peek and see all the options it has to offer.