What’s New In CSS3?
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).
The third version of CSS also known as CSS3 came with some new, interesting futures that will ease our work.
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 thebackground-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; normalor 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.
So was it worth trying all of those features? Actually Yes there are very usefull and there are some new features like Sizzle, CSS3 Color Names, CSS3 Generator, CSS3 Selectors Test, CSS3 Maker, Widget Pad, CSS3 Click Chart and much more…
Originally posted 2012-04-03 18:37:50.