| |  |
Are you interested in useful and creative CSS tools? Then, we have an excellent list for you, provided by several developers. The following lists consists of 15 most useful CSS tools, generators, templates and resources. This list has some very uncommon tools which would suit you the best, rather than the common ones like Firebug or Web Developer.
#1.Hyphenator :
If you are looking to bring client-side hyphenation of HTML documents to every browser then take help from Hyphenator.js. It simply inserts soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. It provides hyphenation in all browsers which support JavaScript and the soft hyphen for at least English, German and French.
#2. CSS Type Set :
This tool is used for hands-on typography allowing designers and developers to interactively test and learn how to style their Web content. \
#3. Typechart :
This tool lets you flip through, preview and compare Web typography while retrieving the CSS.
#4. CSS-Typoset Matrix and code generator :
This is a matrix table which presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes. It also generates the source code on the fly.
#5. Em Calculator :
This is a small JavaScript tool which allows you to make scalable and accessible CSS design. It also converts sizes in pixels to relative em units, based on a given text size.
#6. Facelift Image Replacement (FLIR) :
FLIR is an image replacement script which dynamically generates image representations of text on your Web page in fonts that might not be visible to your visitors. How To Use Any Font With FLIR: Tutorial
#7. Vertical rhythm calculator:
This tool helps in converting pixel values to em values depending on the font size of the text. Margins and paddings can also be set automatically, depending on the line height you’ve defined.
#8. typeface.js :
You can also typeface.js instead of just creating images or using Flash to show your website’s graphic text in your desired font. With this tool you can write in plain HTML and CSS.
#9. PSD2CSS Online :
It is a free online service which generates Web pages from Photoshop designs.
#10. Conditional CSS :
Using this tool you can write maintainable CSS with conditional logic and target specific CSS statements for both individual browsers and groups of browsers.
#11. MoreCSS :
This is a JavaScript library which is design orineted and it allows you to write code for applying automatic hyphenation. It creates pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But what makes it most special is that you can do these things along with your regular CSS.
#12. px to em :
Developers call this tool as “px to em conversion made simple”. You can type a base font size in pixels, and a complete pixel to em conversion table will be produced, making elastic Web design much easier.
#13. CSS Frame Generator :
Corresponding CSS is returned in a line-by-line way through this tool and it's indented with spaces to reflect XHTML structure. You may find it a bit strange at the beginning, but when you get accustomed to it you will find it very useful.
#14. CSS Redundancy Checker:
This tool can be used to find CSS selectors which aren’t used by any of your HTML files and that may be redundant.
#15. CleverCSS:
This is a small markup language used for CSS and it can be used to build a style sheet in a clean and structured way. It's much cleaner and more powerful than CSS2.
Try to develop these tools further and also try to develop new ones till we see you again with some new CSS tools.
0 comments:
Post a Comment