1 min read

7 Highly Powerful Tools For Improve CSS For Designers

HFk111102PM7262014CSS needs no introduction. While it’s a handy resource for designers looking to style web pages and user interfaces written in HTML and XHTML, the fact that it can be applied to any kind of XML document goes on to show its immense functionality. Here are 7 highly powerful tools that improve the functionality of CSS significantly.

1.Hyphenator.js

Hyphenator.js automatically hyphenates texts on websites if either the web developer has included the script on the website or you use it as a bookmarked  on any site.

2.Conditional-CSS

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

3.typeface.js

With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images. Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

4.CSS Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zigzags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

5.MoreCSS

An easy to use, lightweight and fast JavaScript toolkit / library with CSS syntax for common things. More CSS , query  and YUI, all these libraries are really great – if you want to do really great things. But sometimes you need just some more CSS. – With only 10 KB and it’s CSS like syntax More CSS is perfect for all the daily JavaScript things: popes, tabs, tooltips and some more.

6.CSS sprites

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

7.PSD2CSS Online

At it’s core, psd2css Online converts all of your PSD layers directly to CSS layers. For most cases, absolute CSS positioning is used and the image that is the layer in the PSD file is the image within the generated CSS layer. That’s important, but the real magic is in the Layer names. psd2css Online will ‘read’ your layer names and do some special things for you based on what it finds.

Leave a Reply