in Design

What’s New In CSS3 And Effective Tools&Generators

CSS is primarily used to make the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. It also enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

The third version of CSS also known as CSS3 came with some new, interesting futures that will ease our work.

I. What’s new in CSS 3?


1. Borders

– Border Color. Next to rounded borders, border-color is also very interesting. Mozila/Firefox has implemented this function, which allows you to create cool colored borders

– Border Image. With this feature you can define an image to be used instead of the normal border of an element.

– Border Radius. It allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

– Box Shadow. Box shadow allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

2. Backgrounds

– Background origin. The background-origin property is used to determine how the background-position of a background in a certain box is calculated.

– Background size. This property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

– Multiple Backgrounds. It allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

3. Text effects

– Text Shadow. CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow.

– Text Overflow. It helps you when you need text to overflow an element’s box and you want a visual “hint” to the user that text has been clipped.

– Word Wrap. The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.

4. User Interface

– Box Sizing. It let’s you change the behavior of the browser in calculating the width of an element. By default, box-sizing is set to content-box. With that set, it calculates width and height as specified by CSS 2.1, adding the border-width and border-height and the padding to the size of the box. By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.

– Resize. It allows you to specify if a box is resizable.

– Outline. This allows the offset to be rendered away from the edge of the specified element.

These are some of the main futures of CSS3. Now let’s see some effective CSS3 Tools and Generators.

 II. Effective CSS3 Tools And Generators


1, 5 Techniques to Acquaint You With CSS 3

These techniques will help you learn the new CSS3 features.


Sizzle is a useful JavaScript CSS selector engine.

3. CSS3 Color Names

Yes, we need a list because CSS3 supports 147 different colors by name.

4. CSS3 Generator

This generator allows you to create and costumize CSS3 effects.

5. CSS3 Selectors Test

After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

6. CSS3 Maker

CSS3 Maker was voted some of the best tools. Try it and you will be happy.

7. Widget Pad

Widget Pad enhance the CSS3 capabilities with a simple generator.

8. CSS3 Click Chart

CSS3 Click Chart helps you with great effects such as RGBa colors, box shadows, radial gradients and rotation.


Alexandru is the co-owner of TopDesignMag. “If it looks easy, it's hard. If it looks hard, it's impossible. If it looks impossible, it's due tomorrow. At 8 A.M.”