3 Gifts for User Interface in CSS3

Box-sizing and box-model

Box-sizing 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.

Firefox has this feature prefixed with -moz-, resulting in -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing.

Browser Support

Mozilla, Safari, Opera support box sizing proerty but IE doesn't support.

The resize property in CSS3

It allows you to specify if a box is resizable. WebKit implemented it in the latest nightlies. Below is an example box, which is resizable if your browser supports resize:

Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text

The code for this is very simple:

div.resize {width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto;}

Now it supports resize: both; like the box above, but also resize: horizontal; and resize: vertical;. Here’s the horizontal one, which has a max-width, so you won’t break the layout completely, and a min-width so you can’t make it to small either:

Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text

And the vertical one. with a max-height and a min-height:

Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text Sample text sample text sample text sample text sample text sample text

Outline

Outlines have been expanded in CSS3 to include the outline-offset property. This allows the offset to be rendered away from the edge of the specified element. In the example below, the offset is specified as outline-offset: 12px; and the outline as outline: 2px solid blue;

div.example {width: 150px; height: 150px; border: 1px solid black; outline: 1px solid blue; outline-offset: 12px;}

Example

This div has both a black border, and a blue outline, with an offset of 12 pixels.

This currently works in Opera, Safari and Firefox.

Source:css3.info

Related Posts :